十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这篇文章主要为大家展示了js如何实现简单贪吃蛇游戏,内容简而易懂,希望大家可以学习一下,学习完之后肯定会有收获的,下面让小编带大家一起来看看吧。
成都创新互联公司主要为客户提供服务项目涵盖了网页视觉设计、VI标志设计、全网整合营销推广、网站程序开发、HTML5响应式成都网站建设、手机网站制作、微商城、网站托管及网页维护、WEB系统开发、域名注册、国内外服务器租用、视频、平面设计、SEO优化排名。设计、前端、后端三个建站步骤的完善服务体系。一人跟踪测试的建站服务标准。已经为成都软装设计行业客户提供了网站营销服务。
上下左右键控制方向使贪吃蛇吃葡萄
吃5个葡萄,游戏结束时左上角为总得分。
运行结果:
界面和css代码这里就不加赘述了,主要贴js代码(加了注释):
var config = { width: 20, //一个格子的宽度 height: 20, //一个格子的高度 tr: 30, //行数 td: 30 //列数 } var snake = null, //Snake的实例 food = null, //Food的实例 game = null; //游戏的实例 //我们把蛇移动的整个区域设置成一个具有30列30行的网格坐标 //方块(格子)坐标位置 /** 0,0 (0,0) 20,0 (1,0) 40,0 (2,0) */ function Square(x, y, className) { this.x = x*config.width; this.y = y*config.height; this.className = className; this.contentDom = document.createElement('div');//该位置的方块对应的DOM元素 this.contentDom.className = this.className; this.parent = document.getElementsByClassName("innerSnake")[0]; } Square.prototype.create = function() { //创建方块并添加到页面 this.contentDom.style.position = 'absolute'; this.contentDom.style.width = config.width + 'px'; this.contentDom.style.height = config.height + 'px'; this.contentDom.style.left = this.x + 'px'; this.contentDom.style.top = this.y + 'px'; this.parent.appendChild(this.contentDom); }; Square.prototype.remove = function() { //移除方块 this.parent.removeChild(this.contentDom); }; //蛇 function Snake() { this.head = null; //蛇头 this.tail = null; //蛇尾 this.pos = []; //二维数组,存储蛇身上每个节点(方块) this.directionKey = { //存储蛇走的方向 left: { //往左走 x: -1, //横坐标减1,一个坐标表示一个格子 y: 0, //纵坐标不变 rotate: 90 }, right: { //往右走 x: 1, y: 0, rotate: -90 }, up: { //往上走 x: 0, y: -1, rotate: 180 }, down: { //往下走 x: 0, y: 1, rotate: 0 //蛇头图片方向,顺时针为正 } } } Snake.prototype.init = function() { //初始化蛇 //蛇头 var snakeHead = new Square(2,0,"head"); snakeHead.create(); //将蛇头添加到界面 this.head = snakeHead; //存储蛇头信息 this.pos.push([2,0]); //存储蛇头坐标 //蛇的第1节身体 var snakeBody1 = new Square(1,0,"body"); snakeBody1.create(); //将蛇的第一节身体添加到界面 this.pos.push([1,0]); //蛇的尾巴 var snakeTail = new Square(0,0,"body"); snakeTail.create(); //将蛇尾添加到界面 this.tail = snakeTail; //存储蛇尾信息 this.pos.push([0,0]); //形成链表关系 snakeHead.prev = null; //蛇头的前面没有元素,指向null snakeHead.next = snakeBody1; //蛇头的后面有一节身体,其.next指针指向后面那节身体 snakeBody1.prev = snakeHead; //蛇的第一节身体,.prev指向前面的蛇头snakeHead snakeBody1.next = snakeTail; //蛇的第一节身体,.next指向后面的身体,此时是蛇尾snakeTail snakeTail.prev = snakeBody1; //蛇尾,.prev指向前面的蛇身体snakeBody1 snakeTail.next = null; //蛇尾后面没有元素,指向Null //初始蛇的走向,后面想改变蛇的走向即改变this.direction this.direction = this.directionKey.right; //默认向右走 }; //获取蛇头下一个位置对应的元素,根据元素做下一个动作 Snake.prototype.getNextPos = function() { var nextPos = [ //获取蛇头走的下一个点的坐标 this.head.x / config.width + this.direction.x, this.head.y / config.height + this.direction.y ]; //判断下一个点是自己or食物or围墙or无障碍? var self = false; //设置下一个点是否是自己 this.pos.forEach(function(val) { //val即二位数组中的一个坐标 if(val.toString() === nextPos.toString()) { //下一个坐标等于蛇全部身体的一个,即下一个点是自己 self = true; } }); if(self) { // console.log('撞到自己了!'); this.collide.end.call(this); //game over return; } else if(nextPos[0] < 0 || nextPos[1] < 0 || nextPos[0] > config.td-1 || nextPos[1] > config.tr-1) { // console.log('撞到墙壁了!'); this.collide.end.call(this); //game over return; } else if (food && food.pos[0] === nextPos[0] && food.pos[1] === nextPos[1]) { console.log('撞到食物了!'); this.collide.eat.call(this); } else { // console.log('啥都没遇到!'); this.collide.move.call(this, false); //注意:.call(this)重新设置this指向,使其指向当前实例对象Snake } }; //处理碰撞后的事件 Snake.prototype.collide = { /* 碰到自己or墙壁,游戏结束end(); 碰到食物,eat(); 啥都没遇到,move(); */ move: function(isEat) { //isEat 是否吃了食物,不是则删除蛇尾 /* 掐头去尾: create新蛇头,remove旧蛇头; create一个新身体,放在(替代)旧蛇头的位置; remove蛇尾,蛇尾prev的元素变成新蛇尾 */ var x = this.head.x / config.width + this.direction.x, y = this.head.y / config.height + this.direction.y; //声明一个新身体 var newBody = new Square(this.head.x/config.width, this.head.y/config.height, "body"); //更新链表关系 newBody.next = this.head.next; newBody.next.prev = newBody; newBody.prev = null; this.head.remove(); //删除旧蛇头 newBody.create(); //添加蛇身体,替代在旧蛇头位置 //声明一个新蛇头(下一个走的点) var newHead = new Square(x, y, "head"); //更新链表关系 newHead.prev = null; newHead.next = newBody; newBody.prev = newHead; this.pos.unshift([x, y]); //更新蛇节点的坐标this.pos this.head = newHead; //更新this.head的信息 newHead.contentDom.style.transform = `rotate(${this.direction.rotate}deg)` newHead.create(); //添加蛇头 //删除蛇尾:吃食物则不删 if(!isEat) { //没有吃食物,删除蛇尾 this.tail.remove(); this.tail = this.tail.prev; this.pos.pop(); //更新蛇节点坐标 } // console.log(this.pos); //打印数组,验证 }, eat: function() { this.collide.move.call(this, true); //传参true,表示此时为吃操作 food.remove(); //删除被吃掉的食物 game.score ++; //记录分数 createFood(); //此时再随机产生一个食物 }, end: function() { console.log('end'); game.gameOver(); } } snake = new Snake(); //创建食物 function createFood() { var x = null, y = null; var include = true; //表示食物的位置是否在蛇身上 var random = function(max, min) { //产生一个随机数 return Math.floor(Math.random()*(max - min + 1)) }; while(include) { x = random(config.tr - 1, 0); y = random(config.td - 1, 0); snake.pos.forEach(function(val) { if(x != val[0] && y != val[1]) { include = false; } }); } //生成食物 food = new Square(x, y, "food"); food.pos = [x, y]; //记录食物坐标 food.create(); } //游戏逻辑 function Game() { this.score = 0; //分数 this.timer = null; //计时器 } Game.prototype.init = function() { snake.init(); // snake.getNextPos(); //获取下一个点坐标 createFood(); document.onkeydown = function(event) { if(event.which == 37 && snake.direction != snake.directionKey.right) { //鼠标左键,蛇不能是正在往右走 snake.direction = snake.directionKey.left; } else if (event.which == 38 && snake.direction != snake.directionKey.down) { //鼠标上键 snake.direction = snake.directionKey.up; } else if (event.which == 39 && snake.direction != snake.directionKey.left) { //鼠标右键 snake.direction = snake.directionKey.right; } else if (event.which == 40 && snake.direction != snake.directionKey.up) { //鼠标下键 snake.direction = snake.directionKey.down; } } this.start(); }; game = new Game(); //开始游戏 Game.prototype.start = function() { this.timer = setInterval(function() { snake.getNextPos(); //获取下一个坐标点,做下一步动作 }, 200); }; //游戏结束 Game.prototype.gameOver = function() { console.log("gameOver"); clearInterval(this.timer); var gameOver = document.querySelector('.gameOver'); var gameScore = document.querySelector('.gameOver .score'); gameOver.style.display = 'block'; //显示游戏结束界面 gameScore.innerHTML = `${this.score}`; //将分数记入该界面 }; //开启游戏 function startGame() { var startBtn = document.querySelector('.btn button'); var snakeWrap = document.querySelector('.snakeWrap'); startBtn.onclick = function() { startBtn.parentNode.style.display = 'none'; //隐藏开始游戏界面 snakeWrap.style.display = 'block'; //显示进入游戏的界面 game.init(); } } startGame();
主要用到链表数据结构
以上就是关于js如何实现简单贪吃蛇游戏的内容,如果你们有学习到知识或者技能,可以把它分享出去让更多的人看到。