代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui贪吃蛇小游戏</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layui/2.5.7/css/layui.css">
</head>
<body>
<div class="layui-container">
<h1 class="layui-header">Layui贪吃蛇小游戏</h1>
<div class="layui-row">
<div class="layui-col-md8">
<canvas id="gameCanvas" width="400" height="400"></canvas>
</div>
<div class="layui-col-md4">
<div class="layui-card">
<div class="layui-card-header">游戏控制</div>
<div class="layui-card-body">
<button id="startBtn" class="layui-btn">开始游戏</button>
<button id="pauseBtn" class="layui-btn">暂停游戏</button>
<button id="resetBtn" class="layui-btn">重置游戏</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.7/layui.js"></script>
<script>
layui.use(['layer', 'form'], function(){
var layer = layui.layer;
var form = layui.form;
// 游戏逻辑
var canvas = document.getElementById('gameCanvas');
var ctx = canvas.getContext('2d');
var snakeSize = 10;
var snake = [
{x: 200, y: 200},
{x: 190, y: 200},
{x: 180, y: 200},
{x: 170, y: 200},
{x: 160, y: 200}
];
var food = {x: 0, y: 0};
var dx = 10;
var dy = 0;
function drawSnakePart(snakePart) {
ctx.fillStyle = 'lightgreen';
ctx.strokeStyle = 'darkgreen';
ctx.fillRect(snakePart.x, snakePart.y, snakeSize, snakeSize);
ctx.strokeRect(snakePart.x, snakePart.y, snakeSize, snakeSize);
}
function drawSnake() {
snake.forEach(drawSnakePart);
}
function advanceSnake() {
const head = {x: snake[0].x + dx, y: snake[0].y + dy};
snake.unshift(head);
const didEatFood = snake[0].x === food.x && snake[0].y === food.y;
if (didEatFood) {
createFood();
} else {
snake.pop();
}
}
function clearCanvas() {
ctx.fillStyle = 'white';
ctx.strokeStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeRect(0, 0, canvas.width, canvas.height);
}
function createFood() {
food.x = Math.floor(Math.random() * canvas.width / 10) * 10;
food.y = Math.floor(Math.random() * canvas.height / 10) * 10;
snake.forEach(function isFoodOnSnake(part) {
const foodIsOnSnake = part.x === food.x && part.y === food.y;
if (foodIsOnSnake) {
createFood();
}
});
}
function drawFood() {
ctx.fillStyle = 'red';
ctx.strokeStyle = 'darkred';
ctx.fillRect(food.x, food.y, snakeSize, snakeSize);
ctx.strokeRect(food.x, food.y, snakeSize, snakeSize);
}
function main() {
if (didGameEnd()) return;
setTimeout(function onTick() {
changingDirection = false;
clearCanvas();
drawFood();
advanceSnake();
drawSnake();
main();
}, 100)
}
function didGameEnd() {
for (let i = 4; i < snake.length; i++) {
if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) return true;
}
const hitLeftWall = snake[0].x < 0;
const hitRightWall = snake[0].x > canvas.width - 10;
const hitTopWall = snake[0].y < 0;
const hitBottomWall = snake[0].y > canvas.height - 10;
return hitLeftWall || hitRightWall || hitTopWall || hitBottomWall;
}
function resetGame() {
snake = [
{x: 200, y: 200},
{x: 190, y: 200},
{x: 180, y: 200},
{x: 170, y: 200},
{x: 160, y: 200}
];
dx = 10;
dy = 0;
createFood();
}
createFood();
main();
document.addEventListener('keydown', changeDirection);
function changeDirection(event) {
const LEFT_KEY = 37;
const RIGHT_KEY = 39;
const UP_KEY = 38;
const DOWN_KEY = 40;
if (changingDirection) return;
changingDirection = true;
const keyPressed = event.keyCode;
const goingUp = dy === -10;
const goingDown = dy === 10;
const goingRight = dx === 10;
const goingLeft = dx === -10;
if (keyPressed === LEFT_KEY && !goingRight) {
dx = -10;
dy = 0;
}
if (keyPressed === UP_KEY && !goingDown) {
dx = 0;
dy = -10;
}
if (keyPressed === RIGHT_KEY && !goingLeft) {
dx = 10;
dy = 0;
}
if (keyPressed === DOWN_KEY && !goingUp) {
dx = 0;
dy = 10;
}
}
// 游戏控制
var startBtn = document.getElementById('startBtn');
var pauseBtn = document.getElementById('pauseBtn');
var resetBtn = document.getElementById('resetBtn');
startBtn.onclick = function() {
main();
}
pauseBtn.onclick = function() {
clearTimeout(main);
}
resetBtn.onclick = function() {
resetGame();
}
});
</script>
</body>
</html>
结果图：
