贪吃蛇小游戏基本简单布局

news2025/11/4 10:35:23

代码：

<!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>

// 游戏逻辑
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 clearCanvas() {
ctx.fillStyle = 'white';
ctx.strokeStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeRect(0, 0, canvas.width, canvas.height);
}

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>

结果图：