deck

The game is drawn using two canvas both positioned absolutely.

Moving background is done with the help of .translate() method and a time delta multiplier in order to draw exactly the same amount of pixels in a time unit.

Sprite maps are commonly used for animation and entities images representation

So does the terrain texture, however in this case .createPattern() method does the main trick.

Perhaps one of the trickiest pieces of code for me - animation for an entity itself, where drawing image context "jumps" through sprite map either recursively or not.

renderSelf (ctx) {
		let now = Date.now();
		let frame;

		let ind = Math.floor(this.index);

		let length = this.frames.length;

		frame = this.frames[ind % length];

		if(this.once && ind >= length) {
			this.done = true;
			return;
		}

		let x = frame * this.position[0];
		let y = this.position[1];

		ctx.drawImage(this.sprite, x, this.axisShift,
					this.size[0], this.size[1],
					this.position[0], this.position[1],
					this.size[0], this.size[1]);
}

The game is initiated when all the loadable resources are loaded and cached with the promise awaiting for the .onload() event resolver to start.

let mainEntities = [resources.load('images/player.png'), 
                    resources.load('images/terrain.png'), 
                    resources.load('images/foe.png'),
                    resources.load('images/logo.png')];

let promise = new Promise((resolve,reject)=>{
	mainEntities.forEach((a)=>{
		a.onload = ()=>resolve('ok');
	})
})

// starting our game when all the resources have been loaded
promise.then(res=>comeOn())
		.catch(reject=>console.log(reject));

So as they say in WoT:

Let's battle!

Made with Slides.com