69pao国产精品视频-久久精品一区二区二三区-精品国产精品亚洲一本大道-99国产综合一区久久

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

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

一、主要思路

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

二、代碼實現(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];//蛇身初始化坐標值
  var foodx,foody; //創(chuàng)建食物坐標
  var keycode = 39;//蛇身移動方向,默認向右

  //創(chuàng)建地圖
  function createmap() {
   //獲取地圖外框div
   var map=document.getelementbyid("map");
   //地圖創(chuàng)建div小格，橫縱各20個
   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);//頁面繪制
    }
   }
  }

  //創(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;//默認不重疊
    //隨機食物坐標
    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";
  }
  //蛇身運動
  //1.清除蛇身
  //2.移動蛇身坐標，增加蛇頭，清除蛇尾一格
  function snackmove() {
   //清除蛇身
   clearsnack();
   for (i = 0; i < snackex.length - 1; i++) {
    snackex[i] = snackex[i + 1];
    snackey[i] = snackey[i + 1];
   }
   //每次移動，蛇頭增加一格， keycode匹配鍵盤方向
   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();//重新生成下一個食物
   }
   //超出游戲邊框
   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);//停止移動
    alert("游戲結(jié)束");
    return ;
   }

   createsnack();//重新創(chuàng)建蛇身
  }
  //鍵盤事件
  function keydown(){
   var newkey = event.keycode//鍵盤按鍵
   if(keycode == 37 && newkey == 39||
    keycode == 39 && newkey == 37||
    keycode == 38 && newkey == 40||
    keycode == 40 && newkey == 38
   ) {
    //禁止掉頭
    return ;
   } else if(newkey>=37&&newkey<=40){
    //用戶按了某個方向鍵
    keycode=newkey;
    }
    else{
     //其他按鍵
   }
  }
  //運行
  window.onload =function () {
   createmap(); //創(chuàng)建地圖
   createsnack();//創(chuàng)建蛇身
   createfood();//創(chuàng)建食物

   move= setinterval("snackmove()",200)//蛇身移動
   document.onkeydown = keydown;//獲取方向鍵
  }
 </script>
</head>
<body>
<div id="map"></div>
</body>
</html>

三、實現(xiàn)效果

按方向鍵實現(xiàn)蛇身運動。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持碩編程。

相關(guān)文章