使用原生JS实现简单版的网页小游戏-贪吃蛇

今天给大家分享一个游戏，用我们所熟悉的JS实现一个贪吃蛇小游戏，自娱自乐一下

首先先整理一下思路：
点击开始游戏   startpage消失   游戏开始
随机出现食物，出现三节蛇开始运动
上下左右    改变方向运动
判断吃到食物   食物消失，蛇加一
判读游戏结束，弹出框

如下图中的一些效果：

接下我们用我们所熟悉的JS实现贪吃蛇小游戏
首先我们基本HTML页面：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>贪吃蛇</title><link rel="stylesheet" href="css/demo.css">
</head>
<body>  <!-- 开始层 --><div class="startpage" id="startPage"><div class="startBtn" id="startBtn">开始游戏</div></div><!-- 游戏层 --><div class="wrapper"><!-- 开始按钮 --><div class="left-side"><span id="startP">开始</span></div><div class="main"><div class="header"><div class="score">分数：<span id="score">0</span></div></div><div class="content" id="content"></div></div></div><!-- 游戏结束层 --><div class="loser" id="lose"><div class="con"><span class="goal">当前得分</span><div class="close" id="close">×</div><span class="loserScore" id="loserScore"></span></div></div><script src="js/demo.js"></script>
</body>
</html>

这里页面我们就不多说，相信大家都能看懂；
然后我们是好看的样式CSS：（这里我只是用了一些色块，大家可以用一些好看的图片）


*{margin: 0;padding: 0;
}/* 开始层 */
.startPage{width: 100%;z-index: 999;height: 1000px;position: absolute;top: 0;left: 0;/* display: none; */
}/* 开始按钮 */
.startBtn{width: 200px;height: 60px;z-index: 998;background-color: #008c8c;cursor: pointer;position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;text-align: center;line-height: 60px;color: #fff;font-size: 24px;border-radius: 5px;
}/* 游戏层 */
.wrapper{width: 100%;height: 1000px;/* background-color: #fefefe; */position: relative;
}/* 游戏左边区域 */
.left-side{width: 24%;position: absolute;height: 1000px;/* border-right: 1px solid #000;  */
}/* 开始，暂停按钮 */
.left-side span{width: 100px;height: 100px;background-color: #008c8c;border-radius: 50%;text-align: center;line-height: 100px;color: #fff;margin-left: 100px;margin-top: 100px;display: none;
}/* 游戏界面 */
.main {position: absolute;left: 25%;width: 50%;height: 90%;/* border:1px solid #000; */
}/* 游戏界面顶部 */
.header{width: 100%;height: 80px;text-align: center;
}/* 分数 */
.score{line-height: 80px;color: #999;font-size: 20px;font-weight: bolder;
}/* 游戏区域 */
.content{position: absolute;width: 79.5%;height: 36.5%;left: 10%;top: 34%;/* border: 1px solid #f40; */background-color: #000;
}/* 弹出层 */
.loser{display: none;position: 100%;height: 1000px;top: 0;left: 0;
}/* 弹出框 */
.con{background-color: #008c8c;height: 300px;width: 400px;position: absolute;margin: auto;left: 0;top: 0;right: 0;bottom: 0;border-radius: 20px;
}/* 弹出框说明 */
.con .goal{width: 400px;height: 50px;position: absolute;top: 10px;left: 0;text-align: center;line-height: 50px;font-size: 30px;color: #fff;
}/* 游戏得分 */
.loserScore{display: block;height: 30px;width: 40px;position: absolute;top: 42%;left: 40%;color: #222;font-size: 30px;font-weight: bold;
}/* 弹出框关闭按钮 */
.close{position: absolute;top: 0;right: 0;height: 40px;width: 40px;background-color: #999;border-radius: 50px;margin: 5px;text-align: center;line-height: 40px;font-size: 30px;color: #fff;cursor: pointer;
}/* 食物 */
.food{background-color: #f40;border-radius: 50px;
}/* 蛇的头部 */
.head{background-color: #f0f;border-radius: 50px;
}/* 蛇的身体 */
.body{background-color: #ff0;border-radius: 50px;
}

接下来是我们最重要的JS部分
在这里补充一点：
如果大家使用的是VScode编辑器，大家可以装一个插件：Document This（添加注释块）

Document This
添加注释块  连续两次Ctrl+alt+d  出现如下注释/*** @class App* @extends {Component}*/
注意如有热键冲突，记得将热键冲突关闭


