JS实现贪吃蛇游戏

2023-08-08 19:48:05 146

.content{ width:640px; height:640px; margin:50pxauto; position:relative; } .btn{ width:100%; height:100%; position:absolute; left:0; top:0; background-color:rgba(0,0,0,0); z-index:1; } .btnbutton{ background:none; border:none; background-size:100%100%; cursor:pointer; outline:none; position:absolute; left:50%; top:50%; } .startBtnbutton{ width:200px; height:150px; background-image:url('../images/btn1.gif'); margin-left:-100px; margin-top:-75px; } .pauseBtn{ display:none; } .pauseBtnbutton{ 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:20pxsolid#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%; }

varsw=20,//一个方块的宽度 sh=20,//高度 tr=30,//行数 td=30;//列数 varsnake=null,//蛇的实例 food=null,//食物的实例 game=null;//游戏实例 //方块构造函数 functionSquare(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); } //蛇 functionSnake(){ 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(){ //创建蛇头 varsnakeHead=newSquare(2,0,'snakeHead'); snakeHead.create(); this.head=snakeHead;//存储蛇头信息 this.pos.push([2,0])//存储蛇头位置 //创建蛇身体 varsnakeBody1=newSquare(1,0,'snakeBody'); snakeBody1.create(); this.pos.push([1,0])//存储蛇身1位置 varsnakeBody2=newSquare(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(){ varnextPos=[ this.head.x/sw+this.direction.x, this.head.y/sh+this.direction.y ] //下个点是自己，游戏结束 varselfCollied=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){//该参数用于决定是否删除蛇尾 //创建新身体，在旧蛇头的位置 varnewBody=newSquare(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(); //创建蛇头:蛇头下一个点 varnewHead=newSquare(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=newSnake(); //snake.init(); //创建食物 functioncreateFood(){ //食物的随机坐标 varx=null; vary=null; varinclude=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=newSquare(x,y,'food'); food.pos=[x,y];//存储食物的坐标，用于跟蛇头下一个走的点作对比 varfoodDom=document.querySelector('.food'); if(foodDom){ foodDom.style.left=x*sw+'px'; foodDom.style.top=y*sh+'px'; }else{ food.create(); } } } //创建游戏逻辑 functionGame(){ 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; }elseif(ev.which==38&&snake.direction!=snake.directionNum.down){ snake.direction=snake.directionNum.up; }elseif(ev.which==39&&snake.direction!=snake.directionNum.left){ snake.direction=snake.directionNum.right; }elseif(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); //游戏回到最初始的状态 varsnakeWrap=document.getElementById('snakeWrap'); snakeWrap.innerHTML=''; snake=newSnake(); game=newGame(); varstartBtnWrap=document.querySelector('.startBtn'); startBtnWrap.style.display='block'; } //开启游戏 game=newGame(); varstartBtn=document.querySelector('.startBtnbutton'); startBtn.onclick=function(){ startBtn.parentNode.style.display='none'; game.init(); } //暂停游戏 varsnakeWrap=document.getElementById('snakeWrap'); varpauseBtn=document.querySelector('.pauseBtnbutton'); snakeWrap.onclick=function(){ game.pause(); pauseBtn.parentNode.style.display='block'; } pauseBtn.onclick=function(){ game.start(); pauseBtn.parentNode.style.display='none'; }

JS实现贪吃蛇游戏

热门推荐

随机推荐