分享一个用html5实现的贪吃蛇特效代码
发布时间:2020-07-22 编辑:jiaochengji.com
教程集为您提供分享一个用html5实现的贪吃蛇特效代码等资源,欢迎您收藏本站,我们将为您提供最新的分享一个用html5实现的贪吃蛇特效代码资源
本篇小编为大家分享一个用html5实现的简单贪吃蛇特效代码,喜欢的小伙伴们可以看一下
<html> <head> <meta charset='utf-8'/> <title>Snake</title> </head> <body> <canvas id="plank" style="border"></canvas> <script type="text/javascript"> //内置大量BUG,I'm sorry. var lev=100; //定时器间隔时间 var num=30; //网格大小,现在是30x30 var direction=3; //0:up 1:down 2:left 3:right var handle; //用于管理定时器 var score=0; //分数 var pause=true; //暂停使用 var canvas = document.getElementById('plank'); var context = canvas.getContext('2d'); var snakex=new Array(); //存储蛇身x坐标,下同 var snakey=new Array(); var prize=new Array(-1,-1); //食物的位置 function rand(){ //产生随机数 return parseInt(Math.random()*num); } function chk(x,y){ //检查是否结束,包括越界 if(x<0||y<0) return false; if(x>num-1||y>num-1) return false; for (var i=0; i!=snakex.length-1;i ) { if(snakex[i]==x&&snakey[i]==y) {return false;} }; return true; } function drawScore(text){ //打印分数 context.clearRect(0,0,300,25); context.fillText("Score:" text,5,5); } function makeprize(){ //产生食物的位置 var flag=false; var prizepre=new Array(2); //使用链表会更好 while(!flag){ //食物位置不能在蛇体内 flag=true; prizepre[0]=rand();prizepre[1]=rand(); for (var i=0; i!=snakex.length;i ) { if((snakex[i]==prizepre[0])&&(snakey[i]==prizepre[1])) {flag=false;} } } prize=prizepre; } function runscore(x,y){ //判断是否吃到食物,并做处理 if(prize[0]==x&&prize[1]==y){ score=score 1; drawScore(score); snakex[snakex.length]=prize[0]; snakey[snakey.length]=prize[1]; makeprize(); drawNode(prize[0],prize[1]); return true; } return false; } function run(){ //定时器用来判断snake行进方向等等 switch(direction){ //方向 case 0: snakex[snakex.length]=snakex[snakex.length-1];snakey[snakey.length]=snakey[snakey.length-1]-1;break; case 1: snakex[snakex.length]=snakex[snakex.length-1];snakey[snakey.length]=snakey[snakey.length-1] 1;break; case 2: snakex[snakex.length]=snakex[snakex.length-1]-1;snakey[snakey.length]=snakey[snakey.length-1];break; case 3: snakex[snakex.length]=snakex[snakex.length-1] 1;snakey[snakey.length]=snakey[snakey.length-1];break; } if(!runscore(snakex[snakex.length-1],snakey[snakey.length-1])){ if(chk(snakex[snakex.length-1],snakey[snakey.length-1])==false) { clearInterval(handle); drawScore('\\tGame over'); return; } drawNode(snakex[snakex.length-1],snakey[snakey.length-1]); } clearNode(snakex[0],snakey[0]); snakex.shift(); snakey.shift(); } function drawNode(x,y){ //画点,共30X30个点(10*10像素算1个点) context.fillRect(x*10 1,y*10 31,10,10); } function clearNode(x,y){ context.clearRect(x*10 1,y*10 31,10,10); } function init(){ //初始化,设置画布大小,启动定时器等等 canvas.width = 510; canvas.height = 600; context.font = "normal 20px Airl"; context.textBaseline = "top"; context.fillText('P键开始/暂停,方向键控制',0,350); drawScore(''); context.strokeRect(0,30,302,302); makeprize(); drawNode(prize[0],prize[1]); snakex[0]=0;snakex[1]=1;snakex[2]=2; snakey[0]=0;snakey[1]=0;snakey[2]=0; drawNode(snakex[0],snakey[0]);drawNode(snakex[1],snakey[1]);drawNode(snakex[2],snakey[2]); } document.onkeydown=function(event){ //注册键盘事件,up,down,left,right,暂停键p var e = event || window.event; if(e&&e.keyCode==38){ direction=0; } if(e&&e.keyCode==40){ direction=1; } if(e&&e.keyCode==37){ direction=2; } if(e&&e.keyCode==39){ direction=3; } if(e&&e.keyCode==80){ if(pause) {pause=false;handle=setInterval(run,lev);} else {pause=true;clearInterval(handle);} } } init(); </script> </body> </html>以上就是分享一个用html5实现的贪吃蛇特效代码的详细内容,更多请关注教程集其它相关文章!-->
您可能感兴趣的文章:
用html5的63行代码实现贪吃蛇游戏
分享一个用html5实现的贪吃蛇特效代码
《贪吃蛇》--H5小游戏开发
10分钟用Python编写贪吃蛇小游戏
H5实现上传本地图片并能够预览的功能代码
如何使用HTML5 css3实现粒子效果文字动画特效(附完整代码)
html5精选特效代码分享(收藏)
html5是什么?html5有什么用?
golang int 转 duration_一看就懂系列之Golang的context
前端html5框架有哪些?html5常见六大框架
[关闭]