好的，我可以给你提供一个简单的
贪吃蛇游戏的代码示例，
实现了计分和
游戏开始结束等功能，代码如下：
HTML部分：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
贪吃蛇游戏</title>
<style>
#game {
width: 500px;
height: 500px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>
贪吃蛇游戏</h1>
<p>得分：<span id="score">0</span></p>
<button id="startBtn" onclick="startGame()">开始
游戏</button>
<button id="pauseBtn" onclick="pauseGame()" disabled>暂停
游戏</button>
<button id="resetBtn" onclick="resetGame()" disabled>重新开始</button>
<div id="game"></div>
<script src="snake.js"></script>
</body>
</html>
```
JavaScript部分：
```
javascript
var canvas = document.getElementById("game");
var ctx = canvas.getContext("2d");
var gridSize = 20; // 网格大小
var snake = [{x: 3, y: 0}, {x: 2, y: 0}, {x: 1, y: 0}, {x: 0, y: 0}]; // 蛇的初始位置
var food = {x: Math.floor(Math.random() * 25), y: Math.floor(Math.random() * 25)}; // 食物的初始位置
var direction = "right"; // 初始方向
var score = 0; // 初始得分
var intervalId; // 定时器ID
function drawGrid(x, y, color) {
ctx.fillStyle = color;
ctx.fillRect(x * gridSize, y * gridSize, gridSize, gridSize);
}
function drawSnake() {
for (var i = 0; i < snake.length; i++) {
drawGrid(snake[i].x, snake[i].y, "#000000");
}
}
function drawFood() {
drawGrid(food.x, food.y, "#FF0000");
}
function moveSnake() {
var head = {x: snake[0].x, y: snake[0].y};
switch (direction) {
case "right":
head.x++;
break;
case "left":
head.x--;
break;
case "up":
head.y--;
break;
case "down":
head.y++;
break;
}
snake.unshift(head);
if (head.x === food.x && head.y === food.y) { // 吃到食物
score++;
document.getElementById("score").textContent = score;
food = {x: Math.floor(Math.random() * 25), y: Math.floor(Math.random() * 25)}; // 食物位置随机
} else {
snake.pop();
}
}
function checkCollision() {
var head = snake[0];
if (head.x < 0 || head.x > 24 || head.y < 0 || head.y > 24) { // 撞墙
return true;
}
for (var i = 1; i < snake.length; i++) {
if (head.x === snake[i].x && head.y === snake[i].y) { // 撞到自己
return true;
}
}
return false;
}
function gameLoop() {
moveSnake();
if (checkCollision()) {
clearInterval(intervalId);
alert("
游戏结束，得分：" + score);
document.getElementById("startBtn").disabled = false;
document.getElementById("pauseBtn").disabled = true;
document.getElementById("resetBtn").disabled = false;
} else {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawSnake();
drawFood();
}
}
function startGame() {
direction = "right";
snake = [{x: 3, y: 0}, {x: 2, y: 0}, {x: 1, y: 0}, {x: 0, y: 0}];
food = {x: Math.floor(Math.random() * 25), y: Math.floor(Math.random() * 25)};
score = 0;
document.getElementById("score").textContent = score;
document.getElementById("startBtn").disabled = true;
document.getElementById("pauseBtn").disabled = false;
document.getElementById("resetBtn").disabled = true;
intervalId = setInterval(gameLoop, 100);
}
function pauseGame() {
clearInterval(intervalId);
document.getElementById("startBtn").disabled = false;
document.getElementById("pauseBtn").disabled = true;
}
function resetGame() {
clearInterval(intervalId);
ctx.clearRect(0, 0, canvas.width, canvas.height);
document.getElementById("startBtn").disabled = false;
document.getElementById("pauseBtn").disabled = true;
document.getElementById("resetBtn").disabled = true;
}
```
这个
游戏通过canvas画布
实现，每个格子大小为20px，画布大小为500px * 500px，蛇和食物的位置都是以网格为单位的，
游戏逻辑主要在gameLoop函数中处理。其中，checkCollision函数用来检测蛇是否撞墙或撞到自己，如果撞到了就
游戏结束。
游戏结束时，清除定时器，弹出得分提示框，并将按钮的状态改为合适的状态，等待下一次
游戏。
最低0.47元/天 解锁文章
464
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
