用JavaScript实现一个贪吃蛇游戏
原理如下，贪吃蛇的蛇身就是一个数组，数组中的每个元素都是一个坐标，蛇身每次移动时都会在数组前插入一个新坐标，并在数组尾部删掉一条记录，吃到食物后数组的尾部记录就不删。如果移到屏幕边缘会从屏幕的另一边出现。好！接下来直接上代码！
<!DOCTYPE html>
<html lang="CN">
<head>
<meta charset="UTF-8">
<title>贪吃蛇</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<h3 id="score">分数：0</h3>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const gridSize = 20;
const snake = [{x: 160, y: 160}, {x: 140, y: 160}, {x: 120, y: 160}];
let direction = 'right';
let food = {x: 80, y: 80};
let score = 0;
let gameOver = false;
function drawSnakePart(snakePart) {
ctx.fillStyle = 'lightgreen';
ctx.strokeStyle = 'darkgreen';
ctx.fillRect(snakePart.x, snakePart.y, gridSize, gridSize);
ctx.strokeRect(snakePart.x, snakePart.y, gridSize, gridSize);
}
function drawSnake() {
snake.forEach(drawSnakePart);
}
function moveSnake() {
const head = {x: snake[0].x, y: snake[0].y};
//根据方向生成新的蛇头位置
const width = canvas.width - gridSize
const height = canvas.height - gridSize
if (direction === 'right') head.x = head.x === width ? 0 : head.x + gridSize;
if (direction === 'left') head.x = head.x <= 0 ? width : head.x - gridSize;
if (direction === 'up') head.y = head.y <= 0 ? height : head.y - gridSize;
if (direction === 'down') head.y = head.y === height ? 0 : head.y + gridSize;
//根据蛇头位置判断是否和蛇身碰撞
const collision = snake.find(s => s.x === head.x && s.y === head.y)
if (collision) {
gameOver = true
showGameOver()
}
//将蛇头位置插入数组的首位
snake.unshift(head);
//判断蛇是否吃到食物，如果没吃到则从数组末尾删除一个以保持数组的总长不变
if (head.x === food.x && head.y === food.y) {
score += 10;
document.getElementById("score").innerHTML = "分数：" + score
createFood();
} else {
snake.pop();
}
}
function changeDirection(event) {
const keyPressed = event.keyCode;
const goingUp = direction === 'up';
const goingDown = direction === 'down';
const goingRight = direction === 'right';
const goingLeft = direction === 'left';
if (keyPressed === 37 && !goingRight) {
direction = 'left';
}
if (keyPressed === 38 && !goingDown) {
direction = 'up';
}
if (keyPressed === 39 && !goingLeft) {
direction = 'right';
}
if (keyPressed === 40 && !goingUp) {
direction = 'down';
}
}
function randomTen(min, max) {
return Math.round((Math.random() * (max - min) + min) / gridSize) * gridSize;
}
function createFood() {
food = {
x: randomTen(0, canvas.width - gridSize),
y: randomTen(0, canvas.height - gridSize)
};
}
function drawFood() {
ctx.fillStyle = 'red';
ctx.fillRect(food.x, food.y, gridSize, gridSize);
}
function clearCanvas() {
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function showGameOver() {
const h1 = document.createElement("h1")
const text = document.createTextNode("Game Over，按F5重新开始")
h1.appendChild(text)
document.body.appendChild(h1)
}
function gameLoop() {
if (gameOver) return
clearCanvas();
drawFood();
moveSnake();
drawSnake();
setTimeout(gameLoop, 100);
}
document.addEventListener('keydown', changeDirection);
gameLoop();
</script>
</body>
</html>功能简单，所以截图也简单。
原文地址：https://blog.csdn.net/Greentea107/article/details/144402129
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！