Helpers

angleToTarget(​source, target) #

Return the angle in radians from one point to another point.

let { angleToTarget, Sprite } = kontra;

let sprite = Sprite({
  x: 10,
  y: 10,
  width: 20,
  height: 40,
  color: 'blue'
});

sprite.rotation = angleToTarget(sprite, {x: 100, y: 30});

let sprite2 = Sprite({
  x: 100,
  y: 30,
  width: 20,
  height: 40,
  color: 'red',
});

sprite2.rotation = angleToTarget(sprite2, sprite);

import { angleToTarget, Sprite } from 'path/to/kontra.mjs';

let sprite = Sprite({
  x: 10,
  y: 10,
  width: 20,
  height: 40,
  color: 'blue'
});

sprite.rotation = angleToTarget(sprite, {x: 100, y: 30});

let sprite2 = Sprite({
  x: 100,
  y: 30,
  width: 20,
  height: 40,
  color: 'red',
});

sprite2.rotation = angleToTarget(sprite2, sprite);

import { angleToTarget, Sprite } from 'kontra';

let sprite = Sprite({
  x: 10,
  y: 10,
  width: 20,
  height: 40,
  color: 'blue'
});

sprite.rotation = angleToTarget(sprite, {x: 100, y: 30});

let sprite2 = Sprite({
  x: 100,
  y: 30,
  width: 20,
  height: 40,
  color: 'red',
});

sprite2.rotation = angleToTarget(sprite2, sprite);

angleToTarget Parameters

source

Object. The {x,y} source point.

target

Object. The {x,y} target point.

angleToTarget Return value

Number. Angle (in radians) from the source point to the target point.

clamp(​min, max, value) #

Clamp a number between two values, preventing it from going below or above the minimum and maximum values.

clamp Parameters

min

Number. Min value.

max

Number. Max value.

value

Number. Value to clamp.

clamp Return value

Number. Value clamped between min and max.

collides(​obj1, obj2) #

Check if two objects collide. Uses a simple Axis-Aligned Bounding Box (AABB) collision check. Takes into account the objects anchor and scale.

NOTE: Does not take into account object rotation. If you need collision detection between rotated objects you will need to implement your own collides() function. I suggest looking at the Separate Axis Theorem.

let { Sprite, collides } = kontra;

let sprite = Sprite({
  x: 100,
  y: 200,
  width: 20,
  height: 40
});

let sprite2 = Sprite({
  x: 150,
  y: 200,
  width: 20,
  height: 20
});

collides(sprite, sprite2);  //=> false

sprite2.x = 115;

collides(sprite, sprite2);  //=> true

import { Sprite, collides } from 'path/to/kontra.mjs';

let sprite = Sprite({
  x: 100,
  y: 200,
  width: 20,
  height: 40
});

let sprite2 = Sprite({
  x: 150,
  y: 200,
  width: 20,
  height: 20
});

collides(sprite, sprite2);  //=> false

sprite2.x = 115;

collides(sprite, sprite2);  //=> true

import { Sprite, collides } from 'kontra';

let sprite = Sprite({
  x: 100,
  y: 200,
  width: 20,
  height: 40
});

let sprite2 = Sprite({
  x: 150,
  y: 200,
  width: 20,
  height: 20
});

collides(sprite, sprite2);  //=> false

sprite2.x = 115;

collides(sprite, sprite2);  //=> true

collides Parameters

obj1

Object. Object reference.

obj2

Object. Object to check collision against.

collides Return value

Boolean. true if the objects collide, false otherwise.

degToRad(​deg) #

Convert degrees to radians.

degToRad Parameters

deg

Number. Degrees to convert.

degToRad Return value

Number. The value in radians.

depthSort(​obj1, obj2[, prop]) #

Compare two objects world rects to determine how to sort them. Is used as the compareFunction to Array.prototype.sort.

depthSort Parameters

obj1

Object. First object to compare.

obj2

Object. Second object to compare.

prop Optional

String. Objects getWorldRect property to compare. Defaults to 'y'.

depthSort Return value

Number. The difference between the objects compare property.

getStoreItem(​key) #

Retrieve an item from localStorage and convert it back to its original type.

Normally when you save a value to LocalStorage it converts it into a string. So if you were to save a number, it would be saved as "12" instead of 12. This function enables the value to be returned as 12.

getStoreItem Parameters

key

String. Name of the key of the item to retrieve.

getStoreItem Return value

Any type. The retrieved item.

getWorldRect(​obj) #

Return the world rect of an object. The rect is the world position of the top-left corner of the object and its size. Takes into account the objects anchor and scale.

getWorldRect Parameters

obj

Object. Object to get world rect of.

getWorldRect Return value

Object. The world x, y, width, and height of the object.

inverseLerp(​start, end, value) #

Return the linear interpolation percent between two values. The function calculates the percent between two values of a given value.

let { inverseLerp } = kontra;

console.log( inverseLerp(10, 20, 15) );  // => 0.5
console.log( inverseLerp(10, 20, 30) );  // => 2

import { inverseLerp } from 'path/to/kontra.mjs';

console.log( inverseLerp(10, 20, 15) );  // => 0.5
console.log( inverseLerp(10, 20, 30) );  // => 2

import { inverseLerp } from 'kontra';

console.log( inverseLerp(10, 20, 15) );  // => 0.5
console.log( inverseLerp(10, 20, 30) );  // => 2

inverseLerp Parameters

start

Number. Start value.

end

Number. End value.

value

Number. Value between start and end.

inverseLerp Return value

Number. Percent difference between the start and end values.

lerp(​start, end, percent) #

Linearly interpolate between two values. The function calculates the number between two values based on a percent. Great for smooth transitions.

let { lerp } = kontra;

console.log( lerp(10, 20, 0.5) );  // => 15
console.log( lerp(10, 20, 2) );  // => 30

import { lerp } from 'path/to/kontra.mjs';

console.log( lerp(10, 20, 0.5) );  // => 15
console.log( lerp(10, 20, 2) );  // => 30

import { lerp } from 'kontra';

console.log( lerp(10, 20, 0.5) );  // => 15
console.log( lerp(10, 20, 2) );  // => 30

lerp Parameters

start

Number. Start value.

end

Number. End value.

percent

Number. Percent to interpolate.

lerp Return value

Number. Interpolated number between the start and end values

movePoint(​point, angle, distance) #

Move a point by an angle and distance.

movePoint Parameters

point

Object. The {x,y} point to move.

angle

Number. Angle (in radians) to move.

distance

Number. Distance to move.

movePoint Return value

Object. The new x and y coordinates after moving.

radToDeg(​rad) #

Convert radians to degrees.

radToDeg Parameters

rad

Number. Radians to convert.

radToDeg Return value

Number. The value in degrees.

rotatePoint(​point, angle) #

Rotate a point by an angle.

rotatePoint Parameters

point

Object. The {x,y} point to rotate.

angle

Number. Angle (in radians) to rotate.

rotatePoint Return value

Object. The new x and y coordinates after rotation.

setStoreItem(​key, value) #

Save an item to localStorage. A value of undefined will remove the item from localStorage.

setStoreItem Parameters

key

String. The name of the key.

value

Any type. The value to store.