diff --git a/frontend/static/js/views/Game.js b/frontend/static/js/views/Game.js index 312c405..62b8e80 100644 --- a/frontend/static/js/views/Game.js +++ b/frontend/static/js/views/Game.js @@ -3,6 +3,7 @@ import AbstractView from './AbstractView.js' export default class extends AbstractView { constructor(params) { super(params, 'Game'); + this.game = null; } async getHtml() { @@ -17,7 +18,8 @@ export default class extends AbstractView { } startGame() { - this.game = new Game; + if (this.game == null) + this.game = new Game; } } @@ -29,10 +31,15 @@ class Game { this.canvas.style.border = '1px solid #d3d3d3'; this.canvas.style.backgroundColor = '#f1f1f1'; this.context = this.canvas.getContext('2d'); + this.paddle = new Paddle(this.context); document.getElementById('app').appendChild(this.canvas); - this.interval = setInterval(this.updateGame, 20); + this.interval = setInterval(this.updateGame.bind(this), 10); + + this.keys = []; + document.addEventListener('keydown', this.keyDownHandler.bind(this)); + document.addEventListener('keyup', this.keyUpHandler.bind(this)); } clear() { @@ -40,10 +47,25 @@ class Game { } updateGame() { + if (this.keys.includes('s')) + this.paddle.y += 3; + if (this.keys.includes('w')) + this.paddle.y -= 3; + this.clear(); - this.paddle.y += 1; this.paddle.update(); } + + keyUpHandler(ev) { + const idx = this.keys.indexOf(ev.key); + if (idx != -1) + this.keys.splice(idx, 1); + } + + keyDownHandler(ev) { + if (this.keys.indexOf(ev.key) == -1) + this.keys.push(ev.key); + } } class Paddle {