javascript實現簡單的貪吃蛇游戲

2024-05-06 16:17:52

字體：大中小

來源：轉載

供稿：網友

本文很簡單，給大家分享了一段使用javascript實現簡單的貪吃蛇游戲的代碼，算是對自己學習javascript的一次小小的總結，代碼參考了網友的部分內容，推薦給大家，希望對大家能夠有所幫助。

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>