game: moving paddle :)

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 {