分享一个用html5实现的贪吃蛇特效代码

//内置大量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||ynum-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，暂停键pvar 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();

【相关推荐】

3. php.cn原创html5视频教学