原生js canvas实现简单贪吃蛇
本文实例为大家分享了jscanvas实现简单贪吃蛇的具体代码,供大家参考,具体内容如下
Js原生贪吃蛇:canvas
HTML
CSS
#can{ background:#000000; height:400px; width:850px; }
JS
//公共板块 varblockSize=10; //地图的高宽 varmapW=300; varmapH=150; //历史食物var varhistoryfood=newArray(); //食物数组 varimg=newImage() vararrFood=["ananas.png","hamburg.png","watermelon.png"] historyfood=[{x:0,y:0}]; //贪吃蛇默认值 varsnake=[{x:3,y:0},{x:2,y:0},{x:1,y:0}] //贪吃蛇方向 vardirectionX=1; vardirectionY=0; //添加一个标记,标记食物是否被吃掉 //默认值:没有被吃掉 varisFood=false; //判断游戏状态 //默认游戏继续 vargameState=false; //限制贪吃蛇所移动的方向不能反方向操作 varlockleft=true; varlockright=true; varlockup=true; varlockdown=true; //贪吃蛇分数 varcount=0; //贪吃蛇速度 varspeed=1000-(count+5); $(function(){ $("#divContainer").height($("#can").height()); //1,获取到画布对象 varcan=document.getElementById("can"); //2,获取到画图工具箱 vartools=can.getContext('2d'); tools.beginPath(); //设置食物默认值 varXY=Randomfood(); console.log(XY); varx1=Randomfood().x; vary1=Randomfood().y; img.src="/aimless/img/GluttonousSnakeFood/"+arrFood[Math.floor(Math.random()*arrFood.length)]; //控制贪吃蛇移动 document.addEventListener('keydown',function(e){ switch(e.keyCode){ case38: if(lockup){ directionX=0; directionY=-1; lockdown=false; lockleft=true; lockright=true; } break; case40: if(lockdown){ directionX=0; directionY=1; lockup=false; lockleft=true; lockright=true; } break; case37: if(lockleft){ directionX=-1; directionY=0; lockright=false; lockup=true; lockdown=true; } break; case39: if(lockright){ directionX=1; directionY=0; lockleft=false; lockup=true; lockdown=true; } break; } }) setIntervalSnake(tools,x1,y1); //4,找位置 }) functionsetIntervalSnake(tools,x1,y1){ setInterval(function(){ if(gameState){ return; } //1,擦除画板 tools.clearRect(0,0,850,420); varoldHead=snake[0]; if(oldHead.x<0||oldHead.y<0||oldHead.x*blockSize>=mapW||oldHead.y*blockSize>=mapH){ gameState=true; alert("游戏结束"); }else{ //蛇移动 if(snake[0].x*blockSize===x1&&snake[0].y*blockSize===y1){ isFood=true; }else{ snake.pop() } varnewHead={ x:oldHead.x+directionX, y:oldHead.y+directionY } snake.unshift(newHead); } //2,判断食物是否被吃掉,吃掉刷新,不吃掉不刷新 if(isFood){ count=count+1; $("#count").html(count); x1=Randomfood().x; y1=Randomfood().y; img.src="/aimless/img/GluttonousSnakeFood/"+arrFood[Math.floor(Math.random()*arrFood.length)]; isFood=false; } tools.drawImage(img,x1,y1,blockSize,blockSize); //蛇身数组 varThesnakebody=newArray(); //3,画蛇 for(vari=0;i{ if(item.x==snake[0].x&&item.y==snake[0].y){ gameState=true; setIntervalSnake(tools,x1,y1); } }) //4,画地图 varwidth=Math.round($("#can").width()/blockSize); varheight=Math.round($("#can").height()/blockSize); for(vari=1;i { console.log(RandomX/blockSize,RandomY/blockSize); //console.log(item.x,item.y); if(item.x==RandomX/blockSize&&item.y==RandomY/blockSize){ returnRandomfood(); }else{ return; } }) },10/3); varnewRandom={ x:RandomX, y:RandomY } returnnewRandom; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。