//思路：
//点击开始游戏   startpage消失   游戏开始
//随机出现食物，出现三节蛇开始运动
//上下左右    改变方向运动
//判断吃到食物   食物消失，蛇加一
//判读游戏结束，弹出框var content = document.getElementById('content')
var startPage = document.getElementById('startPage')
var scoreBox = document.getElementById('score')
var lose = document.getElementById('lose')
var loserScore = document.getElementById('loserScore')
var close = document.getElementById('close')
var startP = document.getElementById('startP')
var startBtn = document.getElementById("startBtn")
var snakeMove;
var speed = 200;
var startGameBool = true;
var startPaushBool = true;
init();/*** 存放初始化的参数* 这里我们设置一个初始化函数，存放一些初始化的参数*/
function init() {//地图this.mapW = parseInt(getComputedStyle(content).width);this.mapH = parseInt(getComputedStyle(content).height);this.mapDiv = content;//食物的坐标this.foodW = 20;this.foodH = 20;this.foodX = 0;this.foodY = 0;//蛇的坐标this.snakeW = 20;this.snakeH = 20;this.snakeBody = [[3, 1, 'head'], [2, 1, 'body'], [1, 1, 'body']];// this.snakeBody = [[4, 3, 'head'], [3,3, 'body'], [3, 2, 'body']];//游戏属性  上下左右this.direct = 'right';this.left = false;this.right = false;this.up = true;this.down = true;this.score = 0;bindEvent();
}function startGame() {startPage.style.display = 'none'startP.style.display = 'block'food();snake();
}/*** 随机生成食物* 在画布内随机位置生成一个食物（小圆点）*/
function food() {var food = document.createElement('div');food.style.width = this.foodW + 'px';food.style.height = this.foodH + 'px';food.style.position = 'absolute';this.foodX = Math.floor(Math.random() * (this.mapW / 20));this.foodY = Math.floor(Math.random() * (this.mapH / 20));food.style.left = this.foodX * 20 + 'px';food.style.top = this.foodY * 20 + 'px';this.mapDiv.appendChild(food).setAttribute('class', 'food')
}/*** 出现一条蛇*/
function snake() {for (var i = 0; i < this.snakeBody.length; i++) {var snake = document.createElement('div');snake.style.width = this.snakeW + 'px';snake.style.height = this.snakeH + 'px';snake.style.position = 'absolute';snake.style.left = this.snakeBody[i][0] * 20 + 'px';snake.style.top = this.snakeBody[i][1] * 20 + 'px';snake.classList.add(this.snakeBody[i][2]);this.mapDiv.appendChild(snake).classList.add('snake');//判断蛇头自身的方向// 这里是判断用图片的情况下的，如果大家使用的也是色块，大家可以吧这一块去掉switch (this.direct) {case 'right':break;case 'up':snake.style.transform = 'rotate(270deg)'break;case 'left':snake.style.transform = 'rotate(180deg)'break;case 'down':snake.style.transform = 'rotate(90deg)'break;default:break;}}
}/*** 默认运动轨迹*/
function move() {for (var i = this.snakeBody.length - 1; i > 0; i--) {this.snakeBody[i][0] = this.snakeBody[i - 1][0];this.snakeBody[i][1] = this.snakeBody[i - 1][1];}// 假设已经运动，存放方向switch (this.direct) {case 'right':this.snakeBody[0][0] += 1;break;case 'up':this.snakeBody[0][1] -= 1;break;case 'left':this.snakeBody[0][0] -= 1;break;case 'down':this.snakeBody[0][1] += 1;break;default:break;}removeClass('snake');snake();if (this.snakeBody[0][0] == this.foodX && this.snakeBody[0][1] == this.foodY) {//吃到食物后自身数量加一var snakeEndX = this.snakeBody[this.snakeBody.length - 1][0];var snakeEndY = this.snakeBody[this.snakeBody.length - 1][1];switch (this.direct) {case 'right':this.snakeBody.push([snakeEndX + 1, snakeEndY, 'body']);break;case 'up':this.snakeBody.push([snakeEndX, snakeEndY - 1, 'body']);break;case 'left':this.snakeBody.push([snakeEndX - 1, snakeEndY, 'body']);break;case 'down':this.snakeBody.push([snakeEndX, snakeEndY + 1, 'body']);break;default:break;}//吃到食物this.score += 1;scoreBox.innerHTML = this.score;removeClass('food');food();}if (this.snakeBody[0][0] < 0 || this.snakeBody[0][0] >= this.mapW / 20) {// console.log(1)relodGame();}if (this.snakeBody[0][1] < 0 || this.snakeBody[0][1] >= this.mapH / 20) {// console.log(1)relodGame();}var snakeHX = this.snakeBody[0][0];var snakeHY = this.snakeBody[0][1];for (var i = 1; i < this.snakeBody.length; i++) {if (snakeHX == snakeBody[i][0] && snakeHY == snakeBody[i][1]) {// console.log(111)relodGame();}}
}/*** 游戏结束，初始化游戏* 碰撞墙壁时，超出画布范围，重新开始游戏*/
function relodGame() {removeClass('snake');removeClass('food');clearInterval(snakeMove);//清除定时器//默认坐标this.snakeBody = [[3, 1, 'head'], [2, 1, 'body'], [1, 1, 'body']];this.direct = 'right';this.left = false;this.right = false;this.up = true;this.down = true;lose.style.display = 'block';//弹出框loserScore.innerHTML = this.score;//弹出框内容更改this.score = 0;scoreBox.innerHTMl = this.score;//顶部分数//重新开始游戏startGameBool = true;startPaushBool = true;startP.innerHTML = '开始'
}/*** 删除具有className 的元素* @param {*} className */
function removeClass(className) {var ele = document.getElementsByClassName(className);while (ele.length > 0) {ele[0].parentNode.removeChild(ele[0]);}
}/*** 判断上下左右方向* @param {*} code */
function setDerict(code) {//判断游戏中，上下左右方向switch (code) {case 37:if (this.left) {this.direct = 'left';this.left = false;this.right = false;this.up = true;this.down = true;}break;case 38:if (this.up) {this.direct = 'up';this.left = true;this.right = true;this.up = false;this.down = false;}break;case 39:if (this.right) {this.direct = 'right';this.left = false;this.right = false;this.up = true;this.down = true;}break;case 40:if (this.down) {this.direct = 'down';this.left = true;this.right = true;this.up = false;this.down = false;}break;default:break;}
}/*** 监听页面*/
function bindEvent() {//弹出框关闭按钮uclose.onclick = function () {lose.style.display = 'none'}//开始游戏按钮startBtn.onclick = function () {startAddPaush();}//暂停，开始按钮startP.onclick = function () {startAddPaush();}
}/*** 执行游戏*/
function startAddPaush() {if (startPaushBool) {if (startGameBool) {startGame();startGameBool = false;}startP.innerHTML = '暂停';document.onkeydown = function (e) {var code = e.keyCode;setDerict(code);}snakeMove = setInterval(function () {move()}, speed)startPaushBool = false;} else {startP.innerHTML = '开始';clearInterval(snakeMove);document.onkeydown = function (e) {e.returnValue = false;return false;}startPaushBool = true;}
}

这里给他们准备了一份源码，地址如下：
https://github.com/Janesuyue/Gluttonous-Snake

在本地下拉仓库即可；
clone https://github.com/Janesuyue/Gluttonous-Snake.git

使用原生JS实现简单版的网页小游戏-贪吃蛇相关推荐

原生html小游戏,原生JS实现别踩白块小游戏（一）
对于前端开发人员来说,闲暇之余自己开发个小游戏打发时间,也是对自己基础技术的一种应用考验.那么别踩白块小游戏,相信大家并不陌生,这个小游戏我们可以通过原生js来实现,即便是前端初学者也可以轻松完成. ...
别踩白块html源码,原生JS实现别踩白块小游戏（七）
在前面的文章<原生JS实现别踩白块小游戏(六)>中,为大家介绍了实现别踩白块小游戏的js代码中移动效果的方法概述. 下面我们就继续结合源代码中js代码部分,为大家介绍具体的实现方法. 相关 ...
用pygame做一个简单的python小游戏---贪吃蛇
用pygame做一个简单的python小游戏-贪吃蛇贪吃蛇游戏博客链接:(方法一样,语言不一样) c++贪吃蛇:https://blog.csdn.net/weixin_46791942/artic ...
做一个简单的java小游戏--贪吃蛇
做一个简单的java小游戏–贪吃蛇贪吃蛇游戏博客链接:(方法一样,语言不一样) c++贪吃蛇:https://blog.csdn.net/weixin_46791942/article/detail ...
JAVA练习小游戏——贪吃蛇小游戏 PLUS版
目录基础版本新增内容 1.添加START开始界面 2.新增背景音乐 3.添加SCORE计分 4.新增游戏机制代码实现实机演示基础版本 JAVA练习小游戏--贪吃蛇小游戏_timberman6 ...
原生 JS 实现别踩方块儿小游戏 - 超简单
古之立大事者,不惟有超世之才,亦必有坚忍不拔之志.--苏轼案例效果原生 JavaScript 实现的别踩方块小游戏案例效果如下所示: 案例分析静态页面将这个静态页面可以划分为四个部分,如下图 ...
canvas+js实现简单的数字华容道小游戏
数字华容道是个很简单的小游戏,今天就尝试使用canvas+js做个简单的数字华容道小游戏.有关于游戏的具体规则请上网查阅. 一如既往先写个html页面,这里我把游戏的界面水平居中了,这里预留了一个动画 ...
JS自制简易版数字华容道小游戏
最近复习了下前端基础知识HTML+JS(是真的非常基础那种,久不用,基本忘完了). 复习了一小部分内容,闲暇之余打算利用刚复习的js基础知识做个小游戏,刚好手机上下载的游戏集中就有一个数字益智游戏-- ...
【原生JS】做一个打字消除小游戏，学习摸鱼两不误
JS打字消除小游戏话不多说先看效果! 页面布局: CSS样式: JS文件(重点): 话不多说先看效果! JS打字消除游戏页面布局: <!DOCTYPE html> <html&g ...

使用原生JS实现简单版的网页小游戏-贪吃蛇

使用原生JS实现简单版的网页小游戏-贪吃蛇相关推荐

最新文章

热门文章