JS实现贪吃蛇游戏

时间：2021-05-26

本文实例为大家分享了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"> <link rel="stylesheet" href="./css/index.css" rel="external nofollow" > <title>贪吃蛇小游戏</title></head><body> <div class="content"> <div class="btn startBtn"><button></button></div> <div class="btn pauseBtn"><button></button></div> <div id="snakeWrap"> </div> </div> <script src="./js/index.js"></script></body></html>

css部分：

.content{ width: 640px; height: 640px; margin: 50px auto; position: relative;}.btn{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: rgba(0,0,0,0); z-index: 1;}.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: 150px; background-image: url('../images/btn1.gif'); margin-left: -100px; margin-top: -75px;}.pauseBtn{ display: none;}.pauseBtn button{ width: 70px; height: 70px; background-image: url('../images/btn4.png'); margin-left: -35px; margin-top: -35px;}#snakeWrap{ position: relative; width: 600px; height: 600px; background: #FCE4EC; border: 20px solid #F8BBD0;}.snakeHead{ background-image: url('../images/snake.png'); background-size: cover;}.snakeBody{ background-color: #9CCC65; border-radius: 50%;}.food{ background: url('../images/food2.png') no-repeat; background-size: 100% 100%;}

js部分：

var sw = 20, // 一个方块的宽度 sh = 20, // 高度 tr = 30, // 行数 td = 30; // 列数var snake = null, // 蛇的实例 food = null, // 食物的实例 game = null; // 游戏实例// 方块构造函数function Square(x,y,classname) { this.x = x*sw; this.y = y*sh; this.class = classname; this.viewContent = document.createElement('div'); this.viewContent.className = this.class; this.parent = document.getElementById('snakeWrap');}Square.prototype.create = function(){ // 创建方块dom 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]) // 存储蛇头位置 // 创建蛇身体 var snakeBody1 = new Square(1,0,'snakeBody'); snakeBody1.create(); this.pos.push([1,0]) // 存储蛇身1位置 var 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 ] // 下个点是自己，游戏结束 var selfCollied = false; //是否撞到了自己 this.pos.forEach(function(value) { if(value[0]==nextPos[0] && value[1]==nextPos[1]){ selfCollied = true; } }); 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) { // 该参数用于决定是否删除蛇尾 // 创建新身体，在旧蛇头的位置 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(); // 创建蛇头:蛇头下一个点 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){ // 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(){ game.over(); }}snake = new Snake();// snake.init();// 创建食物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(); createFood(); document.onkeydown = function(ev) { // 用户按下左键， 蛇不能是正在往右走的 if(ev.which == 37 && snake.direction != snake.directionNum.right){ snake.direction = snake.directionNum.left; }else if(ev.which == 38 && snake.direction != snake.directionNum.down){ snake.direction = snake.directionNum.up; }else if(ev.which == 39 && snake.direction != snake.directionNum.left){ snake.direction = snake.directionNum.right; }else if(ev.which == 40 && snake.direction != snake.directionNum.up){ snake.direction = snake.directionNum.down; } } this.start();}Game.prototype.start = function(){ // 开始游戏 this.timer = setInterval(function(){ snake.getNextPos(); },200);}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');startBtn.onclick = function(){ startBtn.parentNode.style.display = 'none'; game.init();}// 暂停游戏var snakeWrap = document.getElementById('snakeWrap');var pauseBtn = document.querySelector('.pauseBtn button');snakeWrap.onclick = function() { game.pause(); pauseBtn.parentNode.style.display='block';}pauseBtn.onclick = function() { game.start(); pauseBtn.parentNode.style.display='none';}

游戏截图：

更多关于Js游戏的精彩文章，请查看专题： 《JavaScript经典游戏 玩不停》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章