class Game { constructor(opt) { this._canvas = opt.canvas; this._ctx = this._canvas.getContext('2d'); this._assets = opt.assets; this._loadedAssets = {}; this._fps = opt.fps || 30; this._timer; this._items = []; this._keyboard = ''; this._setEventListener(); } async start() { await this._loadAssets(); this._timer = setInterval(() => { this._render(); }, 1000 / this._fps); } stop() { clearInterval(this._timer); } async _loadAssets() { const promises = Object.keys(this._assets).map(asset => { return new Promise((resolve, reject) => { const img = new Image(); img.onload = () => { resolve(); } img.onerror = err => { reject(err); } img.src = this._assets[asset]; this._loadedAssets[asset] = img; }); }); return Promise.all(promises); } _render() { this._ctx.clearRect(0, 0, this._canvas.clientWidth, this._canvas.clientHeight); this._items.forEach(a => { a.draw(this._ctx, this._loadedAssets); a.update(this._keyboard); }) } _setEventListener() { window.addEventListener('keydown', e => { this._keyboard = e.key }); window.addEventListener('keyup', e => { this._keyboard = '' }); } add(item) { this._items.push(item); } remove(item) { const idx = this._items.find(a => a === item); this._items.splice(idx, 1); } } class Player { constructor(opt = {}) { this.x = opt.x || 0; this.y = opt.y || 0; this.w = opt.w || 64; this.h = opt.h || 64; this.src = opt.src; } draw(ctx, assets) { if (assets[this.src]) { ctx.drawImage(assets[this.src], this.x, this.y, this.w, this.h); } else { ctx.fillRect(this.x, this.y, this.w, this.h); } } update(keyboard) { // ここで動作を定義する switch (keyboard) { case 'ArrowUp': this.y -= 5; break; case 'ArrowDown': this.y += 5; break; case 'ArrowLeft': this.x -= 5; break; case 'ArrowRight': this.x += 5; break; } } } function main() { const assets = { player: 'https://avatars3.githubusercontent.com/u/5305599' }; const game = new Game({ canvas: document.getElementById('app'), assets: assets, fps: 30 }); const player = new Player({ src: 'player' }); game.add(player); document.getElementById('start').addEventListener('click', () => game.start()); document.getElementById('stop').addEventListener('click', () => game.stop()); } main();
<div> <canvas id="app" width="640" height="360"></canvas> </div> <button id="start">start</button> <button id="stop">stop</button>