game: offline: support mobile
This commit is contained in:
parent
a6c27fc87a
commit
0bc5d275d9
@ -46,10 +46,44 @@ export default class extends AbstractView {
|
||||
}
|
||||
}
|
||||
|
||||
createButton()
|
||||
{
|
||||
this.up1 = document.createElement("button");
|
||||
this.down1 = document.createElement("button");
|
||||
this.up2 = document.createElement("button");
|
||||
this.down2 = document.createElement("button");
|
||||
|
||||
this.up1.setAttribute("user_id", 1);
|
||||
this.up1.setAttribute("direction", "up");
|
||||
this.up2.setAttribute("user_id", 2);
|
||||
this.up2.setAttribute("direction", "up");
|
||||
|
||||
this.down1.setAttribute("user_id", 1);
|
||||
this.down1.setAttribute("direction", "down");
|
||||
this.down2.setAttribute("user_id", 2);
|
||||
this.down2.setAttribute("direction", "down");
|
||||
|
||||
[this.up1, this.up2, this.down1, this.down2].forEach(button => {
|
||||
button.onmousedown = this.game.keyDownHandler.bind(this.game);
|
||||
button.onmouseup = this.game.keyUpHandler.bind(this.game);
|
||||
});
|
||||
|
||||
document.getElementById("app").append(this.up1, this.down1, this.up2, this.down2);
|
||||
|
||||
}
|
||||
|
||||
destroyButton()
|
||||
{
|
||||
[this.up1, this.up2, this.down1, this.down2].forEach(button => {
|
||||
button.remove();
|
||||
});
|
||||
}
|
||||
|
||||
startGame() {
|
||||
if (this.game == null) {
|
||||
document.getElementById('startGameButton').innerHTML = 'Reset Game';
|
||||
this.game = new Game(this.player1, this.player2);
|
||||
this.createButton();
|
||||
}
|
||||
else {
|
||||
document.getElementById('app').removeChild(this.game.canvas);
|
||||
@ -66,6 +100,7 @@ export default class extends AbstractView {
|
||||
document.getElementById('app').removeChild(this.game.scoresDisplay);
|
||||
this.game.cleanup();
|
||||
this.game = null;
|
||||
this.destroyButton();
|
||||
document.getElementById('startGameButton').innerHTML = 'Start Game';
|
||||
}
|
||||
}
|
||||
@ -127,7 +162,6 @@ class Game {
|
||||
document.addEventListener('keydown', this.keyDownHandler);
|
||||
document.addEventListener('keyup', this.keyUpHandler);
|
||||
|
||||
console.log(this);
|
||||
}
|
||||
|
||||
cleanup() {
|
||||
@ -143,17 +177,17 @@ class Game {
|
||||
|
||||
updateGame() {
|
||||
//Paddle movement
|
||||
if (this.keys.includes('s') &&
|
||||
if ((this.keys.includes('s') || this.keys.includes('down1')) &&
|
||||
this.players[0].paddle.y + this.def.PADDLEHEIGHT < this.def.CANVASHEIGHT - this.def.PADDLEMARGIN)
|
||||
this.players[0].paddle.y += this.def.PADDLESPEED;
|
||||
if (this.keys.includes('w') &&
|
||||
if ((this.keys.includes('2') || this.keys.includes('up1')) &&
|
||||
this.players[0].paddle.y > 0 + this.def.PADDLEMARGIN)
|
||||
this.players[0].paddle.y -= this.def.PADDLESPEED;
|
||||
|
||||
if (this.keys.includes('ArrowDown') &&
|
||||
if ((this.keys.includes('ArrowDown') || this.keys.includes('down2')) &&
|
||||
this.players[1].paddle.y + this.def.PADDLEHEIGHT < this.def.CANVASHEIGHT - this.def.PADDLEMARGIN)
|
||||
this.players[1].paddle.y += this.def.PADDLESPEED;
|
||||
if (this.keys.includes('ArrowUp') &&
|
||||
if ((this.keys.includes('ArrowUp') || this.keys.includes('up2')) &&
|
||||
this.players[1].paddle.y > 0 + this.def.PADDLEMARGIN)
|
||||
this.players[1].paddle.y -= this.def.PADDLESPEED;
|
||||
|
||||
@ -186,7 +220,6 @@ class Game {
|
||||
}
|
||||
|
||||
updateScore(p1Score, p2Score) {
|
||||
console.log(this);
|
||||
if (p1Score > this.def.MAXSCORE) {
|
||||
this.scoresDisplay.innerHTML = this.player1 + ' wins!! GGS';
|
||||
this.cleanup();
|
||||
@ -225,14 +258,24 @@ class Game {
|
||||
}
|
||||
|
||||
keyUpHandler(ev) {
|
||||
const idx = this.keys.indexOf(ev.key);
|
||||
let attributes = ev.originalTarget.attributes;
|
||||
|
||||
let key = ev.key === undefined ? `${attributes.direction.value}${attributes.user_id.value}` : ev.key;
|
||||
|
||||
const idx = this.keys.indexOf(key);
|
||||
if (idx != -1)
|
||||
this.keys.splice(idx, 1);
|
||||
}
|
||||
|
||||
keyDownHandler(ev) {
|
||||
if (!this.keys.includes(ev.key))
|
||||
this.keys.push(ev.key);
|
||||
|
||||
let attributes = ev.originalTarget.attributes;
|
||||
|
||||
let key = ev.key === undefined ? `${attributes.direction.value}${attributes.user_id.value}` : ev.key;
|
||||
|
||||
|
||||
if (!this.keys.includes(key))
|
||||
this.keys.push(key);
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user