Added sprites to the bricks and touch control
This commit is contained in:
BIN
assets/imgs/b31.png
Normal file
BIN
assets/imgs/b31.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
assets/imgs/b32.png
Normal file
BIN
assets/imgs/b32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
assets/imgs/b33.png
Normal file
BIN
assets/imgs/b33.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
assets/imgs/bg01.jpg
Normal file
BIN
assets/imgs/bg01.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 360 KiB |
@ -8,7 +8,9 @@ class Board {
|
||||
this.y = ctx.canvas.height / 2 - 48;
|
||||
|
||||
this.w = this.ctx.canvas.width;
|
||||
this.h = this.ctx.canvas.height
|
||||
this.h = this.ctx.canvas.height;
|
||||
|
||||
this.img = resources.get('bg01');
|
||||
}
|
||||
|
||||
run() {
|
||||
@ -45,7 +47,8 @@ class Board {
|
||||
loop() {
|
||||
if (this.stop) return;
|
||||
|
||||
this.ctx.clearRect(0, 0, this.w, this.h);
|
||||
// this.ctx.clearRect(0, 0, this.w, this.h);
|
||||
this.ctx.drawImage(this.img, 0, 0);
|
||||
this.update();
|
||||
this.requestID = requestAnimationFrame( ()=>this.loop() );
|
||||
}
|
||||
|
||||
@ -7,15 +7,16 @@ class Brick {
|
||||
this.vspace = 2;
|
||||
this.hspace = 2;
|
||||
|
||||
this.w = (360 / 8) - this.hspace;
|
||||
this.h = (20) - this.vspace;
|
||||
this.x = (this.w + this.hspace) * column;
|
||||
this.w = (32) - this.hspace;
|
||||
this.h = (32) - this.vspace;
|
||||
this.x = 2 + (this.w + this.hspace) * column;
|
||||
this.y = 80 + (this.h + this.vspace) * row;
|
||||
|
||||
this.img = [];
|
||||
switch (type) {
|
||||
case 2: this.lives = 2; break;
|
||||
case 3: this.lives = 3; break;
|
||||
default: this.lives = 1; break;
|
||||
case 2: this.lives = 2; this.img = [ resources.get('b31'),resources.get('b32') ]; break;
|
||||
case 3: this.lives = 3; this.img = [ resources.get('b31'),resources.get('b32'), resources.get('b33') ]; break;
|
||||
default: this.lives = 1; this.img = [ resources.get('b31') ]; break;
|
||||
}
|
||||
}
|
||||
|
||||
@ -28,16 +29,13 @@ class Brick {
|
||||
|
||||
switch (this.lives) {
|
||||
case 1:
|
||||
ctx.fillStyle = 'blue';
|
||||
ctx.fillRect(this.x + 1, this.y, this.w, this.h);
|
||||
ctx.drawImage(this.img[0], this.x + 1, this.y);
|
||||
break;
|
||||
case 2:
|
||||
ctx.fillStyle = 'orange';
|
||||
ctx.fillRect(this.x + 1, this.y, this.w, this.h);
|
||||
ctx.drawImage(this.img[1], this.x + 1, this.y);
|
||||
break;
|
||||
case 3:
|
||||
ctx.fillStyle = 'red';
|
||||
ctx.fillRect(this.x + 1, this.y, this.w, this.h);
|
||||
ctx.drawImage(this.img[2], this.x + 1, this.y);
|
||||
break;
|
||||
}
|
||||
return true;
|
||||
|
||||
@ -5,6 +5,11 @@ class Keyboard {
|
||||
|
||||
window.addEventListener('keydown', e => this.onKeydown(e));
|
||||
window.addEventListener('keyup', e => this.onKeyup(e));
|
||||
|
||||
window.addEventListener('touchstart', e => this.onTouchStart(e));
|
||||
window.addEventListener('touchmove', e => this.onTouchMove(e));
|
||||
window.addEventListener('touchend', e => this.onTouchEnd(e));
|
||||
|
||||
}
|
||||
|
||||
setKeydown(fn) {
|
||||
@ -21,4 +26,47 @@ class Keyboard {
|
||||
onKeyup(event) {
|
||||
delete this._pressed[event.code];
|
||||
}
|
||||
|
||||
|
||||
onTouchStart(e) {
|
||||
var touchobj = e.changedTouches[0] // reference first touch point (ie: first finger)
|
||||
this.touchX = parseInt(touchobj.clientX) // get x position of touch point relative to left edge of browser
|
||||
this.touchY = parseInt(touchobj.clientY) // get x position of touch point relative to left edge of browser
|
||||
window.dispatchEvent(new KeyboardEvent('keydown',{'code':'Space'}));
|
||||
window.dispatchEvent(new KeyboardEvent('keydown',{'code':'KeyN'}));
|
||||
e.preventDefault()
|
||||
}
|
||||
onTouchMove(e) {
|
||||
var touchobj = e.changedTouches[0] // reference first touch point for this event
|
||||
var dist = parseInt(touchobj.clientX) - this.touchX
|
||||
if (dist>0) {
|
||||
delete this._pressed['ArrowLeft'];
|
||||
this._pressed['ArrowRight'] = true;
|
||||
} else if (dist<0) {
|
||||
delete this._pressed['ArrowRight'];
|
||||
this._pressed['ArrowLeft'] = true;
|
||||
} else {
|
||||
delete this._pressed['ArrowLeft'];
|
||||
delete this._pressed['ArrowRight'];
|
||||
}
|
||||
|
||||
dist = parseInt(touchobj.clientY) - this.touchY
|
||||
if (dist>0) {
|
||||
delete this._pressed['ArrowUp'];
|
||||
this._pressed['ArrowDown'] = true;
|
||||
} else if (dist<0) {
|
||||
delete this._pressed['ArrowDown'];
|
||||
this._pressed['ArrowUp'] = true;
|
||||
} else {
|
||||
delete this._pressed['ArrowUp'];
|
||||
delete this._pressed['ArrowDown'];
|
||||
}
|
||||
|
||||
e.preventDefault()
|
||||
}
|
||||
onTouchEnd(e) {
|
||||
this._pressed = {};
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@ -4,28 +4,28 @@ class Levels {
|
||||
switch (+lvl) {
|
||||
case 1:
|
||||
map = [].concat(
|
||||
this.row(0, [1, 0, 1, 0, 0, 1, 0, 1]),
|
||||
this.row(1, [1, 1, 1, 1, 1, 1, 1, 1]),
|
||||
this.row(3, [0, 1, 1, 1, 1, 1, 1, 0]),
|
||||
this.row(4, [1, 1, 1, 1, 1, 1, 1, 1])
|
||||
this.row(0, [0, 0, 1, 0, 1, 0, 0, 1, 0, 1]),
|
||||
this.row(1, [0, 0, 1, 1, 1, 1, 1, 1, 1, 1]),
|
||||
this.row(3, [0, 0, 0, 1, 1, 1, 1, 1, 1, 0]),
|
||||
this.row(4, [0, 0, 1, 1, 1, 1, 1, 1, 1, 1])
|
||||
);
|
||||
break;
|
||||
case 2:
|
||||
map = [].concat(
|
||||
this.row(0, [3, 3, 3, 0, 3, 3, 0, 0]),
|
||||
this.row(1, [0, 0, 3, 0, 3, 0, 3, 0]),
|
||||
this.row(2, [0, 0, 3, 0, 3, 0, 3, 0]),
|
||||
this.row(3, [3, 0, 3, 0, 3, 0, 3, 0]),
|
||||
this.row(4, [0, 3, 3, 0, 3, 3, 0, 0])
|
||||
this.row(0, [0, 0, 3, 3, 3, 0, 3, 3, 0, 0]),
|
||||
this.row(1, [0, 0, 0, 0, 3, 0, 3, 0, 3, 0]),
|
||||
this.row(2, [0, 0, 0, 0, 3, 0, 3, 0, 3, 0]),
|
||||
this.row(3, [0, 0, 3, 0, 3, 0, 3, 0, 3, 0]),
|
||||
this.row(4, [0, 0, 0, 3, 3, 0, 3, 3, 0, 0])
|
||||
);
|
||||
break;
|
||||
default:
|
||||
map = [].concat(
|
||||
this.row(0, [1, 3, 1, 3, 1, 3, 1, 3]),
|
||||
this.row(1, [3, 1, 3, 1, 3, 1, 3, 1]),
|
||||
this.row(2, [1, 3, 1, 3, 1, 3, 1, 3]),
|
||||
this.row(3, [3, 1, 3, 1, 3, 1, 3, 1]),
|
||||
this.row(4, [1, 3, 1, 3, 1, 3, 1, 3])
|
||||
this.row(0, [2, 1, 3, 1, 3, 1, 3, 1, 3, 1, 2]),
|
||||
this.row(1, [2, 3, 1, 3, 1, 3, 1, 3, 1, 3, 2]),
|
||||
this.row(2, [2, 1, 3, 1, 3, 1, 3, 1, 3, 1, 2]),
|
||||
this.row(3, [2, 3, 1, 3, 1, 3, 1, 3, 1, 3, 2]),
|
||||
this.row(4, [2, 1, 3, 1, 3, 1, 3, 1, 3, 1, 2])
|
||||
);
|
||||
break;
|
||||
}
|
||||
|
||||
@ -4,12 +4,16 @@ class Resources {
|
||||
this.loading = 0;
|
||||
this.resources = {};
|
||||
|
||||
this.load('bg01', 'jpg');
|
||||
this.load('ball');
|
||||
this.load('bar');
|
||||
this.load('b31');
|
||||
this.load('b32');
|
||||
this.load('b33');
|
||||
}
|
||||
|
||||
|
||||
load(res) {
|
||||
load(res, ext='png') {
|
||||
let _this = this;
|
||||
this.total++;
|
||||
this.loading++;
|
||||
@ -17,7 +21,7 @@ class Resources {
|
||||
this.resources[res].onload = function () {
|
||||
_this.loading--;
|
||||
}
|
||||
this.resources[res].src = 'assets/imgs/' + res + '.png';
|
||||
this.resources[res].src = 'assets/imgs/' + res + '.'+ext;
|
||||
}
|
||||
|
||||
get(res) {
|
||||
|
||||
Reference in New Issue
Block a user