Added TypeScript definitions
This commit is contained in:
parent
3264ae157e
commit
5701a7946d
@ -1,47 +1,23 @@
|
|||||||
/**
|
|
||||||
* Container class
|
|
||||||
*/
|
|
||||||
class Container {
|
class Container {
|
||||||
constructor() {
|
constructor() {
|
||||||
this.pos = { x: 0, y: 0 };
|
this.pos = { x: 0, y: 0 };
|
||||||
this.children = [];
|
this.children = [];
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Adds child to container
|
|
||||||
* @param {*} child Child to add
|
|
||||||
* @returns {any} Added child
|
|
||||||
*/
|
|
||||||
add(child) {
|
add(child) {
|
||||||
this.children.push(child);
|
this.children.push(child);
|
||||||
return child;
|
return child;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Removes child from container
|
|
||||||
* @param {*} child Child to remove
|
|
||||||
* @returns {any} Removed child
|
|
||||||
*/
|
|
||||||
remove(child) {
|
remove(child) {
|
||||||
this.children = this.children.filter(c => c !== child);
|
this.children = this.children.filter(c => c !== child);
|
||||||
return child;
|
return child;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Preforms a function on all children
|
|
||||||
* @param {function} f Function to preform on children
|
|
||||||
* @returns {any} Function altered array
|
|
||||||
*/
|
|
||||||
map(f) {
|
map(f) {
|
||||||
return this.children.map(f);
|
return this.children.map(f);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Updates all children when called
|
|
||||||
* @param {number} dt Delta time
|
|
||||||
* @param {number} t Total time
|
|
||||||
* @returns {boolean} Returns if the child is dead or not
|
|
||||||
*/
|
|
||||||
update(dt, t) {
|
update(dt, t) {
|
||||||
this.children = this.children.filter(child => {
|
this.children = this.children.filter(child => {
|
||||||
if (child.update) {
|
if (child.update) {
|
||||||
|
14
asdf/Game.js
14
asdf/Game.js
@ -4,17 +4,7 @@ import CanvasRenderer from "./renderer/CanvasRenderer.js";
|
|||||||
const STEP = 1 / 60;
|
const STEP = 1 / 60;
|
||||||
const FRAME_MAX = 5 * STEP;
|
const FRAME_MAX = 5 * STEP;
|
||||||
|
|
||||||
/**
|
|
||||||
* Game class
|
|
||||||
*/
|
|
||||||
class Game {
|
class Game {
|
||||||
/**
|
|
||||||
* Set the games parameters
|
|
||||||
* @param {number} w Width of canvas
|
|
||||||
* @param {number} h Height of canvas
|
|
||||||
* @param {boolean} pixelated Turns canvas smoothening on or off
|
|
||||||
* @param {String} [parent="#board"] HTML id of element to push the canvas element too
|
|
||||||
*/
|
|
||||||
constructor(w, h, pixelated, parent = "#board") {
|
constructor(w, h, pixelated, parent = "#board") {
|
||||||
this.w = w;
|
this.w = w;
|
||||||
this.h = h;
|
this.h = h;
|
||||||
@ -28,10 +18,6 @@ class Game {
|
|||||||
this.scene = new Container();
|
this.scene = new Container();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Start game loop
|
|
||||||
* @param {Function} gameUpdate Function to run next to scene updates such as debug logging, etc.
|
|
||||||
*/
|
|
||||||
run(gameUpdate = () => { }) {
|
run(gameUpdate = () => { }) {
|
||||||
let dt = 0;
|
let dt = 0;
|
||||||
let last = 0;
|
let last = 0;
|
||||||
|
@ -1,11 +1,4 @@
|
|||||||
/**
|
|
||||||
* Sprite class
|
|
||||||
*/
|
|
||||||
class Sprite {
|
class Sprite {
|
||||||
/**
|
|
||||||
* Draw sprite on canvas
|
|
||||||
* @param {*} texture Sprite image
|
|
||||||
*/
|
|
||||||
constructor(texture) {
|
constructor(texture) {
|
||||||
this.texture = texture;
|
this.texture = texture;
|
||||||
this.pos = { x: 0, y: 0 };
|
this.pos = { x: 0, y: 0 };
|
||||||
|
@ -1,29 +1,9 @@
|
|||||||
|
|
||||||
/**
|
|
||||||
* SpriteSheetXML - Reads XML files to get texture data
|
|
||||||
*
|
|
||||||
* **XML format must be:**
|
|
||||||
*
|
|
||||||
* <TextureAlias imagePath="">
|
|
||||||
*
|
|
||||||
* <SubTexture x="" y="" width="" height=""></SubTexture>
|
|
||||||
* ...
|
|
||||||
* </TextureAlias>
|
|
||||||
*/
|
|
||||||
class SpriteSheetXML {
|
class SpriteSheetXML {
|
||||||
/**
|
|
||||||
* Set url of XML file
|
|
||||||
* @param {String} url Url to XML file
|
|
||||||
*/
|
|
||||||
constructor(url) {
|
constructor(url) {
|
||||||
this.array = [];
|
this.array = [];
|
||||||
this.fetchXMLtoArray(url);
|
this.fetchXMLtoArray(url);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Fetch XML file and put contents in a JS array
|
|
||||||
* @param {String} url Url to XML file
|
|
||||||
*/
|
|
||||||
fetchXMLtoArray(url) {
|
fetchXMLtoArray(url) {
|
||||||
var xhr = new XMLHttpRequest();
|
var xhr = new XMLHttpRequest();
|
||||||
xhr.open('GET', url, false);
|
xhr.open('GET', url, false);
|
||||||
@ -46,12 +26,6 @@ class SpriteSheetXML {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Find index of XML element with attribute == value
|
|
||||||
* @param {String} attribute XML element attribute
|
|
||||||
* @param {String} value Value of XML element attribute
|
|
||||||
* @returns {number} Index of XML element
|
|
||||||
*/
|
|
||||||
findIndex(attribute, value) {
|
findIndex(attribute, value) {
|
||||||
for (let index = 0; index < this.array.length; index++) {
|
for (let index = 0; index < this.array.length; index++) {
|
||||||
const element = this.array[index];
|
const element = this.array[index];
|
||||||
|
@ -1,12 +1,4 @@
|
|||||||
/**
|
|
||||||
* Text class
|
|
||||||
*/
|
|
||||||
class Text {
|
class Text {
|
||||||
/**
|
|
||||||
* Prints styled text on canvas
|
|
||||||
* @param {String} text Text to print
|
|
||||||
* @param {String} style Styles to apply to text
|
|
||||||
*/
|
|
||||||
constructor(text = "", style = {}) {
|
constructor(text = "", style = {}) {
|
||||||
this.pos = { x: 0, y: 0 };
|
this.pos = { x: 0, y: 0 };
|
||||||
this.text = text;
|
this.text = text;
|
||||||
|
@ -1,11 +1,4 @@
|
|||||||
/**
|
|
||||||
* Texture class
|
|
||||||
*/
|
|
||||||
class Texture {
|
class Texture {
|
||||||
/**
|
|
||||||
* Sets url of source image and creates an instance of Image()
|
|
||||||
* @param {*} url
|
|
||||||
*/
|
|
||||||
constructor(url) {
|
constructor(url) {
|
||||||
this.img = new Image();
|
this.img = new Image();
|
||||||
this.img.src = url;
|
this.img.src = url;
|
||||||
|
@ -1,19 +1,7 @@
|
|||||||
import Container from "./Container.js";
|
import Container from "./Container.js";
|
||||||
import TileSprite from "./TileSprite.js";
|
import TileSprite from "./TileSprite.js";
|
||||||
|
|
||||||
/**
|
|
||||||
* Tilemap class
|
|
||||||
*/
|
|
||||||
class TileMap extends Container {
|
class TileMap extends Container {
|
||||||
/**
|
|
||||||
* Draws array of tiles from unindexed spritesheet
|
|
||||||
* @param {[ { x: number, y: number} ]} tiles Array of x and y values of the source tile on an unindexed Spritesheet
|
|
||||||
* @param {number} mapW Amount of tiles over the width of the map
|
|
||||||
* @param {number} mapH Amount of tiles over the height of the map
|
|
||||||
* @param {number} tileW Width of source tile(s) in pixels
|
|
||||||
* @param {number} tileH Height of source tile(s) in pixels
|
|
||||||
* @param {*} texture Texture instance of source image file
|
|
||||||
*/
|
|
||||||
constructor(tiles, mapW, mapH, tileW, tileH, texture) {
|
constructor(tiles, mapW, mapH, tileW, tileH, texture) {
|
||||||
super();
|
super();
|
||||||
this.mapW = mapW;
|
this.mapW = mapW;
|
||||||
|
@ -1,18 +1,7 @@
|
|||||||
import Container from "./Container.js";
|
import Container from "./Container.js";
|
||||||
import TileSpriteXML from "./TileSpriteXML.js";
|
import TileSpriteXML from "./TileSpriteXML.js";
|
||||||
|
|
||||||
/**
|
|
||||||
* TileMapXML class
|
|
||||||
*/
|
|
||||||
class TileMapXML extends Container {
|
class TileMapXML extends Container {
|
||||||
/**
|
|
||||||
* Draws array of tiles from XML indexed spritesheet
|
|
||||||
* @param {number[]} tiles Array of XML indexes
|
|
||||||
* @param {*} mapW Amount of tiles over the width of the map
|
|
||||||
* @param {*} mapH Amount of tiles over the height of the map
|
|
||||||
* @param {*} texture Texture instance of source image file
|
|
||||||
* @param {*} xml SpriteSheetXML instance of source xml file
|
|
||||||
*/
|
|
||||||
constructor(tiles, mapW, mapH, texture, xml) {
|
constructor(tiles, mapW, mapH, texture, xml) {
|
||||||
super(texture);
|
super(texture);
|
||||||
this.mapW = mapW;
|
this.mapW = mapW;
|
||||||
|
@ -1,14 +1,6 @@
|
|||||||
import Sprite from "./Sprite.js";
|
import Sprite from "./Sprite.js";
|
||||||
/**
|
|
||||||
* TileSprite class
|
|
||||||
*/
|
|
||||||
class TileSprite extends Sprite {
|
class TileSprite extends Sprite {
|
||||||
/**
|
|
||||||
* Creates sprite instance from unindexed spritesheet
|
|
||||||
* @param {*} texture Instance of Texture with source image
|
|
||||||
* @param {number} w Width of sprite on source image
|
|
||||||
* @param {number} h Height of spirte on source image
|
|
||||||
*/
|
|
||||||
constructor(texture, w, h) {
|
constructor(texture, w, h) {
|
||||||
super(texture);
|
super(texture);
|
||||||
this.tileW = w;
|
this.tileW = w;
|
||||||
|
@ -1,15 +1,6 @@
|
|||||||
import Sprite from "./Sprite.js";
|
import Sprite from "./Sprite.js";
|
||||||
|
|
||||||
/**
|
|
||||||
* TileSpriteXML class
|
|
||||||
*/
|
|
||||||
class TileSpriteXML extends Sprite {
|
class TileSpriteXML extends Sprite {
|
||||||
/**
|
|
||||||
* Creates sprite instance from XML indexed spritesheet
|
|
||||||
* @param {*} texture Instance of Texture with source image
|
|
||||||
* @param {*} xml Instance of SpriteSheetXML with xml index
|
|
||||||
* @param {number} index Index of XML element
|
|
||||||
*/
|
|
||||||
constructor(texture, xml, index) {
|
constructor(texture, xml, index) {
|
||||||
super(texture);
|
super(texture);
|
||||||
var src = xml.array[index];
|
var src = xml.array[index];
|
||||||
|
@ -1,10 +1,6 @@
|
|||||||
/**
|
|
||||||
* KeyControls class
|
|
||||||
*/
|
|
||||||
class KeyControls {
|
class KeyControls {
|
||||||
/**
|
|
||||||
* Listens for keypresses and prevents default actions
|
|
||||||
*/
|
|
||||||
constructor() {
|
constructor() {
|
||||||
this.keys = {};
|
this.keys = {};
|
||||||
// Bind event handlers
|
// Bind event handlers
|
||||||
@ -19,21 +15,11 @@ class KeyControls {
|
|||||||
}, false);
|
}, false);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns value of action key (spacebar)
|
|
||||||
* @returns {boolean} Key value
|
|
||||||
*/
|
|
||||||
get action() {
|
get action() {
|
||||||
// Spacebar
|
// Spacebar
|
||||||
return this.keys[32];
|
return this.keys[32];
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns -1 on Arrow Left or A
|
|
||||||
*
|
|
||||||
* Returns 1 on Arrow Right or D
|
|
||||||
* @returns {number} Key Value
|
|
||||||
*/
|
|
||||||
get x() {
|
get x() {
|
||||||
// Arrow Left or A (WASD)
|
// Arrow Left or A (WASD)
|
||||||
if (this.keys[37] || this.keys[65]) {
|
if (this.keys[37] || this.keys[65]) {
|
||||||
@ -46,12 +32,6 @@ class KeyControls {
|
|||||||
return 0;
|
return 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns -1 on Arrow Up or W
|
|
||||||
*
|
|
||||||
* Returns 1 on Arrow Down or S
|
|
||||||
* @returns {number} Key value
|
|
||||||
*/
|
|
||||||
get y() {
|
get y() {
|
||||||
// Arrow Up or W (WASD)
|
// Arrow Up or W (WASD)
|
||||||
if (this.keys[38] || this.keys[87]) {
|
if (this.keys[38] || this.keys[87]) {
|
||||||
@ -64,12 +44,7 @@ class KeyControls {
|
|||||||
return 0;
|
return 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Read or write value of any key
|
|
||||||
* @param {number} key Keycode for targetted key
|
|
||||||
* @param {*} [value] Value to set to key
|
|
||||||
* @return {*} Value of key
|
|
||||||
*/
|
|
||||||
key(key, value) {
|
key(key, value) {
|
||||||
if (value !== undefined) {
|
if (value !== undefined) {
|
||||||
this.keys[key] = value;
|
this.keys[key] = value;
|
||||||
@ -77,9 +52,6 @@ class KeyControls {
|
|||||||
return this.keys[key];
|
return this.keys[key];
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Resets default value to all keys
|
|
||||||
*/
|
|
||||||
reset() {
|
reset() {
|
||||||
for (let key in this.keys) {
|
for (let key in this.keys) {
|
||||||
this.keys[key] = false;
|
this.keys[key] = false;
|
||||||
|
@ -1,11 +1,4 @@
|
|||||||
/**
|
|
||||||
* MouseControls class
|
|
||||||
*/
|
|
||||||
class MouseControls {
|
class MouseControls {
|
||||||
/**
|
|
||||||
* Sets container element where handlers will listen
|
|
||||||
* @param {*} [container] Container element, defaults to document.body
|
|
||||||
*/
|
|
||||||
constructor(container) {
|
constructor(container) {
|
||||||
this.el = container || document.body;
|
this.el = container || document.body;
|
||||||
// State
|
// State
|
||||||
@ -19,10 +12,6 @@ class MouseControls {
|
|||||||
document.addEventListener('mouseup', this.up.bind(this), false);
|
document.addEventListener('mouseup', this.up.bind(this), false);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Recalculates mouse position based on the position of the container
|
|
||||||
* @param {{ clientX: number, clientY: number}} param0 Native mouse event x and y values
|
|
||||||
*/
|
|
||||||
mousePosFromEvent({ clientX, clientY }) {
|
mousePosFromEvent({ clientX, clientY }) {
|
||||||
const { el, pos } = this;
|
const { el, pos } = this;
|
||||||
const rect = el.getBoundingClientRect();
|
const rect = el.getBoundingClientRect();
|
||||||
@ -32,36 +21,21 @@ class MouseControls {
|
|||||||
pos.y = (clientY - rect.top) * yr;
|
pos.y = (clientY - rect.top) * yr;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Calls mousePosFromEvent() on mouse move
|
|
||||||
* @param {*} e Event
|
|
||||||
*/
|
|
||||||
move(e) {
|
move(e) {
|
||||||
this.mousePosFromEvent(e);
|
this.mousePosFromEvent(e);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Handles mouseDown event and calls mousePosFromEvent() to determine the exact pixel
|
|
||||||
* @param {*} e Event
|
|
||||||
*/
|
|
||||||
down(e) {
|
down(e) {
|
||||||
this.isDown = true;
|
this.isDown = true;
|
||||||
this.pressed = true;
|
this.pressed = true;
|
||||||
this.mousePosFromEvent(e);
|
this.mousePosFromEvent(e);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Handles mouseUp event and calls mousePosFromEvent() to determine the exact pixel
|
|
||||||
* @param {*} e Event
|
|
||||||
*/
|
|
||||||
up() {
|
up() {
|
||||||
this.isDown = false;
|
this.isDown = false;
|
||||||
this.released = true;
|
this.released = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Resets pressed and released values to make sure they are only true on a press or release
|
|
||||||
*/
|
|
||||||
update() {
|
update() {
|
||||||
this.released = false;
|
this.released = false;
|
||||||
this.pressed = false;
|
this.pressed = false;
|
||||||
|
414
asdf/index.d.ts
vendored
Normal file
414
asdf/index.d.ts
vendored
Normal file
@ -0,0 +1,414 @@
|
|||||||
|
export as namespace asdf;
|
||||||
|
|
||||||
|
type Coordinates = {x: number, y: number};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TileSpriteXML class
|
||||||
|
*/
|
||||||
|
export class TileSpriteXML extends Sprite {
|
||||||
|
|
||||||
|
width: number;
|
||||||
|
height: number;
|
||||||
|
imgPos: Coordinates;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates sprite instance from XML indexed spritesheet
|
||||||
|
* @param texture Instance of Texture with source image
|
||||||
|
* @param xml Instance of SpriteSheetXML with xml index
|
||||||
|
* @param index Index of XML element
|
||||||
|
*/
|
||||||
|
constructor(texture: Texture, xml: SpriteSheetXML, index: number);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TileMapXML class
|
||||||
|
*/
|
||||||
|
export class TileMapXML extends Container<TileSpriteXML> {
|
||||||
|
|
||||||
|
mapW: number;
|
||||||
|
mapH: number;
|
||||||
|
tileW: number;
|
||||||
|
tileH: number;
|
||||||
|
w: number;
|
||||||
|
h: number;
|
||||||
|
|
||||||
|
children: TileSpriteXML[];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Draws array of tiles from XML indexed spritesheet
|
||||||
|
* @param tiles Array of XML indexes
|
||||||
|
* @param mapW Amount of tiles over the width of the map
|
||||||
|
* @param mapH Amount of tiles over the height of the map
|
||||||
|
* @param texture Texture instance of source image file
|
||||||
|
* @param xml SpriteSheetXML instance of source xml file
|
||||||
|
*/
|
||||||
|
constructor(tiles: number[], mapW: number, mapH: number, texture: Texture, xml: SpriteSheetXML)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TileSprite class
|
||||||
|
*/
|
||||||
|
export class TileSprite extends Sprite {
|
||||||
|
|
||||||
|
tileW: number;
|
||||||
|
tileH: number;
|
||||||
|
frame: Coordinates;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates sprite instance from unindexed spritesheet
|
||||||
|
* @param texture Instance of Texture with source image
|
||||||
|
* @param w Width of sprite on source image
|
||||||
|
* @param h Height of spirte on source image
|
||||||
|
*/
|
||||||
|
constructor(texture: Texture, w: number, h: number);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Tilemap class
|
||||||
|
*/
|
||||||
|
export class TileMap extends Container<TileSprite> {
|
||||||
|
|
||||||
|
mapW: number;
|
||||||
|
mapH: number;
|
||||||
|
tileW: number;
|
||||||
|
tileH: number;
|
||||||
|
w: number;
|
||||||
|
h: number;
|
||||||
|
|
||||||
|
children: TileSprite[];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Draws array of tiles from unindexed spritesheet
|
||||||
|
* @param tiles Array of x and y values of the source tile on an unindexed Spritesheet
|
||||||
|
* @param mapW Amount of tiles over the width of the map
|
||||||
|
* @param mapH Amount of tiles over the height of the map
|
||||||
|
* @param tileW Width of source tile(s) in pixels
|
||||||
|
* @param tileH Height of source tile(s) in pixels
|
||||||
|
* @param texture Texture instance of source image file
|
||||||
|
*/
|
||||||
|
constructor(tiles: Coordinates[], mapW: number, mapH: number, tileW: number, tileH: number, texture: Texture);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Texture class
|
||||||
|
*/
|
||||||
|
export class Texture {
|
||||||
|
|
||||||
|
img: HTMLImageElement;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sets url of source image and creates an instance of Image()
|
||||||
|
* @param url
|
||||||
|
*/
|
||||||
|
constructor(url: string);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Text class
|
||||||
|
*/
|
||||||
|
export class Text {
|
||||||
|
|
||||||
|
pos: Coordinates;
|
||||||
|
text: string;
|
||||||
|
visible: boolean;
|
||||||
|
update?: (dt?: number, t?: number) => void;
|
||||||
|
style: {
|
||||||
|
font?: string,
|
||||||
|
fill?: string | CanvasGradient | CanvasPattern,
|
||||||
|
align?: CanvasTextAlign
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Prints styled text on canvas
|
||||||
|
* @param text Text to print
|
||||||
|
* @param style Styles to apply to text
|
||||||
|
*/
|
||||||
|
constructor(text: string, style: {});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* SpriteSheetXML - Reads XML files to get texture data
|
||||||
|
*
|
||||||
|
* **XML format must be:**
|
||||||
|
*
|
||||||
|
* <TextureAlias imagePath="">
|
||||||
|
*
|
||||||
|
* <SubTexture x="" y="" width="" height=""></SubTexture>
|
||||||
|
* ...
|
||||||
|
* </TextureAlias>
|
||||||
|
*/
|
||||||
|
export class SpriteSheetXML {
|
||||||
|
|
||||||
|
array: {
|
||||||
|
name: string,
|
||||||
|
x: number,
|
||||||
|
y: number,
|
||||||
|
width: number,
|
||||||
|
height: number
|
||||||
|
}[];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set url of XML file
|
||||||
|
* @param url Url to XML file
|
||||||
|
*/
|
||||||
|
constructor(url: string);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Fetch XML file and put contents in a JS array
|
||||||
|
* @param url Url to XML file
|
||||||
|
*/
|
||||||
|
fetchXMLtoArray(url: string): void;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Find index of XML element with attribute == value
|
||||||
|
* @param attribute XML element attribute
|
||||||
|
* @param value Value of XML element attribute
|
||||||
|
* @returns Index of XML element
|
||||||
|
*/
|
||||||
|
findIndex(attribute: string, value: string): number;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sprite class
|
||||||
|
*/
|
||||||
|
export class Sprite {
|
||||||
|
texture: Texture;
|
||||||
|
pos: Coordinates;
|
||||||
|
anchor: Coordinates;
|
||||||
|
scale: Coordinates;
|
||||||
|
pivot: Coordinates;
|
||||||
|
visible: boolean;
|
||||||
|
rotation: number;
|
||||||
|
dead: boolean;
|
||||||
|
|
||||||
|
update?: (dt?: number, t?: number) => void;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Draw sprite on canvas
|
||||||
|
* @param texture Sprite image
|
||||||
|
*/
|
||||||
|
constructor(texture: Texture);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Game class
|
||||||
|
*/
|
||||||
|
export class Game {
|
||||||
|
w: number;
|
||||||
|
h: number;
|
||||||
|
renderer: CanvasRenderer;
|
||||||
|
scene: Container<unknown>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set the games parameters
|
||||||
|
* @param w Width of canvas
|
||||||
|
* @param h Height of canvas
|
||||||
|
* @param pixelated Turns canvas smoothening on or off
|
||||||
|
* @param parent HTML id of element to push the canvas element too. Default is set to "#board".
|
||||||
|
*/
|
||||||
|
constructor(w: number, h: number, pixelated: boolean, parent?: string);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Start game loop
|
||||||
|
* @param gameUpdate Function to run next to scene updates such as debug logging, etc.
|
||||||
|
*/
|
||||||
|
run(gameUpdate: (dt?: number, t?: number) => void): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Container class
|
||||||
|
*/
|
||||||
|
export class Container<T> {
|
||||||
|
pos: {x: number, y: number};
|
||||||
|
children: T[];
|
||||||
|
|
||||||
|
constructor();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Adds child to container
|
||||||
|
* @param child Child to add
|
||||||
|
* @returns Added child
|
||||||
|
*/
|
||||||
|
add(child: T): T;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Removes child from container
|
||||||
|
* @param child Child to remove
|
||||||
|
* @returns Removed child
|
||||||
|
*/
|
||||||
|
remove(child: T): T;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Preforms a function on all children
|
||||||
|
* @param f Function to preform on children
|
||||||
|
* @returns Function altered array
|
||||||
|
*/
|
||||||
|
map(f: (value: T, index: number, array: T[]) => any): any[];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Updates all children when called
|
||||||
|
* @param dt Delta time
|
||||||
|
* @param t Total time
|
||||||
|
* @returns Returns if the child is dead or not
|
||||||
|
*/
|
||||||
|
update(dt: number, t: number): boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* MouseControls class
|
||||||
|
*/
|
||||||
|
export class MouseControls {
|
||||||
|
|
||||||
|
el: HTMLElement;
|
||||||
|
pos: Coordinates;
|
||||||
|
isDown: boolean;
|
||||||
|
pressed: boolean;
|
||||||
|
released: boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sets container element where handlers will listen
|
||||||
|
* @param container Container element, defaults to document.body
|
||||||
|
*/
|
||||||
|
constructor(container?: HTMLElement);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Recalculates mouse position based on the position of the container
|
||||||
|
* @param ClientXandY Native mouse event x and y values
|
||||||
|
*/
|
||||||
|
mousePosFromEvent({clientX, clientY}: {clientX: number, clientY: number}): void;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Calls mousePosFromEvent() on mouse move
|
||||||
|
* @param e Event
|
||||||
|
*/
|
||||||
|
move(e: MouseEvent): void;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handles mouseDown event and calls mousePosFromEvent() to determine the exact pixel
|
||||||
|
* @param e Event
|
||||||
|
*/
|
||||||
|
down(e: MouseEvent): void;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handles mouseUp event and calls mousePosFromEvent() to determine the exact pixel
|
||||||
|
* @param e Event
|
||||||
|
*/
|
||||||
|
up(e: MouseEvent): void;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Resets pressed and released values to make sure they are only true on a press or release
|
||||||
|
*/
|
||||||
|
update(): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* KeyControls class
|
||||||
|
*/
|
||||||
|
export class KeyControls {
|
||||||
|
|
||||||
|
keys: {
|
||||||
|
[key: number]: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Listens for keypresses and prevents default actions
|
||||||
|
*/
|
||||||
|
constructor();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns value of action key (spacebar)
|
||||||
|
* @returns Key value
|
||||||
|
*/
|
||||||
|
get action(): boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns -1 on Arrow Left or A
|
||||||
|
*
|
||||||
|
* Returns 1 on Arrow Right or D
|
||||||
|
* @returns Key Value
|
||||||
|
*/
|
||||||
|
get x(): -1 | 0 | 1
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns -1 on Arrow Up or W
|
||||||
|
*
|
||||||
|
* Returns 1 on Arrow Down or S
|
||||||
|
* @returns Key value
|
||||||
|
*/
|
||||||
|
get y(): -1 | 0 | 1
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Read or write value of any key
|
||||||
|
* @param key Keycode for targetted key
|
||||||
|
* @param value Value to set to key
|
||||||
|
* @return Value of key
|
||||||
|
*/
|
||||||
|
key(key: number, value: boolean): boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Resets default value to all keys
|
||||||
|
*/
|
||||||
|
reset(): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* CanvasRenderer class
|
||||||
|
*/
|
||||||
|
export class CanvasRenderer {
|
||||||
|
|
||||||
|
w: number;
|
||||||
|
h: number;
|
||||||
|
view: HTMLCanvasElement;
|
||||||
|
ctx: CanvasRenderingContext2D
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Renderer for CanvasJS, defines width and height for the canvas element
|
||||||
|
* @param w Width for canvas element
|
||||||
|
* @param h Height for canvas element
|
||||||
|
*/
|
||||||
|
constructor(w: number, h: number)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Turns off image smoothening on the canvas element
|
||||||
|
*/
|
||||||
|
setPixelated(): void
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render all children on the canvas element
|
||||||
|
* @param container Containing element of the canvas element
|
||||||
|
* @param clear Defines if the canvas element needs to be cleared for the next render. Default is set to true.
|
||||||
|
*/
|
||||||
|
render(container: Container<unknown>, clear?: boolean): void
|
||||||
|
}
|
||||||
|
|
||||||
|
export namespace math {
|
||||||
|
/**
|
||||||
|
* Returns random integer between min and max
|
||||||
|
* @param min Minimum value
|
||||||
|
* @param max Maximum value
|
||||||
|
* @returns Random integer
|
||||||
|
*/
|
||||||
|
export function rand(min: number, max: number): number;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns random float between min and max
|
||||||
|
* @param min Minimum value
|
||||||
|
* @param max Maximum value
|
||||||
|
* @returns Random value
|
||||||
|
*/
|
||||||
|
export function randf(min: number, max: number): number;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns random item from items array
|
||||||
|
* @param items Array of anything
|
||||||
|
* @returns Item from items array
|
||||||
|
*/
|
||||||
|
export function randOneFrom<T>(items: T[]): T;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns true one out of max times
|
||||||
|
* @param max Maximum value. Default is set to 2
|
||||||
|
* @returns Outcome
|
||||||
|
*/
|
||||||
|
export function randOneIn(max?: number): boolean;
|
||||||
|
}
|
@ -1,12 +1,6 @@
|
|||||||
/**
|
|
||||||
* CanvasRenderer class
|
|
||||||
*/
|
|
||||||
class CanvasRenderer {
|
class CanvasRenderer {
|
||||||
/**
|
|
||||||
* Renderer for CanvasJS, defines width and height for the canvas element
|
|
||||||
* @param {*} w Width for canvas element
|
|
||||||
* @param {*} h Height for canvas element
|
|
||||||
*/
|
|
||||||
constructor(w, h) {
|
constructor(w, h) {
|
||||||
const canvas = document.createElement("canvas");
|
const canvas = document.createElement("canvas");
|
||||||
this.w = canvas.width = w;
|
this.w = canvas.width = w;
|
||||||
@ -16,9 +10,6 @@ class CanvasRenderer {
|
|||||||
this.ctx.textBaseLine = "top";
|
this.ctx.textBaseLine = "top";
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Turns off image smoothening on the canvas element
|
|
||||||
*/
|
|
||||||
setPixelated() {
|
setPixelated() {
|
||||||
this.ctx['imageSmoothingEnabled'] = false; /* standard */
|
this.ctx['imageSmoothingEnabled'] = false; /* standard */
|
||||||
this.ctx['mozImageSmoothingEnabled'] = false; /* Firefox */
|
this.ctx['mozImageSmoothingEnabled'] = false; /* Firefox */
|
||||||
@ -27,12 +18,6 @@ class CanvasRenderer {
|
|||||||
this.ctx['msImageSmoothingEnabled'] = false; /* IE */
|
this.ctx['msImageSmoothingEnabled'] = false; /* IE */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Render all children on the canvas element
|
|
||||||
* @param {*} container Containing element of the canvas element
|
|
||||||
* @param {boolean} [clear=true] Defines if the canvas element needs to be cleared for the next render
|
|
||||||
*/
|
|
||||||
render(container, clear = true) {
|
render(container, clear = true) {
|
||||||
const { ctx } = this;
|
const { ctx } = this;
|
||||||
function renderRec(container) {
|
function renderRec(container) {
|
||||||
|
@ -1,19 +1,7 @@
|
|||||||
/**
|
|
||||||
* Returns random integer between min and max
|
|
||||||
* @param {number} min Minimum value
|
|
||||||
* @param {number} max Maximum value
|
|
||||||
* @returns {number} Random integer
|
|
||||||
*/
|
|
||||||
function rand(min, max) {
|
function rand(min, max) {
|
||||||
return Math.floor(randf(min, max));
|
return Math.floor(randf(min, max));
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns random float between min and max
|
|
||||||
* @param {number} min Minimum value
|
|
||||||
* @param {number} max Maximum value
|
|
||||||
* @returns {number} Random value
|
|
||||||
*/
|
|
||||||
function randf(min, max) {
|
function randf(min, max) {
|
||||||
if (max == null) {
|
if (max == null) {
|
||||||
max = min || 1;
|
max = min || 1;
|
||||||
@ -22,20 +10,10 @@ function randf(min, max) {
|
|||||||
return Math.random() * (max - min) + min;
|
return Math.random() * (max - min) + min;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns random item from items array
|
|
||||||
* @param {*[]} items Array of anything
|
|
||||||
* @returns {any} Item from items array
|
|
||||||
*/
|
|
||||||
function randOneFrom(items) {
|
function randOneFrom(items) {
|
||||||
return items[rand(items.length)];
|
return items[rand(items.length)];
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns true one out of max times
|
|
||||||
* @param {number} [max=2] Maximum value
|
|
||||||
* @returns {boolean} Outcome
|
|
||||||
*/
|
|
||||||
function randOneIn(max = 2) {
|
function randOneIn(max = 2) {
|
||||||
return rand(0, max) === 0;
|
return rand(0, max) === 0;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user