用JS实现贪吃蛇游戏用JS实现贪吃蛇游戏

本文实例为大家分享了JS实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下
效果图：

文章图片

完整代码如下：
html：

Document - 锐客网

css：

.content {position: relative; width: 640px; height: 640px; margin: 100px auto; } .btn {width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: black; opacity: .1; z-index: 2; } .btn button {background: none; border: none; background-size: 100% 100%; cursor: pointer; outline: none; position: absolute; left: 50%; top: 50%; } .startBtn button {width: 200px; height: 80px; background-image: url(../贪吃蛇/img/btn.gif); margin-left: -100px; margin-top: -40px; } .pauseBtn {display: none; } .pauseBtn button {width: 70px; height: 70px; background-image: url(../贪吃蛇/img/btn4.png); margin-left: -35px; margin-top: -35px; } #snakeWrap {width: 600px; height: 600px; background-color: pink; border: 20px solid purple; position: relative; } /* #snakeWrap div {width: 20px; height: 20px; } */ .snakeHead {background-image: url(../贪吃蛇/img/snake.png); background-size: cover; } .snakeBody {background-color: rgb(85, 146, 126); border-radius: 50%; } .food {background-image: url(../贪吃蛇/img/草莓.png); background-size: cover; }

js：

window.addEventListener('load', function() {// 声明方块的宽高，行数和列数var sw = 20,sh = 20,tr = 30,td = 30; var snake = null, //蛇的实例food = null, //食物的实例game = null; //游戏的实例 function Square(x, y, classname) {this.x = sw * x; this.y = sh * y; this.class = classname; this.viewContent = document.createElement('div'); //方块对应的DOM元素this.viewContent.className = this.class; this.parent = document.getElementById('snakeWrap'); //方块的父级}//创建方块DOM，并添加到页面里Square.prototype.create = function() {this.viewContent.style.position = 'absolute'; this.viewContent.style.width = sw + 'px'; this.viewContent.style.height = sh + 'px'; this.viewContent.style.left = this.x + 'px'; this.viewContent.style.top = this.y + 'px'; this.parent.appendChild(this.viewContent); }; Square.prototype.remove = function() {this.parent.removeChild(this.viewContent); }; //蛇function Snake() {this.head = null //存蛇头的信息this.tail = null //存蛇尾的信息this.pos = []; //存蛇身上每个方块的位置 //存储蛇走的方向，用一个对象来表示this.directionNum = {left: {x: -1,y: 0,rotate: 180},right: {x: 1,y: 0,rotate: 0},up: {x: 0,y: -1,rotate: -90},down: {x: 0,y: 1,rotate: 90}}; }//初始化Snake.prototype.init = function() {//创建蛇头var snakeHead = new Square(2, 0, 'snakeHead'); snakeHead.create(); this.head = snakeHead; //存储蛇头信息this.pos.push([2, 0]); //把蛇头的位置存起来 //创建蛇身体1var snakeBody1 = new Square(1, 0, 'snakeBody'); snakeBody1.create(); this.pos.push([1, 0]); //把蛇身1的坐标存起来 //创建蛇身体2var snakeBody2 = new Square(0, 0, 'snakeBody'); snakeBody2.create(); this.tail = snakeBody2; //把蛇尾的信息存起来this.pos.push([0, 0]); //把蛇身1的坐标存起来 //形成链表关系snakeHead.last = null; snakeHead.next = snakeBody1; snakeBody1.last = snakeHead; snakeBody1.next = snakeBody2; snakeBody2.last = snakeBody1; snakeBody2.next = null; //给蛇添加一条属性，用来表示蛇的走向this.direction = this.directionNum.right; //默认让蛇往右走}; //该方法用来获取蛇头的下一个位置对应的元素，要根据元素做不同的事情Snake.prototype.getNextPos = function() {var nextPos = [ //蛇头要走的下一个点的坐标this.head.x / sw + this.direction.x,this.head.y / sh + this.direction.y]; // console.log(nextPos[0]); //下个点是自己，游戏结束var selfCollied = false; //是否撞到自己，默认是否//value表示数组中的某一项this.pos.forEach(function(value) {// console.log(nextPos[0], value[0]); if (value[0] == nextPos[0] && value[1] == nextPos[1]) {selfCollied = true; // console.log(2); }}); if (selfCollied) {console.log('撞到自己了!'); this.strategies.die.call(this); return; } // 下个点是墙，游戏结束if (nextPos[0] < 0 || nextPos[1] < 0 || nextPos[0] > td - 1 || nextPos[1] > tr - 1) {console.log('撞墙!'); this.strategies.die.call(this); return; } // 下个点是食物，吃if (food && food.pos[0] == nextPos[0] && food.pos[1] == nextPos[1]) {//如这条件成立，说明蛇头走的下一点是食物的点console.log('撞到食物了'); this.strategies.eat.call(this); return; } // 下个点什么都不是，继续走this.strategies.move.call(this); }; // 处理碰撞后要做的事Snake.prototype.strategies = {move: function(format) { //format这个参数用于决定要不要删除最后一个方块（蛇尾）,当传了这个参数就表示要做的事情是吃//创建新身体（在旧蛇头的位置） var newBody = new Square(this.head.x / sw, this.head.y / sh, 'snakeBody'); //更新链表的关系newBody.next = this.head.next; newBody.next.last = newBody; newBody.last = null; //把旧蛇头从原来的位置删除this.head.remove(); newBody.create(); //创建新的蛇头（蛇头下一个要走到的点nextPos）var newHead = new Square(this.head.x / sw + this.direction.x, this.head.y / sh + this.direction.y, 'snakeHead'); //更新链表关系newHead.next = newBody; newHead.last = null; newBody.last = newHead; newHead.viewContent.style.transform = 'rotate(' + this.direction.rotate + 'deg)'; newHead.create(); //蛇身上的每一个方块的坐标也要更新this.pos.splice(0, 0, [this.head.x / sw + this.direction.x, this.head.y / sh + this.direction.y])this.head = newHead; //还要把this.head的信息更新一下 if (!format) { //如果format的值为false，表示需要删除（除了吃之外的操作）this.tail.remove(); this.tail = this.tail.last; this.pos.pop(); }},eat: function() {this.strategies.move.call(this, true); createFood(); game.score++; },die: function() {// console.log('die'); game.over(); }} snake = new Snake(); //创建食物function createFood() {//食物小方块的随机坐标 var x = null; var y = null; var include = true; //循环跳出的条件，true表示食物坐标在蛇身上。（需要继续循环）false表示食物的坐标不再蛇身上（不用继续循环）while (include) {x = Math.round(Math.random() * (td - 1)); y = Math.round(Math.random() * (tr - 1)); snake.pos.forEach(function(value) {if (x != value[0] && y != value[1]) {//这个条件成立说明现在随机出来的这个坐标，在蛇身上没有找到。include = false; }}); } //生成食物food = new Square(x, y, 'food'); //存储生成食物的坐标，用于跟蛇头要走的下一坐标对比food.pos = [x, y]; var foodDom = document.querySelector('.food'); if (foodDom) {foodDom.style.left = x * sw + 'px'; foodDom.style.top = y * sh + 'px'; } else {food.create(); } }//创建游戏逻辑function Game() {this.timer = null; this.score = 0; }Game.prototype.init = function() {snake.init(); // snake.getNextPos(); createFood(); var flag = true; document.onkeydown = function(ev) {//当蛇在往右走，不能按左键if (ev.which == 37 && snake.direction != snake.directionNum.right) {if (flag) {flag = false; setTimeout(function() {snake.direction = snake.directionNum.left; flag = true; }, 150)} } else if (ev.which == 38 && snake.direction != snake.directionNum.down) {if (flag) {flag = false; setTimeout(function() {snake.direction = snake.directionNum.up; flag = true; }, 150)}} else if (ev.which == 39 && snake.direction != snake.directionNum.left) {if (flag) {flag = false; setTimeout(function() {snake.direction = snake.directionNum.right; flag = true; }, 150)}} else if (ev.which == 40 && snake.direction != snake.directionNum.up) {if (flag) {flag = false; setTimeout(function() {snake.direction = snake.directionNum.down; flag = true; }, 150)}}}this.start(); }; //开始游戏Game.prototype.start = function() {this.timer = setInterval(function() {snake.getNextPos(); }, 150); }; //暂停游戏Game.prototype.pause = function() {clearInterval(this.timer); }; //游戏结束Game.prototype.over = function() {clearInterval(this.timer); alert('你的得分为' + this.score); //游戏回到初始状态var snakeWrap = document.getElementById('snakeWrap'); snakeWrap.innerHTML = ''; snake = new Snake(); game = new Game(); var startBtnWrap = document.querySelector('.startBtn'); startBtnWrap.style.display = 'block'; }; //开启游戏game = new Game(); var startBtn = document.querySelector('.startBtn button'); console.log(startBtn); startBtn.onclick = function() {startBtn.parentNode.style.display = 'none'; game.init(); }; //暂停游戏var snakeWrap = document.getElementById('snakeWrap'); console.log(snakeWrap); var pauseBtn = document.querySelector('.pauseBtn button'); console.log(pauseBtn); snakeWrap.onclick = function() {game.pause(); pauseBtn.parentNode.style.display = 'block'; console.log(123); }; pauseBtn.onclick = function() {game.start(); pauseBtn.parentNode.style.display = 'none'; }})

【用JS实现贪吃蛇游戏】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。