jsp网页实现贪吃蛇小游戏

2024-10-09 17:24:13

本文实例为大家分享了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贪吃蛇游戏的具体代码,供大家参考,具体内容如下先不多说先上图下面是代码部分(这里你可以根据需要改变蛇头和身体还有食物的图片,然后默认的样式是使用纯颜色的如果没有更改我的背景图片的话------改这些图开始是想搞笑一下朋友哈哈哈,请不要在意哈),还有操作键是使用 ↑ ↓ ← → ) <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo
纯js和css完成贪吃蛇小游戏demo

本文实例为大家分享了js贪吃蛇小游戏demo,纯js和css完成,供大家参考,具体内容如下 <!doctype html> <html> <meta charset="utf-8"> <head> <style> *{ margin: 0; padding:0; } .content{ position: absolute; width: 500px; height: 500px; background-color: #212
JS学习笔记之贪吃蛇小游戏demo实例详解

本文实例讲述了JS学习笔记之贪吃蛇小游戏demo实例.分享给大家供大家参考,具体如下: 最近跟着视频教程打了一个贪吃蛇, 来记录一下实现思路, 先上代码静态页 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>贪吃蛇</title> </head> <style> *{ mar
原生javascript制作贪吃蛇小游戏的方法分析

本文实例讲述了原生javascript制作贪吃蛇小游戏的方法.分享给大家供大家参考,具体如下:     HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta char
js实现贪吃蛇小游戏（容易理解）

话不多说,请看代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇</title> <link rel="stylesheet" href="style.css"> <script src="style.js" >
js实现九宫格拼图小游戏

效果如下: 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>九宫格拼图</title> <style> *{ padding: 0; margin: 0; border: 0; } /* *是通配符,给所有的元素去掉默认样式,因为有的浏览器会默认加上一些样式,这可能会给布局带来问题 */ body{ width: 100
JavaScript编写连连看小游戏

天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开最终的效果图: 写连连看之前要先考虑哪些呢? 1:如何判断两个元素可以连接呢, 刚刚开始的时候我也纳闷, 可以参考这里:打开: 2:模板引擎怎么选择呢, 我用了底线库的template,因为语法简单. 本来想用Handlebars,但是这个有点大啊, 而且底线库也提供很多常用工具方法( •̀ ω •́ )y:
js猜数字小游戏的简单实现代码

复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="
基于javascript实现贪吃蛇经典小游戏

本文实例为大家分享了JS实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt
js实现贪吃蛇小游戏

本文实例为大家分享了js实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
20行js代码实现的贪吃蛇小游戏

前言最近在csdn上看到一位大神用20行代码就写出了一个贪吃蛇的小游戏,感觉被惊艳到了,就试着读了一下这段代码,阅读过程中不断为作者写法的巧妙而叫绝,其中我发现自己对运算符优先级和一些js的技巧不是很清楚,所以看完之后决定把思路分享出来,方便和我一样的小白学习. 我对代码稍稍做了些修改,并添加了一些注释,方便理解. 示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="
JavaScript实现打地鼠小游戏

在写这个打地鼠的游戏开始首先要清楚每一步该做什么然后再一步一步搭好框架再完善功能. 1.创建table三行三列,用来存放坑(图片) 2.获得所有的图片标签 3.老鼠的动作有①.冒出来 4.②. 老鼠跑了 5.③.老鼠被打死了 6.完善功能一.首先实现第一步,用table创建一个三行三列的坑 <div id = "content"> <h2>打地鼠</h2><br/> <table id = "background&qu

jsp网页实现贪吃蛇小游戏

相关推荐

随机推荐