js编写贪吃蛇游戏
前端手写贪吃蛇游戏
贪吃蛇游戏 场景 使用了js 和 html /css 就可以完成 一个贪吃蛇小游戏
技术分析
主要用到的几个技术点:
- clientWidth :元素的宽度,包含内边距
- clientHeight :元素的高度,包含内边距
- setInterval:开启定时器
- clearInterval:关闭定时器
- keydown:键盘事件
- createElement : 创建节点
首先需要一个背景板 需要吧蛇和食物 在指定内容里 不能超出
接下来就是蛇的移动 使用定时间一秒移动一格
食物就是根据计算随机生成
当蛇和食物的位置重叠了就可以认为蛇吃到了食物
当蛇的x,y 大于元素的宽度/高度,就认为碰到了墙壁直接ov
源码
HTML
<div id="game-board"></div>
JS
<script>
const gameBoard = document.getElementById("game-board");
let snake = [{ x: 0, y: 0 }];
let food = { x: 0, y: 0 };
let direction = "right";
function createSnake() {
for (let segment of snake) {
const snakeSegment = document.createElement("div");
snakeSegment.className = "snake";
snakeSegment.style.left = segment.x "px";
snakeSegment.style.top = segment.y "px";
gameBoard.appendChild(snakeSegment);
}
}
function createFood() {
const maxX = gameBoard.clientWidth - 20;
const maxY = gameBoard.clientHeight - 20;
food.x = Math.floor(Math.random() * maxX);
food.y = Math.floor(Math.random() * maxY);
const foodElement = document.createElement("div");
foodElement.className = "food";
foodElement.style.left = food.x "px";
foodElement.style.top = food.y "px";
gameBoard.appendChild(foodElement);
}
function updateGame() {
const snakeHead = { x: snake[0].x, y: snake[0].y };
// Move the snake
if (direction === "right") snakeHead.x = 20;
else if (direction === "left") snakeHead.x -= 20;
else if (direction === "up") snakeHead.y -= 20;
else if (direction === "down") snakeHead.y = 20;
// Check for collision with food
if (snakeHead.x === food.x && snakeHead.y === food.y) {
snake.push({ x: snakeHead.x, y: snakeHead.y });
const foodElement = document.querySelector(".food");
foodElement.remove();
createFood();
}
// Remove the tail segment
snake.pop();
// Check for collision with walls or itself
if (
snakeHead.x < 0 ||
snakeHead.x >= gameBoard.clientWidth ||
snakeHead.y < 0 ||
snakeHead.y >= gameBoard.clientHeight
) {
clearInterval(gameInterval);
alert("Game Over!");
return;
}
for (let segment of snake) {
if (segment.x === snakeHead.x && segment.y === snakeHead.y) {
clearInterval(gameInterval);
alert("Game Over!");
return;
}
}
// Update the snake on the game board
snake.unshift({ x: snakeHead.x, y: snakeHead.y });
const snakeSegments = document.querySelectorAll(".snake");
for (let i = 0; i < snakeSegments.length; i ) {
snakeSegments[i].style.left = snake[i].x "px";
snakeSegments[i].style.top = snake[i].y "px";
}
}
createSnake();
createFood();
const gameInterval = setInterval(updateGame, 150);
document.addEventListener("keydown", (event) => {
if (event.key === "ArrowRight" && direction !== "left") direction = "right";
else if (event.key === "ArrowLeft" && direction !== "right") direction = "left";
else if (event.key === "ArrowUp" && direction !== "down") direction = "up";
else if (event.key === "ArrowDown" && direction !== "up") direction = "down";
});
</script>
CSS
<style>
#game-board {
width: 300px;
height: 300px;
border: 1px solid black;
position: relative;
}
.snake {
width: 20px;
height: 20px;
background-color: green;
position: absolute;
}
.food {
width: 20px;
height: 20px;
background-color: red;
position: absolute;
}
</style>
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgkacbb
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13