章宏睿贪吃蛇 - 科学教育

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贪吃蛇游戏</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="gameCanvas"></canvas>
<script src="script.js"></script>
</body>
</html>

复制代码

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#gameCanvas {
border: 1px solid black;
}

复制代码

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const snakeSize = 10;
let snake = [
{ x: 20, y: 20 },
{ x: 10, y: 20 },
{ x: 0, y: 20 }
];
let food = { x: 15, y: 15 };
let dx = 10;
let dy = 0;
function drawSnakePart(snakePart) {
ctx.fillStyle = 'green';
ctx.fillRect(snakePart.x * snakeSize, snakePart.y * snakeSize, snakeSize, snakeSize);
}
function changeDirection(event) {
const left = 37, up = 38, right = 39, down = 40;
if (event.keyCode === left && dx !== 10) { dx = -10; dy = 0; }
if (event.keyCode === up && dy !== 10) { dx = 0; dy = -10; }
if (event.keyCode === right && dx !== -10) { dx = 10; dy = 0; }
if (event.keyCode === down && dy !== -10) { dx = 0; dy = 10; }
}
function moveSnake() {
const head = { x: snake[0].x + dx, y: snake[0].y + dy };
snake.unshift(head);
if (head.x === food.x && head.y === food.y) {
createFood();
} else {
snake.pop();
}
}
function createFood() {
food.x = Math.floor(Math.random() * canvas.width / snakeSize);
food.y = Math.floor(Math.random() * canvas.height / snakeSize);
}
function checkGameEnd() {
if (snake[0].x < 0 || snake[0].x >= canvas.width / snakeSize || snake[0].y < 0 || snake[0].y >= canvas.height / snakeSize || checkCollision()) {
clearInterval(gameLoop);
alert('游戏结束！');
}
}
function checkCollision() {
for (let i = 1; i < snake.length; i++) {
if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) {
return true;
}
}
return false;
}
function drawGame() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawSnake();
drawFood();
}
function drawSnake() {
snake.forEach(drawSnakePart);
}
function drawFood() {
ctx.fillStyle = 'red';
ctx.fillRect(food.x * snakeSize, food.y * snakeSize, snakeSize, snakeSize);
}
document.addEventListener('keydown', changeDirection);
let gameLoop = setInterval(() => {
moveSnake();
checkGameEnd();
drawGame();
}, 100);

复制代码

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
color: green; /* 修改字体颜色为绿色 */
}
#gameCanvas {
border: 1px solid black;
}

复制代码