快捷導(dǎo)航

jsp網(wǎng)頁(yè)實(shí)現(xiàn)貪吃蛇小游戲

更新時(shí)間：2020年02月20日 10:45:58 作者：一只小小的螞蟻

這篇文章主要為大家詳細(xì)介紹了jsp網(wǎng)頁(yè)實(shí)現(xiàn)貪吃蛇小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jsp網(wǎng)頁(yè)實(shí)現(xiàn)貪吃蛇小游戲的具體代碼，供大家參考，具體內(nèi)容如下

一、主要思路

（1）第一步實(shí)現(xiàn)地圖。
（2）第二步實(shí)現(xiàn)蛇身。
（3）第三步實(shí)現(xiàn)食物。
（4）第四步實(shí)現(xiàn)移動(dòng)吃食物。
（5）第五步實(shí)現(xiàn)規(guī)則（撞墻游戲結(jié)束）。

二、代碼實(shí)現(xiàn)

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>貪吃蛇</title>
 <style>
  #map{
   width: 400px;
   height: 400px;
   border: 1px solid black;
  }
  /*地圖顏色*/
  .divMap{
   width: 18px;
   height: 18px;
   margin: 1px;
   background-color: yellow;
   float: left;
  }
  /*蛇身顏色*/
  .divSnake{
    width: 18px;
    height: 18px;
    margin: 1px;
    background-color: red;
    float: left;
   }
  /*食物顏色*/
  .divFood{
   width: 18px;
   height: 18px;
   margin: 1px;
   background-color: green;
   float: left;
  }
 </style>
 <script>
  var mapX=20;
  var mapY=20; //地圖邊界，橫向和縱向的div小格
  var arrMap=new Array();//地圖數(shù)組
  var snackeX = [4,5,6,7],snackeY=[2,2,2,2];//蛇身初始化坐標(biāo)值
  var foodX,foodY; //創(chuàng)建食物坐標(biāo)
  var keyCode = 39;//蛇身移動(dòng)方向,默認(rèn)向右

  //創(chuàng)建地圖
  function createMap() {
   //獲取地圖外框div
   var map=document.getElementById("map");
   //地圖創(chuàng)建div小格，橫縱各20個(gè)
   for(y=0;y<mapY;y++)
   {
    arrMap[y]= new Array();
    for(x=0;x<mapX;x++)
    {
     //div小格
     var div =document.createElement("div");
     div.className="divMap";//初始化樣式
     arrMap[y][x]=div;//將div小格放入地圖數(shù)組中
     map.appendChild(div);//頁(yè)面繪制
    }
   }
  }

  //創(chuàng)建蛇身
  function createSnack(){
   //改變地圖中一串連續(xù)div底色
   for(i=0;i<snackeX.length;i++)
   {
    arrMap[snackeY[i]][snackeX[i]].className ="divSnake";
   }
  }
  //清除蛇身
  function clearSnack() {
   for(i=0;i<snackeX.length;i++)
   {
    arrMap[snackeY[i]][snackeX[i]].className="divMap";
   }
  }
  //創(chuàng)建食物
  function createFood()
  {
   //arrMap[foodY][foodX].className="divFood";
   var result;//判斷是否要重新生成食物
   do {
    result = false;//默認(rèn)不重疊
    //隨機(jī)食物坐標(biāo)
    foodX=parseInt(Math.random()*mapX);
    foodY=parseInt(Math.random()*mapY);

    //判斷食物不能出現(xiàn)在蛇身上
    for(i=0;i>snackeX.length;i++) {
     if(snackeX[1]==foodX&&snackeY[1]==foodY)
     {
      result = true;//需要重新生成
      break;
     }
    }

   }while(result);
   arrMap[foodY][foodX].className="divFood";
  }
  //蛇身運(yùn)動(dòng)
  //1.清除蛇身
  //2.移動(dòng)蛇身坐標(biāo)，增加蛇頭，清除蛇尾一格
  function snackMove() {
   //清除蛇身
   clearSnack();
   for (i = 0; i < snackeX.length - 1; i++) {
    snackeX[i] = snackeX[i + 1];
    snackeY[i] = snackeY[i + 1];
   }
   //每次移動(dòng)，蛇頭增加一格， keyCode匹配鍵盤(pán)方向
   switch (keyCode) {
    case 37://向左
     snackeX[snackeX.length - 1]--;
     break;
    case 38://向上
     snackeY[snackeY.length - 1]--;
     break;
    case 39://向右
     snackeX[snackeX.length - 1]++;
     break;
    case 40://向下
     snackeY[snackeY.length - 1]++;
     break;

   }
   //吃食物
   if (snackeX[snackeX.length - 1] == foodX && snackeY[snackeY.length - 1] == foodY)
   {
    //吃到食物
    snackeX[snackeX.length]=snackeX[snackeX.length-1];
    snackeY[snackeY.length]=snackeY[snackeY.length-1];
    //重新排列蛇身
    for(i=snackeX.length-1;i>0;i--)
    {
     snackeX[i]=snackeX[i-1];
     snackeY[i]=snackeY[i-1];
    }
    createFood();//重新生成下一個(gè)食物
   }
   //超出游戲邊框
   if(snackeX[snackeX.length-1]<0
    || snackeX[snackeX.length-1]>mapX-1
    || snackeY[snackeY.length-1]<0
    || snackeY[snackeY.length-1]>mapY-1)
   {
    clearInterval(move);//停止移動(dòng)
    alert("游戲結(jié)束");
    return ;
   }

   createSnack();//重新創(chuàng)建蛇身
  }
  //鍵盤(pán)事件
  function keyDown(){
   var newKey = event.keyCode//鍵盤(pán)按鍵
   if(keyCode == 37 && newKey == 39||
    keyCode == 39 && newKey == 37||
    keyCode == 38 && newKey == 40||
    keyCode == 40 && newKey == 38
   ) {
    //禁止掉頭
    return ;
   } else if(newKey>=37&&newKey<=40){
    //用戶(hù)按了某個(gè)方向鍵
    keyCode=newKey;
    }
    else{
     //其他按鍵
   }
  }
  //運(yùn)行
  window.onload =function () {
   createMap(); //創(chuàng)建地圖
   createSnack();//創(chuàng)建蛇身
   createFood();//創(chuàng)建食物

   move= setInterval("snackMove()",200)//蛇身移動(dòng)
   document.onkeydown = keyDown;//獲取方向鍵
  }
 </script>
</head>
<body>
<div id="map"></div>
</body>
</html>

三、實(shí)現(xiàn)效果

按方向鍵實(shí)現(xiàn)蛇身運(yùn)動(dòng)。