原生JavaScript实现贪吃蛇游戏

更新日期: 2024-04-23阅读: 1.9k标签: 游戏

创建JavaScript贪吃蛇游戏需要使用 HTML 制作结构,使用 CSS 制作样式,使用 JavaScript 制作游戏逻辑。下面是一个简单的贪吃蛇游戏示例:


HTML (index.html):

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snake Game</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="game-board"></div>
<script src="script.js"></script>
</body>
</html>


CSS (style.css):

#game-board {
display: grid;
grid-template-columns: repeat(20, 20px);
grid-template-rows: repeat(20, 20px);
}
.snake, .food {
width: 20px;
height: 20px;
}
.snake {
background-color: green;
}
.food {
background-color: red;
}


JavaScript (script.js):

document.addEventListener('DOMContentLoaded', () => {
const board = document.getElementById('game-board');
const gridSize = 20;
let snake = [{ x: 10, y: 10 }];
let food = getRandomPosition();

function draw() {
board.innerHTML = '';
drawSnake();
drawFood();
}

function drawSnake() {
snake.forEach(segment => {
const snakeElement = createGameElement('div', 'snake');
snakeElement.style.gridRowStart = segment.y;
snakeElement.style.gridColumnStart = segment.x;
board.appendChild(snakeElement);
});
}

function drawFood() {
const foodElement = createGameElement('div', 'food');
foodElement.style.gridRowStart = food.y;
foodElement.style.gridColumnStart = food.x;
board.appendChild(foodElement);
}

function createGameElement(tagName, className) {
const element = document.createElement(tagName);
element.className = className;
return element;
}

function getRandomPosition() {
return {
x: Math.floor(Math.random() * gridSize) + 1,
y: Math.floor(Math.random() * gridSize) + 1
};
}

function move() {
const head = { ...snake[0] };
switch (direction) {
case 'UP':
head.y--;
break;
case 'DOWN':
head.y++;
break;
case 'LEFT':
head.x--;
break;
case 'RIGHT':
head.x++;
break;
}

if (head.x === food.x && head.y === food.y) {
snake.push({});
food = getRandomPosition();
}

snake.unshift(head);
snake.pop();
}

function checkCollision() {
const head = snake[0];
return (
head.x < 1 || head.x > gridSize ||
head.y < 1 || head.y > gridSize ||
snake.slice(1).some(segment => segment.x === head.x && segment.y === head.y)
);
}

let direction = 'RIGHT';

window.addEventListener('keydown', event => {
switch (event.key) {
case 'ArrowUp':
direction = 'UP';
break;
case 'ArrowDown':
direction = 'DOWN';
break;
case 'ArrowLeft':
direction = 'LEFT';
break;
case 'ArrowRight':
direction = 'RIGHT';
break;
}
});

function gameLoop() {
move();
if (checkCollision()) {
alert('Game Over!');
snake = [{ x: 10, y: 10 }];
direction = 'RIGHT';
}
draw();
}

setInterval(gameLoop, 200);
});


这只是一个基本的实现方法,您还可以通过添加分数跟踪、增加难度或添加音效等功能来进一步增强它。

链接: https://www.fly63.com/article/detial/12710

如何使用SVG动画来制作游戏

在使用过一段时间的SVG动画之后,我相当清楚如何利用它来制作动画片段或者网页布局。一些动画库平台,例如Greensock,和原生的CSS动画简直是绝配。于是我便打算深入地研究一下,看看我能否用这些来制作一款简单的游戏

web游戏框架有哪些?_h5游戏开发引擎推荐

随着浏览器功能越来越强大,在网页端实现各种小游戏已经是家常便饭。微信小游戏出现后,游戏(特别是小型游戏)的开发已经进入了一个相当火爆的时期。那么作为一个普通的前端开发者,如何取选择一个合适的游戏开发框架来学习和提高开发效率呢?

three.js中物体旋转实践之房门的打开与关闭

看这篇博客,默认你已经知道了3D模型实现三维空间内旋转的实现方式(矩阵、欧拉角、四元数)。ok,下面正式切入主题,房门的打开和关闭,先上图:

js实现贪吃蛇小游戏

需要用到html、css、javascript 和 DOM 这些知识点就可以了。主要是js,其他只是一些基本的知识。js貌似也不是很难。但是问题就在这里,即使知识点都会了,但是还是无法综合运用把东西做出来

JS实现贪吃蛇

贪吃蛇游戏是一款经典的益智游戏,有PC和手机等多平台版本。既简单又耐玩。该游戏通过控制蛇头方向吃蛋,从而使得蛇变得越来越长。下面使用js来实现贪吃蛇的游戏

JS实现俄罗斯方块

《俄罗斯方块》的基本规则是移动、旋转和摆放游戏自动输出的各种方块,使之排列成完整的一行或多行并且消除得分。 下面使用js来实现俄罗斯方块

HTML5+Js实现拼图小游戏

当时初学游戏开发,经验浅薄,所以没有好好专研游戏里的算法和代码的缺陷,导致游戏出现了很多bug,甚至拼图打乱后很可能无法复原。最近经常有朋友问起这个游戏,希望我能把代码里的bug改一下方便初学者学习

html5游戏引擎有哪些?如何选择

如果您是游戏开发人员,并且正在寻找JavaScript和HTML5无缝协作的游戏引擎。 虽然市场上有很多免费和付费的游戏引擎,但一款让专业游戏开发者满意的游戏引擎,必须包含独特的东西

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!