javascript實現簡單的貪吃蛇游戲，功能很簡單，代碼也很實用，就不多廢話了，小伙伴們參考注釋吧。
<html><head> <meta http-equiv='content-type' content='text/html;charset=utf-8'><title>貪吃蛇</title><script type="text/javascript"> var map; //地圖 var snake; //蛇 var food; //食物 var timer; //定時器 var initSpeed=200; //初始定時器時間間隔（毫秒）,間接代表蛇移動速度 var nowSpeed=initSpeed; //游戲進行時蛇移動速度 var grade=0; //積分 var flag=1; //（可間接看做）關卡 //地圖類 function Map(){ this.width=800; this.height=400; this.position='absolute'; this.color='#EEEEEE'; this._map=null; //生成地圖 this.show=function(){ this._map=document.createElement('div'); this._map.style.width=this.width+'px'; this._map.style.height=this.height+'px'; this._map.style.position=this.position; this._map.style.backgroundColor=this.color; document.getElementsByTagName('body')[0].appendChild(this._map); } } //食物類 function Food(){ this.width=20; this.height=20; this.position='absolute'; this.color='#00FF00'; this.x=0; this.y=0; this._food; //生成食物 this.show=function(){ this._food=document.createElement('div'); this._food.style.width=this.width+'px'; this._food.style.height=this.height+'px'; this._food.style.position=this.position; this._food.style.backgroundColor=this.color; this.x=Math.floor(Math.random()*map.width/this.width); this.y=Math.floor(Math.random()*map.height/this.width); this._food.style.left=this.x*this.width; this._food.style.top=this.y*this.height; map._map.appendChild(this._food); } } //蛇類 function Snake(){ this.width=20; this.height=20; this.position='absolute'; this.direct=null;//移動方向 //初始蛇身 this.body=new Array( [3,2,'red',null],//蛇頭 [2,2,'blue',null], [1,2,'blue',null] ); //生成蛇身 this.show=function(){ for(var i=0;i<this.body.length;i++){ if(this.body[i][3]==null){ this.body[i][3]=document.createElement('div'); this.body[i][3].style.width=this.width; this.body[i][3].style.height=this.height; this.body[i][3].style.position=this.position; this.body[i][3].style.backgroundColor=this.body[i][2]; map._map.appendChild(this.body[i][3]); } this.body[i][3].style.left=this.body[i][0]*this.width+'px'; this.body[i][3].style.top=this.body[i][1]*this.height+'px'; } } //控制蛇移動 this.move=function(){ var length=this.body.length-1; for(var i=length;i>0;i--){ this.body[i][0]=this.body[i-1][0]; this.body[i][1]=this.body[i-1][1]; } switch(this.direct){ case 'right': this.body[0][0]=this.body[0][0]+1; break; case 'left': this.body[0][0]=this.body[0][0]-1; break; case 'up': this.body[0][1]=this.body[0][1]-1; break; case 'down': this.body[0][1]=this.body[0][1]+1; break; } this.condition(); this.show(); } //定時器，開始游戲時，調用 this.speed=function(){ timer=setInterval('snake.move()',initSpeed); } //條件處理 this.condition=function(){ //吃食物 if(this.body[0][0]==food.x&&this.body[0][1]==food.y){ grade++; this.body[[this.body.length]]=[0,0,'blue',null]; map._map.removeChild(food._food) food.show(); } //判斷是否撞墻 if(this.body[0][0]<0||this.body[0][0]>=map.width/this.width||this.body[0][1]<0||this.body[0][1]>=map.height/this.height){ alert('game over'); clearInterval(timer); return ; } //判斷是否撞到自身 for(var i=1;i<this.body.length;i++){ if(this.body[0][0]==this.body[i][0]&&this.body[0][1]==this.body[i][1]){ alert('game over'); clearInterval(timer); return ; } } //速度提升處理，積分每曾2分，速度提升一倍 if(grade/2==flag){ clearInterval(timer); flag++; nowSpeed=initSpeed/flag; timer=setInterval('snake.move()',nowSpeed); } document.title='貪吃蛇 積分'+grade+' 速度等級'+initSpeed/nowSpeed; } } document.onkeydown=function(event){ //按下任意鍵，開始游戲 if(snake.direct===null){ snake.direct='right'; snake.speed(); } //控制方向，W S D A分別代表 上下右左 switch(window.event?window.event.keyCode:event.keyCode){//瀏覽器兼容處理 case 87 : snake.direct=snake.body[0][0]==snake.body[1][0]?snake.direct:'up';//避免反向移動，觸發死亡bug break; case 83 : snake.direct=snake.body[0][0]==snake.body[1][0]?snake.direct:'down'; break; case 68 : snake.direct=snake.body[0][1]==snake.body[1][1]?snake.direct:'right'; break; case 65 : snake.direct=snake.body[0][1]==snake.body[1][1]?snake.direct:'left'; break; } } //自動加載游戲 window.onload=function(){ map=new Map(); map.show(); food=new Food(); food.show(); snake=new Snake(); snake.show(); }</script></head><body></body></html>以上所述就是本文的全部內容了，希望大家能夠喜歡。
新聞熱點
疑難解答
