jsp網頁實現貪吃蛇小游戲

 更新時間:2020-05-12 14:00:54   作者:佚名   我要評論(0)

本文實例為大家分享了jsp網頁實現貪吃蛇小游戲的具體代碼,供大家參考,具體內容如下
一、主要思路
(1)第一步實現地圖。

(2)第二步實現蛇身。

(3)第三步實

本文實例為大家分享了jsp網頁實現貪吃蛇小游戲的具體代碼,供大家參考,具體內容如下

一、主要思路

(1)第一步實現地圖。
(2)第二步實現蛇身。
(3)第三步實現食物。
(4)第四步實現移動吃食物。
(5)第五步實現規則(撞墻游戲結束)。

二、代碼實現

<!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();//地圖數組
  var snackeX = [4,5,6,7],snackeY=[2,2,2,2];//蛇身初始化坐標值
  var foodX,foodY; //創建食物坐標
  var keyCode = 39;//蛇身移動方向,默認向右

  //創建地圖
  function createMap() {
   //獲取地圖外框div
   var map=document.getElementById("map");
   //地圖創建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小格放入地圖數組中
     map.appendChild(div);//頁面繪制
    }
   }
  }

  //創建蛇身
  function createSnack(){
   //改變地圖中一串連續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";
   }
  }
  //創建食物
  function createFood()
  {
   //arrMap[foodY][foodX].className="divFood";
   var result;//判斷是否要重新生成食物
   do {
    result = false;//默認不重疊
    //隨機食物坐標
    foodX=parseInt(Math.random()*mapX);
    foodY=parseInt(Math.random()*mapY);

    //判斷食物不能出現在蛇身上
    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("游戲結束");
    return ;
   }

   createSnack();//重新創建蛇身
  }
  //鍵盤事件
  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(); //創建地圖
   createSnack();//創建蛇身
   createFood();//創建食物

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

三、實現效果

按方向鍵實現蛇身運動。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

您可能感興趣的文章:

  • JavaScript實現簡單貪吃蛇效果
  • 原生JS實現貪吃蛇小游戲
  • 原生javascript制作貪吃蛇小游戲的方法分析
  • js實現網頁版貪吃蛇游戲
  • JS寫的貪吃蛇游戲(個人練習)
  • javascript貪吃蛇完整版(源碼)
  • js實現貪吃蛇小游戲(容易理解)
  • 20行js代碼實現的貪吃蛇小游戲
  • js貪吃蛇游戲實現思路和源碼
  • 基于JavaScript實現貪吃蛇游戲

相關文章

  • jsp網頁實現貪吃蛇小游戲

    jsp網頁實現貪吃蛇小游戲

    本文實例為大家分享了jsp網頁實現貪吃蛇小游戲的具體代碼,供大家參考,具體內容如下 一、主要思路 (1)第一步實現地圖。 (2)第二步實現蛇身。 (3)第三步實
    2020-05-12
  • jsp實現簡單用戶7天內免登錄

    jsp實現簡單用戶7天內免登錄

    本文實例為大家分享了jsp實現簡單用戶7天內免登錄的具體代碼,供大家參考,具體內容如下 (1)登陸頁面:login.jsp <%@ page language="java" contentType="text/
    2020-05-12
  • JSP數據交互實現過程解析

    JSP數據交互實現過程解析

    這篇文章主要介紹了JSP數據交互實現過程解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下 1.JSP內置對象:
    2020-05-12
  • jsp實現用戶自動登錄功能

    jsp實現用戶自動登錄功能

    理解并掌握Cookie的作用以及利用cookie實現用戶的自動登錄功能,實現下圖效果 當服務器判斷出該用戶是首次登錄的時候,會自動跳轉到登錄界面等待用戶登錄,并填入相
    2020-05-12
  • ASP.NET Cookie是怎么生成的(推薦)

    ASP.NET Cookie是怎么生成的(推薦)

    可能有人知道Cookie的生成由machineKey有關,machineKey用于決定Cookie生成的算法和密鑰,并如果使用多臺服務器做負載均衡時,必須指定一致的machineKey用于解密,那
    2020-05-12
  • asp.net全局變量的實例方法

    asp.net全局變量的實例方法

    asp.net獲取全局變量方法 第一種,首先打開visual studio,新建web項目。 其次,在新建的web項目中,打開“web.config”文件,在此文件中添加關鍵字“<appSettings>
    2020-05-12
  • .Net Core WebApi部署到Windows服務器上的步驟

    .Net Core WebApi部署到Windows服務器上的步驟

      上一篇學習到了如何簡單的創建.Net Core Api和Swagger使用,既然寫了接口,那么就需要部署到服務器上才能夠正式使用。服務器主要用到了兩種系統,Windows和Linu
    2020-05-12
  • ASP.NET Core MVC 中實現中英文切換的示例代碼

    ASP.NET Core MVC 中實現中英文切換的示例代碼

      哈嘍..大家好 很久沒有更新了,今天就來一篇最近開發用到的功能,那就是中英文切換,這個實際上也不是高大上,先說一下原理,在.NET Core框架中給我們提供了全球
    2020-05-12
  • .Net Core中使用ExceptionFilter過濾器的方法

    .Net Core中使用ExceptionFilter過濾器的方法

    .Net Core中有各種Filter,分別是AuthorizationFilter、ResourceFilter、ExceptionFilter、ActionFilter、ResultFilter。可以把他們看作是.Net Core自帶的AOP的擴展封
    2020-05-12
  • .NET Core 基于Websocket的在線聊天室實現

    .NET Core 基于Websocket的在線聊天室實現

    什么是Websocket 我們在傳統的客戶端程序要實現實時雙工通訊第一想到的技術就是socket通訊,但是在web體系是用不了socket通訊技術的,因為http被設計成無狀態,每次
    2020-05-12

最新評論

买宝宝用品赚钱吗 安徽快3开奖软件 配资炒股被诈骗应该怎么办 股票指数4000点啥意思 河北快三app免费下载 广西快乐十分开心 广西快3走势图电脑版 股票行情香雪 11选5杀2个100%技巧 体彩排列7中奖规则 山西11选五开奖结果 加拿大28是不是骗局 福利彩票3d今天图纸 山西体彩11选五5开奖走势图 青海快3今日开奖号码 甘肃十一选五走势图表 上海时时乐彩票新闻