如何基于javascript实现贪吃蛇游戏

2023-08-01 22:33:06 176

*{ margin:0; padding:0; } body{ background-color:#565F65; width:100%; height:10vh; overflow:hidden; } .content{ width:500px; height:500px; position:absolute; top:50%; left:50%; margin-top:-250px; margin-left:-250px; background-color:#565F65; border:10pxsolid#E7E7E7; box-shadow:inset0px0px5px2px#000; } .btn{ width:100%; height:100%; position:absolute; top:0; left:0; background-color:rgba(0,0,0,.3);/*游戏未开始时和暂停时的遮罩*/ z-index:2; } .btnbutton{ background:none; border:none; background-size:100%100%; cursor:pointer; outline:none; position:absolute; left:50%; top:50%; } .startBtnbutton{ width:170px; height:80px; background-image:url(img/startbtn.png); margin-top:-40px; margin-left:-85px; } .stopBtn{ display:none; } .stopBtnbutton{ width:70px; height:70px; background-image:url(img/stopbtn.png); margin-top:-35px; margin-left:-35px; } #snakeWrap{ width:500px; height:500px; position:relative; } .snakeHead{/*蛇头样式*/ background-color:aqua; border-radius:50%; } .snakeBody{/*蛇身样式*/ background-color:navajowhite; border-radius:50%; } .food{/*食物样式*/ background-image:url(img/food.png); background-size:cover; }

varsw=20,//一个方块的宽 sh=20,//一个方块的高 tr=25,//行数 td=25;//列数 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');//方块对应的DOM元素 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 ]; //下一个点是自己,代表撞到了自己,游戏结束 varselfCollind=false;//是否撞到自己 this.pos.forEach(function(value){ if(value[0]==nextPos[0]&&value[1]==nextPos[1]){ //如果数组中的两个数据都相等,就说明下一个点在蛇身上里面能找到,代表撞到自己了 selfCollind=true; } }); if(selfCollind){ 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){//如何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(); //创建食物 functioncreateFood(){ //食物小方块的随机坐标 varx=null; vary=null; varinclude=true;//循环跳出的条件,true表示食物的坐标在蛇身上(需要继续循环),false表示食物坐标不在蛇身上(不循环了) while(include){ x=Math.round(Math.random()*(td-1));//0-29 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; this.speed=200; } Game.prototype.init=function(){ snake.init(); snake.getNextPos(); 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.dowm){ 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(); },this.speed); } 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'); varpuseBtn=document.querySelector('.stopBtnbutton') snakeWrap.onclick=function(){ game.pause(); puseBtn.parentNode.style.display='block'; } puseBtn.onclick=function(){ game.start(); puseBtn.parentNode.style.display='none'; }

如何基于javascript实现贪吃蛇游戏

热门推荐

随机推荐