js實現貪吃蛇小游戲（容易理解）

2019-11-19 17:49:15

字體：大中小

來源：轉載

供稿：網友

話不多說，請看代碼：

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>貪吃蛇</title> <link rel="stylesheet" href="style.css"> <script src="style.js" ></script> </head> <body> <div id="container"></div> </body></html>

第一步：初始化地圖，創建蛇圈。
第二步：創建蛇，隨機生產食物。
第三步：讓蛇移動起來。
第四步：通過js綁定鍵盤事件,控制蛇移動方向。

var box={width:50,height:50};//每一個方塊的高度var snake=[];//保存蛇每一節身體對應的spanvar DIR={ DIR_RIGHT:1, DIR_LEFT:2, DIR_TOP:3, DIR_BOTTOM:4};var dir=DIR.DIR_BOTTOM;var food=null; //始終記錄當前的食物 window.onload=function(){ //1.初始化地圖 initMap(); //2.創建蛇 //2.5隨機顯示食物 showFood(); createSnake(); //3.讓蛇動起來 setInterval(snakeMove,100); //4.控制蛇移動 document.onkeyup=function(e){ switch(e.keyCode){ case 37:dir=DIR.DIR_LEFT;break; case 38:dir=DIR.DIR_TOP;break; case 39:dir=DIR.DIR_RIGHT;break; case 40:dir=DIR.DIR_BOTTOM;break;  }  }};function isInSnakeBody(left,top){ for(var i=0;i<snake.length;i++){ if(snake[i].offsetTop==top&&snake[i].offsetLeft==left){ return true; } }}//這種隨機生成食物的方法效率低---隨著蛇身體的增長，隨機生成食物的時間會變慢。function showFood(){ var con=document.getElementById("container"); food=document.createElement("span"); food.className="food"; food.style.width=box.width+"px"; food.style.height=box.height+"px"; var left,top; do{ left=Math.floor((con.offsetWidth-2)/box.width*Math.random())*box.width; top=Math.floor((con.offsetHeight-2)/box.height*Math.random())*box.height; }while(isInSnakeBody(left,top)); food.style.left=left+"px"; food.style.top=top+"px"; con.appendChild(food);}function initMap(){ var con=document.getElementById("container"); var row=Math.floor(con.offsetWidth/box.width); var rol=Math.floor(con.offsetHeight/box.height); var num=row*rol; var newSpan=null; for(var i=1;i<=num;i++){ newSpan=document.createElement("span"); newSpan.style.width=box.width+"px"; newSpan.style.height=box.height+"px"; con.appendChild(newSpan); } }function createSnake(){ var newBody=null; var con=document.getElementById("container"); for(var i=1;i<=5;i++){ newBody=document.createElement("span"); newBody.style.width=box.width+"px"; newBody.style.height=box.height+"px"; newBody.style.left=(i-1)*box.width+"px"; newBody.style.top="0px"; newBody.className="snake"; con.appendChild(newBody); snake.push(newBody); }}function snakeMove(){ var con=document.getElementById("container"); //蛇頭移動 var head=snake[snake.length-1]; var newTop=head.offsetTop,newLeft=head.offsetLeft; switch(dir){ case DIR.DIR_LEFT:newLeft-=box.width; break; case DIR.DIR_RIGHT:newLeft+=box.width; break; case DIR.DIR_TOP:newTop-=box.height; break; case DIR.DIR_BOTTOM:newTop+=box.height; break; default:break; } //如果超出邊界，計算蛇頭下一個位置的坐標 if(newLeft>con.offsetWidth-2-1){newLeft=0;} if(newLeft<0){newLeft=con.offsetWidth-2-box.width;} if(newTop<0){newTop=con.offsetHeight-2-box.height;} if(newTop>con.offsetHeight-2-1){newTop=0;} //判斷新蛇頭的位置是不是在蛇身體里面 //for(var i=0;i<snake.length-1;i++){ // if(snake[i].offsetLeft==newLeft&&snake[i].offsetTop==newTop){ // alert("Game over！！"); // window.location.href=window.location.href; // }  //} //1.如果吃到食物 if(newLeft==food.offsetLeft&&newTop==food.offsetTop){ food.className="snake"; snake.push(food); showFood(); return; } //2.如果沒吃到 //除蛇頭外身體移動 for(var i=0;i<snake.length-1;i++){ snake[i].style.top=snake[i+1].offsetTop+"px"; snake[i].style.left=snake[i+1].offsetLeft+"px"; } head.style.left=newLeft+"px"; head.style.top=newTop=newTop+"px";}

*{ padding:0; margin:0;}html,body{ width:100%; height:100%;}body{ position:relative;}div#container{ position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; width:800px; height:500px; border:1px solid black; font-size:0px;}span{ display:inline-block; border:1px solid black; box-sizing:border-box;}span.snake{ position:absolute; background-color:red;}span.food{ position:absolute; background-color:blue;}

最后的效果圖如下：