<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>贪吃蛇游戏</title>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script src="snake.js"></script>
</body>
</html>
javascript
复制代码
// 定义画布和上下文
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
// 定义贪吃蛇的初始位置和大小
let snake = [{ x: 10, y: 10 }, { x: 9, y: 10 }];
let food = {};
let score = 0;
let speed = 100;
// 定义绘制贪吃蛇的函数
function drawSnake() {
for (let i = 0; i < snake.length; i++) {
ctx.fillStyle = "#00FF00"; // 贪吃蛇的身体颜色为绿色
ctx.fillRect(snake[i].x * 10, snake[i].y * 10, 10, 10); // 每个方块的大小为10像素
}
}
// 定义绘制食物的函数
function drawFood() {
ctx.fillStyle = "#FF0000"; // 食物的颜色为红色
ctx.fillRect(food.x * 10, food.y * 10, 10, 10); // 每个方块的大小为10像素
}
// 定义移动贪吃蛇的函数
function moveSnake() {
let head = getHead(); // 获取贪吃蛇的头部位置
let newHead = { x: head.x + dx, y: head.y + dy }; // 根据方向计算新的头部位置
if (newHead.x < 0 || newHead.x >= canvas.width || newHead.y < 0 || newHead.y >= canvas.height) return; // 如果新的位置超出了画布范围,则返回
if (newHead === food) food = generateFood(); // 如果新的位置是食物,则生成新的食物位置并更新食物状态
else snake.pop(); // 如果新的位置不是食物,则删除最后一个身体块并将头部移动到新的位置上
snake.unshift(newHead); // 将新的头部位置添加到贪吃蛇的前面,形成新的贪吃蛇身体块序列
}
// 定义生成随机食物位置的函数
function generateFood() {
let x = Math.floor(Math.random() * canvas.width); // 在画布上随机生成一个位置作为食物位置
let y = Math.floor(Math.random() * canvas.height); // 在画布上随机生成一个位置作为食物位置
while (snake.some((segment) => segment.x === x && segment.y === y)) x = Math.floor(Math.random() * canvas.width); // 如果食物位置已经被贪吃蛇占据,则重新生成一个新的食物位置
// 定义画布和上下文
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
// 定义贪吃蛇的初始位置和大小
let snake = [{ x: 10, y: 10 }, { x: 9, y: 10 }];
let food = {};
let score = 0;
let speed = 100;
// 定义绘制贪吃蛇的函数
function drawSnake() {
for (let i = 0; i < snake.length; i++) {
ctx.fillStyle = "#00FF00"; // 贪吃蛇的身体颜色为绿色
ctx.fillRect(snake[i].x * 10, snake[i].y * 10, 10, 10); // 每个方块的大小为10像素
}
}
// 定义绘制食物的函数
function drawFood() {
ctx.fillStyle = "#FF0000"; // 食物的颜色为红色
ctx.fillRect(food.x * 10, food.y * 10, 10, 10); // 每个方块的大小为10像素
}
// 定义移动贪吃蛇的函数
function moveSnake() {
let head = getHead(); // 获取贪吃蛇的头部位置
let newHead = { x: head.x + dx, y: head.y + dy }; // 根据方向计算新的头部位置
if (newHead.x < 0 || newHead.x >= canvas.width || newHead.y < 0 || newHead.y >= canvas.height) return; // 如果新的位置超出了画布范围,则返回
if (newHead === food) food = generateFood(); // 如果新的位置是食物,则生成新的食物位置并更新食物状态
else snake.pop(); // 如果新的位置不是食物,则删除最后一个身体块并将头部移动到新的位置上
snake.unshift(newHead); // 将新的头部位置添加到贪吃蛇的前面,形成新的贪吃蛇身体块序列
}
// 定义生成随机食物位置的函数
function generateFood() {
let x = Math.floor(Math.random() * canvas.width); // 在画布上随机生成一个位置作为食物位置
let y = Math.floor(Math.random() * canvas.height); // 在画布上随机生成一个位置作为食物位置
while (snake.some((segment) => segment.x === x && segment.y === y)) x = Math.floor(Math.random() * canvas.width); // 如果食物位置已经被贪吃蛇占据,则重新生成一个新的食物位置
food.x = x; // 将新的食物位置保存下来
food.y = y;
}
//