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

最新评论