/ styles.css / body { margin: 0; background-color: #f0f0f0; } #gameCanvas { border: 1px solid #ccc; } // game.js class Fighter { constructor(name, x, y, width, height) { this.name = name; this.x = x; this.y = y; this.width = width; this.height = height; this.health = 100; } draw(ctx) { ctx.fillStyle = 'red'; ctx.fillRect(this.x, this.y, this.width, this.height); } update() { this.x += 1; } } class Game { constructor() { this.ctx = document.getElementById('gameCanvas').getContext('2d'); this.fighters = [ new Fighter('ピーチ', 10, 10, 50, 50), new Fighter('マリオ', 100, 100, 50, 50), ]; } update() { this.fighters.forEach((fighter) => { fighter.update(); fighter.draw(this.ctx); }); } } const game = new Game(); setInterval(() => { game.ctx.clearRect(0, 0, 800, 600); game.update(); }, 1000 / 60);