chat gptで修正した後のsnake
カシワザキ| You are currently viewing a revision titled "chat gptで修正した後のsnake", saved on 2024年12月4日 11:18 PM by カシワザキ | |
|---|---|
| タイトル | chat gptで修正した後のsnake |
| コンテンツ | ・html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snake Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<canvas id="canvas"></canvas>
<div class="score">Score: <span id="score">0</span></div>
<button id="restart-btn">Restart</button>
</div>
<script src="game.js"></script>
</body>
</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: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
#restart-btn:hover {
background-color: #45a049;
}
------------------------------------------------------------------------------------------------------------------
・game.js
// Snakeクラス
class Snake {
constructor(x, y) {
this.body = [{ x, y }];
this.direction = "right";
this.nextDirection = "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();
this.direction = this.nextDirection; // 次の方向に更新
}
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.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 };
}
}
// Gameクラス
class Game {
constructor(canvas, canvasWidth, canvasHeight, blockSize) {
this.canvas = canvas;
this.ctx = canvas.getContext("2d");
this.canvasWidth = canvasWidth / blockSize;
this.canvasHeight = canvasHeight / blockSize;
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.blockSize;
this.canvas.height = this.canvasHeight * this.blockSize;
document.addEventListener("keydown", this.handleInput.bind(this));
document.getElementById("restart-btn").addEventListener("click", () => this.restart());
this.start();
}
start() {
const interval = 100;
const gameLoop = () => {
if (!this.isGameOver) {
this.update();
this.draw();
setTimeout(gameLoop, interval);
}
};
gameLoop();
}
update() {
this.snake.move();
if (this.snake.checkCollision(this.canvasWidth, this.canvasHeight)) {
this.isGameOver = true;
alert(`Game Over! Your score: ${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++;
document.getElementById("score").textContent = this.score;
}
}
draw() {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
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";
const foodPos = this.food.getPos();
this.ctx.fillRect(foodPos.x * this.blockSize, foodPos.y * this.blockSize, this.blockSize, this.blockSize);
}
handleInput(event) {
const direction = {
37: "left",
38: "up",
39: "right",
40: "down",
}[event.keyCode];
if (direction) {
const isOpposite =
(direction === "left" && this.snake.direction === "right") ||
(direction === "right" && this.snake.direction === "left") ||
(direction === "up" && this.snake.direction === "down") ||
(direction === "down" && this.snake.direction === "up");
if (!isOpposite) this.snake.nextDirection = direction;
}
}
restart() {
this.snake = new Snake(5, 5);
this.food.respawn();
this.score = 0;
document.getElementById("score").textContent = this.score;
this.isGameOver = false;
this.start();
}
}
// ゲーム開始
const canvas = document.getElementById("canvas");
new Game(canvas, 400, 400, 20); |
| 抜粋 | |
| 脚注 |
