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

代码：

<!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: snake0.x + dx, y: snake0.y + dy};

snake.unshift(head);

const didEatFood = snake0.x === food.x && snake0.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 (snakei.x === snake0.x && snakei.y === snake0.y) return true;

}

const hitLeftWall = snake0.x < 0;

const hitRightWall = snake0.x > canvas.width - 10;

const hitTopWall = snake0.y < 0;

const hitBottomWall = snake0.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>

结果图：