文章目录
整体架构流程
HTML5+CSS3+JS
技术细节
一.打开vscode，新建文件名称如下，当然你的css也可以写在html里
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>贪吃蛇游戏</title>
</head>
<style>
#gameCanvas {
background-color: lightgray;
display: block;
margin: 0 auto;
}
#score-board {
text-align: center;
margin-top: 10px;
font-size: 20px;
}
button {
display: block;
margin: 10px auto;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<div id="score-board">得分: <span id="score">0</span></div>
<button id="start-button">开始游戏</button>
<button id="pause-button">暂停游戏</button>
<button id="reset-button">重置游戏</button>
<script src="script.js"></script>
</body>
</html>
script.js
// 获取画布和上下文
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// 蛇的初始位置和大小
const snake = {
x: [200, 190, 180],
y: [200, 200, 200],
dx: 10,
dy: 0
};
// 食物的初始位置
let food = {
x: Math.floor(Math.random() * 40) * 10,
y: Math.floor(Math.random() * 40) * 10
};
// 游戏是否结束的标志
let gameOver = false;
// 得分
let score = 0;
// 游戏速度（每帧之间的延迟时间，单位毫秒）
let gameSpeed = 100;
// 绘制蛇的函数
function drawSnake() {
ctx.beginPath();
ctx.fillStyle = 'green';
for (let i = 0; i < snake.x.length; i++) {
ctx.fillRect(snake.x[i], snake.y[i], 10, 10);
}
ctx.closePath();
}
// 绘制食物的函数
function drawFood() {
ctx.beginPath();
ctx.fillStyle = 'red';
ctx.fillRect(food.x, food.y, 10, 10);
ctx.closePath();
}
// 移动蛇的函数
function moveSnake() {
// 移动蛇的身体
for (let i = snake.x.length - 1; i > 0; i--) {
snake.x[i] = snake.x[i - 1];
snake.y[i] = snake.y[i - 1];
}
// 移动蛇头
snake.x[0] += snake.dx;
snake.y[0] += snake.dy;
}
// 检查蛇是否吃到食物
function checkFood() {
if (snake.x[0] === food.x && snake.y[0] === food.y) {
// 重新生成食物
food = {
x: Math.floor(Math.random() * 40) * 10,
y: Math.floor(Math.random() * 40) * 10
};
// 蛇的身体增长
snake.x.push(snake.x[snake.x.length - 1]);
snake.y.push(snake.y[snake.y.length - 1]);
// 增加得分
score++;
document.getElementById('score').textContent = score;
}
}
// 检查蛇是否撞到边界或自己
function checkCollision() {
// 撞到边界
if (snake.x[0] < 0 || snake.x[0] >= canvas.width || snake.y[0] < 0 || snake.y[0] >= canvas.height) {
gameOver = true;
}
// 撞到自己
for (let i = 1; i < snake.x.length; i++) {
if (snake.x[0] === snake.x[i] && snake.y[0] === snake.y[i]) {
gameOver = true;
}
}
}
// 游戏主循环
function gameLoop() {
if (!gameOver) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawSnake();
drawFood();
moveSnake();
checkFood();
checkCollision();
setTimeout(gameLoop, gameSpeed);
} else {
ctx.font = "30px Arial";
ctx.fillStyle = 'black';
ctx.fillText("游戏结束", 150, 200);
}
}
// 开始游戏函数
function startGame() {
gameOver = false;
score = 0;
document.getElementById('score').textContent = score;
snake.x = [200, 190, 180];
snake.y = [200, 200, 200];
snake.dx = 10;
snake.dy = 0;
food = {
x: Math.floor(Math.random() * 40) * 10,
y: Math.floor(Math.random() * 40) * 10
};
gameSpeed = 100;
gameLoop();
}
// 暂停游戏函数
function pauseGame() {
gameOver = true;
}
// 重置游戏函数
function resetGame() {
startGame();
}
// 键盘事件处理函数
function handleKeyDown(event) {
switch (event.keyCode) {
case 37: // 左箭头键
if (snake.dx != 10) {
snake.dx = -10;
snake.dy = 0;
}
break;
case 38: // 上箭头键
if (snake.dy != 10) {
snake.dx = 0;
snake.dy = -10;
}
break;
case 39: // 右箭头键
if (snake.dx != -10) {
snake.dx = 10;
snake.dy = 0;
}
break;
case 40: // 下箭头键
if (snake.dy != -10) {
snake.dx = 0;
snake.dy = 10;
}
break;
}
}
// 绑定按钮点击事件
document.getElementById('start-button').addEventListener('click', startGame);
document.getElementById('pause-button').addEventListener('click', pauseGame);
document.getElementById('reset-button').addEventListener('click', resetGame);
// 绑定键盘按下事件
document.addEventListener('keydown', handleKeyDown);