daima

周晓丽 · 发表于 2024-7-12 19:10:26

你好，你是一名专业的程序员，请你帮我生成一个贪吃蛇网页代码，用himl、css、js文件完成

kaia · 发表于 2024-7-12 19:10:47

当然可以！以下是一个简单的贪吃蛇网页游戏的代码示例，包含HTML、CSS和JavaScript文件。

1. HTML 文件 (`index.html`):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贪吃蛇游戏</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="game-container">
<canvas id="gameCanvas"></canvas>
</div>
<script src="script.js"></script>
</body>
</html>

复制代码

2. CSS 文件 (`styles.css`):

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #000;
}
.game-container {
position: relative;
width: 500px;
height: 500px;
}
canvas {
display: block;
border: 1px solid #fff;
background-color: #111;
}

复制代码

3. JavaScript 文件 (`script.js`):

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const tileSize = 20;
const tileCount = canvas.width / tileSize;
let snake = [{ x: tileCount / 2, y: tileCount / 2 }];
let direction = { x: 0, y: 0 };
let apple = { x: Math.floor(Math.random() * tileCount), y: Math.floor(Math.random() * tileCount) };
let score = 0;
document.addEventListener('keydown', (event) => {
switch (event.key) {
case 'ArrowUp':
if (direction.y === 0) direction = { x: 0, y: -1 };
break;
case 'ArrowDown':
if (direction.y === 0) direction = { x: 0, y: 1 };
break;
case 'ArrowLeft':
if (direction.x === 0) direction = { x: -1, y: 0 };
break;
case 'ArrowRight':
if (direction.x === 0) direction = { x: 1, y: 0 };
break;
}
});
function gameLoop() {
const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
// Check collision with walls
if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
alert('Game Over!');
document.location.reload();
}
// Check collision with itself
for (let segment of snake) {
if (segment.x === head.x && segment.y === head.y) {
alert('Game Over!');
document.location.reload();
}
}
snake.unshift(head);
// Check if snake has eaten the apple
if (head.x === apple.x && head.y === apple.y) {
score++;
apple = { x: Math.floor(Math.random() * tileCount), y: Math.floor(Math.random() * tileCount) };
} else {
snake.pop();
}
draw();
setTimeout(gameLoop, 100);
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw snake
for (let segment of snake) {
ctx.fillStyle = 'lime';
ctx.fillRect(segment.x * tileSize, segment.y * tileSize, tileSize, tileSize);
}
// Draw apple
ctx.fillStyle = 'red';
ctx.fillRect(apple.x * tileSize, apple.y * tileSize, tileSize, tileSize);
// Draw score
ctx.fillStyle = 'white';
ctx.font = '20px Arial';
ctx.fillText(`Score: ${score}`, 10, 20);
}
window.onload = () => {
canvas.width = tileSize * tileCount;
canvas.height = tileSize * tileCount;
gameLoop();
};

复制代码

将以上内容分别保存为 `index.html`、`styles.css` 和 `script.js` 文件，并将它们放在同一目录下。然后打开 `index.html` 即可在浏览器中运行这个简单的贪吃蛇游戏。希望你喜欢！