朱乔安

朱乔安 · 发表于 2025-9-30 10:16:28

给我一个贪吃蛇代码,css,js,thm

kaia · 发表于 2025-9-30 10:16:35

当然可以！下面是一个简单的贪吃蛇的网页编程代码，包括HTML、CSS和JavaScript：

1. HTML代码:

复制代码

2. CSS代码(style.css):

复制代码

3. JavaScript代码(script.js):

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const gridSize = 20;
const tileCount = 20;
let snake = [{ x: 10, y: 10 }];
let apple = { x: 15, y: 15 };
let xVelocity = 0;
let yVelocity = 0;
function update() {
snake.unshift({ x: snake[0].x + xVelocity, y: snake[0].y + yVelocity });
if (snake[0].x === apple.x && snake[0].y === apple.y) {
apple.x = Math.floor(Math.random() * tileCount);
apple.y = Math.floor(Math.random() * tileCount);
} else {
snake.pop();
}
if (snake[0].x < 0 || snake[0].x >= tileCount || snake[0].y < 0 || snake[0].y >= tileCount || checkCollision()) {
snake = [{ x: 10, y: 10 }];
xVelocity = 0;
yVelocity = 0;
}
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'red';
ctx.fillRect(apple.x * gridSize, apple.y * gridSize, gridSize, gridSize);
ctx.fillStyle = 'green';
snake.forEach((segment) => {
ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize);
});
}
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 moveSnake(event) {
switch(event.key) {
case 'ArrowUp':
xVelocity = 0;
yVelocity = -1;
break;
case 'ArrowDown':
xVelocity = 0;
yVelocity = 1;
break;
case 'ArrowLeft':
xVelocity = -1;
yVelocity = 0;
break;
case 'ArrowRight':
xVelocity = 1;
yVelocity = 0;
break;
}
}
setInterval(() => {
update();
draw();
}, 100);
window.addEventListener('keydown', moveSnake);

复制代码

这个代码实现了一个简单的贪吃蛇游戏。希望你可以在浏览器中尝试运行并玩一下这个小游戏！如果有任何问题，欢迎随时询问。