snake javascriptの内容

htmlファイルとcssファイル、jsファイルの三つからなります。

index.html

————————
style.css
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f5f5f5;
}

.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}

canvas {
border: 1px solid #ccc;
}

.score {
font-size: 24px;
font-weight: bold;
margin-top: 20px;
}

#restart-btn {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}

————————————
game.js

// Snake
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 head = this.getHead();
this.body.unshift(head);
}

getHead() {
return { …this.body[0] };
}

checkCollision(canvasWidth, canvasHeight) {
const head = this.getHead();
//
if (head.x < 0 || head.x >= canvasWidth || head.y < 0 || head.y >= canvasHeight) {
return true;
}
//
return this.body.slice(1).some(segment => segment.x === head.x && segment.y === head.y);
}
}

// Food
class Food {
constructor(canvasWidth, canvasHeight, blockSize) {
this.pos = { x: 0, y: 0 };
this.canvasWidth = canvasWidth;
this.canvasHeight = canvasHeight;
this.blockSize = blockSize;
this.respawn();
}

respawn() {
const maxX = Math.floor(this.canvasWidth / this.blockSize) – 1;
const maxY = Math.floor(this.canvasHeight / this.blockSize) – 1;
this.pos.x = Math.floor(Math.random() * maxX) * this.blockSize;
this.pos.y = Math.floor(Math.random() * maxY) * this.blockSize;
}

getPos() {
return { …this.pos };
}
}

// Game
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.intervalId = null;
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”;
this.canvas.style.margin = “0 auto”;
document.addEventListener(“keydown”, this.handleInput.bind(this));
this.draw();

const restartBtn = document.getElementById(“restart-btn”);
restartBtn.addEventListener(“click”, () => {
this.restart();
});

}

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() {
}

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()) {
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 * this.blockSize === foodPos.x && head.y * this.blockSize === foodPos.y) {
this.snake.grow();
this.food.respawn();
this.score++;
this.updateScore();
}
}

draw() {
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
this.ctx.fillStyle = “#4CAF50”;

this.snake.body.forEach(segment => {
this.ctx.fillRect(segment.x * this.blockSize, segment.y * this.blockSize, this.blockSize, this.blockSize);
});

this.ctx.fillStyle = “#f44336”;
this.ctx.fillRect(this.food.pos.x, this.food.pos.y, this.blockSize, this.blockSize);
}

handleInput(event) {
switch (event.keyCode) {
case 38: // up arrow
this.snake.direction = “up”;
break;
case 40: // down arrow
this.snake.direction = “down”;
break;
case 37: // left arrow
this.snake.direction = “left”;
break;
case 39: // right arrow
this.snake.direction = “right”;
break;
}
}

updateScore() {
const scoreElem = document.getElementById(“score”);
scoreElem.textContent = this.score;
}
}

//
const canvas = document.getElementById(“canvas”);
const game = new Game(canvas, 400, 400, 10);

game.start();