20241204授業
ゆうき| You are currently viewing a revision titled "20241204授業", saved on 2024年12月4日 11:22 PM by ゆうき | |
|---|---|
| タイトル | 20241204授業 |
| コンテンツ | このソースのスコアが動作するように修正して書き直してください。
class Snake {
constructor(x, y) {
this.body = [{ x, y }];
this.direction = "right";
}
move() {
const head = { ...this.body[0] };
switch (this.direction) {
case "up":
head.y--;
break;
case "down":
head.y++;
break;
case "left":
head.x--;
break;
case "right":
head.x++;
break;
}
this.body.unshift(head);
this.body.pop();
}
grow() {
const tail = { ...this.body[this.body.length - 1] };
this.body.push(tail);
}
getHead() {
return { ...this.body[0] };
}
checkCollision(canvasWidth, canvasHeight) {
const head = this.getHead();
// 境界線との衝突判定
if (head.x = canvasWidth || head.y = canvasHeight) {
return true;
}
// 自分自身との衝突判定
return this.body.slice(1).some(segment => segment.x === head.x && segment.y === head.y);
}
}
class Food {
constructor(canvasWidth, canvasHeight, blockSize) {
this.canvasWidth = canvasWidth;
this.canvasHeight = canvasHeight;
this.blockSize = blockSize;
this.respawn();
}
respawn() {
const maxX = Math.floor(this.canvasWidth / this.blockSize);
const maxY = Math.floor(this.canvasHeight / this.blockSize);
this.pos = {
x: Math.floor(Math.random() * maxX),
y: Math.floor(Math.random() * maxY)
};
}
getPos() {
return { ...this.pos };
}
}
class Game {
constructor(canvas, canvasWidth, canvasHeight, blockSize) {
this.canvas = canvas;
this.ctx = canvas.getContext("2d");
this.canvasWidth = canvasWidth;
this.canvasHeight = canvasHeight;
this.blockSize = blockSize;
this.snake = new Snake(5, 5);
this.food = new Food(canvasWidth, canvasHeight, blockSize);
this.score = 0;
this.isGameOver = false;
this.init();
}
init() {
this.canvas.width = this.canvasWidth;
this.canvas.height = this.canvasHeight;
this.canvas.style.border = "1px solid #ccc";
this.canvas.style.background = "#fff";
document.addEventListener("keydown", this.handleInput.bind(this));
const restartBtn = document.getElementById("restart-btn");
restartBtn.addEventListener("click", () => this.restart());
this.updateScore();
}
start() {
let lastFrameTime = performance.now();
let timeSinceLastFrame = 0;
const interval = 100;
const animate = (timestamp) => {
timeSinceLastFrame += timestamp - lastFrameTime;
lastFrameTime = timestamp;
while (timeSinceLastFrame >= interval) {
this.update();
this.draw();
timeSinceLastFrame -= interval;
}
if (!this.isGameOver) {
requestAnimationFrame(animate);
}
};
animate(lastFrameTime);
}
stop() {
this.isGameOver = true;
}
restart() {
this.snake = new Snake(5, 5);
this.food.respawn();
this.score = 0;
this.updateScore();
if (this.isGameOver) {
this.isGameOver = false;
this.start();
}
}
update() {
if (this.isGameOver) return;
this.snake.move();
if (this.snake.checkCollision(this.canvasWidth / this.blockSize, this.canvasHeight / this.blockSize)) {
this.isGameOver = true;
this.stop();
alert(`Game over! Your score is ${this.score}`);
return;
}
const head = this.snake.getHead();
const foodPos = this.food.getPos();
if (head.x === foodPos.x && head.y === foodPos.y) {
this.snake.grow();
this.food.respawn();
this.score++;
this.updateScore();
}
}
draw() {
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
// Snake
this.ctx.fillStyle = "#4CAF50";
this.snake.body.forEach(segment => {
this.ctx.fillRect(
segment.x * this.blockSize,
segment.y * this.blockSize,
this.blockSize,
this.blockSize
);
});
// Food
this.ctx.fillStyle = "#f44336";
this.ctx.fillRect(
this.food.pos.x * this.blockSize,
this.food.pos.y * this.blockSize,
this.blockSize,
this.blockSize
);
}
handleInput(event) {
switch (event.keyCode) {
case 38: // up arrow
if (this.snake.direction !== "down") this.snake.direction = "up";
break;
case 40: // down arrow
if (this.snake.direction !== "up") this.snake.direction = "down";
break;
case 37: // left arrow
if (this.snake.direction !== "right") this.snake.direction = "left";
break;
case 39: // right arrow
if (this.snake.direction !== "left") this.snake.direction = "right";
break;
}
}
updateScore() {
const scoreElem = document.getElementById("score");
if (scoreElem) {
scoreElem.textContent = `Score: ${this.score}`;
}
}
}
const canvas = document.getElementById("canvas");
const game = new Game(canvas, 400, 400, 10);
game.start();
|
| 抜粋 | |
| 脚注 |
