64 lines
1.2 KiB
JavaScript
64 lines
1.2 KiB
JavaScript
|
import AbstractView from './AbstractView.js'
|
||
|
|
|
||
|
|
export default class extends AbstractView {
|
||
|
|
constructor(params) {
|
||
|
|
super(params, 'Game');
|
||
|
|
}
|
||
|
|
|
||
|
|
async getHtml() {
|
||
|
|
return `
|
||
|
|
<h1>Game</h1>
|
||
|
|
<button id='startGameButton'>Start Game</button>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
|
||
|
|
async postInit() {
|
||
|
|
document.getElementById('startGameButton').onclick = this.startGame;
|
||
|
|
}
|
||
|
|
|
||
|
|
startGame() {
|
||
|
|
this.game = new Game;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
class Game {
|
||
|
|
constructor() {
|
||
|
|
this.canvas = document.createElement('canvas');
|
||
|
|
this.canvas.width = 480;
|
||
|
|
this.canvas.height = 270;
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
|
||
|
|
clear() {
|
||
|
|
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||
|
|
}
|
||
|
|
|
||
|
|
updateGame() {
|
||
|
|
this.clear();
|
||
|
|
this.paddle.y += 1;
|
||
|
|
this.paddle.update();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
class Paddle {
|
||
|
|
constructor(context) {
|
||
|
|
this.width = 10;
|
||
|
|
this.height = 70;
|
||
|
|
this.x = 5;
|
||
|
|
this.y = 100;
|
||
|
|
this.ctx = context;
|
||
|
|
this.update();
|
||
|
|
}
|
||
|
|
|
||
|
|
update() {
|
||
|
|
this.ctx.fillStyle = 'black';
|
||
|
|
this.ctx.fillRect(this.x, this.y, this.width, this.height);
|
||
|
|
}
|
||
|
|
}
|