本篇小編為大家分享一個用html5實現的簡單貪吃蛇特效代碼，喜歡的小伙伴們可以看一下

Snake

//內置大量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.οnkeydοwn=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();

【相關推薦】

1. 免費h5在線視頻教程

2. HTML5 完整版手冊

3. php.cn原創html5視頻教程

總結

以上是生活随笔為你收集整理的html5实现贪吃蛇,分享一个用html5实现的贪吃蛇特效代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。