BinaryDevelop
  1. ホーム
  2. Web プログラミング
  3. JSP プログラミング

蛇を捕まえるゲームを実装するためのjspのWebページ

2022-01-19 04:17:23

この例では、参考のため、スナッチャーのミニゲームを実装する jsp ウェブページの具体的なコードを、以下のように共有します。

I. 主な考え方

(1)まずは地図の実装です。
(2) 第2ステップでは、蛇体を実装します。
(3)第3ステップでは、餌を実現します。
(4) 第四段階は、食べ物を食べるために移動することを実現する。
(5) 第五段階は、ルール（壁にぶつかるゲームの終了）を実現する。

II. コードの実装 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Gluttony</title>
 <style>
  #map{
   width: 400px;
   height: 400px;
   border: 1px solid black;
  }
  /*map color*/
  .divMap{
   width: 18px;
   height: 18px;
   margin: 1px;
   background-color: yellow;
   float: left;
  }
  /*Snake body color*/
  .divSnake{
    width: 18px;
    height: 18px;
    margin: 1px;
    background-color: red;
    float: left;
   }
  /*food-color*/
  .divFood{
   width: 18px;
   height: 18px;
   margin: 1px;
   background-color: green;
   float: left;
  }
 </style>
 <script>
  var mapX=20;
  var mapY=20; //map boundary, horizontal and vertical div cells
  var arrMap=new Array();//map array
  var snackeX = [4,5,6,7],snackeY=[2,2,2,2];//snake body initialization coordinate value
  var foodX,foodY; //create food coordinates
  var keyCode = 39;//Snake body move direction, default to the right

  //create a map
  function createMap() {
   //Get the map outer frame div
   var map = document.getElementById("map");
   //map create div grid, horizontal and vertical 20
   for(y=0;y<mapY;y++)
   {
    arrMap[y]= new Array();
    for(x=0;x<mapX;x++)
    {
     //div small cell
     var div =document.createElement("div");
     div.className="divMap";//initialize style
     arrMap[y][x]=div;//put the div grid into the map array
     map.appendChild(div);//page draw
    }
   }
  }

  //create the snake body
  function createSnack(){
   //change the bottom color of a string of consecutive divs in the map
   for(i=0;i<snackeX.length;i++)
   {
    arrMap[snackeY[i]][snackeX[i]].className = "divSnake";
   }
  }
  // Clear the snake body
  function clearSnack() {
   for(i=0;i<snackeX.length;i++)
   {
    arrMap[snackeY[i]][snackeX[i]].className="divMap";
   }
  }
  // Create food
  function createFood()
  {
   //arrMap[foodY][foodX].className="divFood";
   var result;//judge whether to regenerate the food
   do {
    result = false;//default does not overlap
    //random food coordinates
    foodX=parseInt(Math.random()*mapX);
    foodY=parseInt(Math.random()*mapY);

    //judge the food can not appear on the snake
    for(i=0;i>snackeX.length;i++) {
     if(snackeX[1]==foodX&&snackeY[1]==foodY)
     {
      result = true;//need to regenerate
      break;
     }
    }

   }while(result);
   arrMap[foodY][foodX].className="divFood";
  }
  //Snake body movement
  //1. clear the snake body
  //2. move the snake body coordinates, increase the snake head, and clear the snake tail by one frame
  function snackMove() {
   //clear snack
   clearSnack();
   for (i = 0; i < snackeX.length - 1; i++) {
    snackeX[i] = snackeX[i + 1];
    snackeY[i] = snackeY[i + 1];
   }
   //each time you move, the snake head increases by one frame, keyCode matches the keyboard direction
   switch (keyCode) {
    case 37://left
     snackeX[snackeX.length - 1]--;
     break;
    case 38://up
     snackeY[snackeY.length - 1]--;
     break;
    case 39://right
     snackeX[snackeX.length - 1]++;
     break;
    case 40://down
     snackeY[snackeY.length - 1]++;
     break;

   }
   //eat food
   if (snackeX[snackeX.length - 1] == foodX && snackeY[snackeY.length - 1] == foodY)
   {
    //eat the food
    snackeX[snackeX.length]=snackeX[snackeX.length-1];
    snackeY[snackeY.length]=snackeY[snackeY.length-1];
    // rearrange the snake body
    for(i=snackeX.length-1;i>0;i--)
    {
     snackeX[i]=snackeX[i-1];
     snackeY[i]=snackeY[i-1];
    }
    createFood();// regenerate the next food
   }
   //Out of the game border
   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);//stop moving
    alert("Game over");
    return ;
   }

   createSnack();//recreate the snake body
  }
  //keyboard event
  function keyDown(){
   var newKey = event.keyCode//Keyboard key
   if(keyCode == 37 && newKey == 39||
    keyCode == 39 && newKey == 37||
    keyCode == 38 && newKey == 40||
    keyCode == 40 && newKey == 38
   ) {
    // Forbid turnaround
    return ;
   } else if(newKey>=37&&newKey<=40){
    //the user pressed a certain direction key
    keyCode=newKey;
    }
    else{
     //other keys
   }
  }
  //run
  window.onload =function () {
   createMap(); //createMap
   createSnack();//create snake body
   createFood();//create food

   move= setInterval("snackMove()",200)//Snake body move
   document.onkeydown = keyDown;//get the arrow keys
  }
 </script>
</head>
<body>
<div id="map"></div>
</body>
</html>

III. 効果の実装

矢印キーを押して、蛇の体の動きを実現します。

以上が今回の記事の内容ですが、皆様の学習の一助となり、スクリプトハウスをより一層応援していただければ幸いです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します