js 贪吃蛇

最新推荐文章于 2018-08-28 10:01:14 发布
默默道来
最新推荐文章于 2018-08-28 10:01:14 发布
阅读量237
点赞数
文章标签： javascript
本文链接：https://blog.csdn.net/qq_31016459/article/details/53434403
版权
js贪吃蛇，用来试验一下
以下为代码：
<!doctype html>

<html>
<head>
  <meta charset="utf-8"/>
  <title>贪吃蛇</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
    ul, li {
      list-style: none;
    }
    #box {
      width: 100%;
      height: 100%;
      background: #fff;
    }
    #first {
      width: 1000px;
      height: 650px;
      margin: 0px auto;
      background-image: url(./img/logo.jpg);
      background-position: center center;
      background-repeat: no-repeat;
      background-size: contain;
      padding: 100px 0 0 0;
    }
    #first .menu {
      padding: 190px 0 0 0;
      width: 200px;
      margin: 0px auto;
      box-sizing: border-box;
      cursor: pointer;
    }
    #first .menu li {
      height: 40px;
      border: 2px solid #000;
      background: orange;
      margin: 20px 0;
      text-align: center;
      line-height: 40px;
      border-radius: 15px 0px;
    }
    #first #start {
      width: 200px;
      height: 80px;
      line-height: 80px;
      text-align: center;
      font-size: 25px;
      background-color: #000;
      color: #fff;
      margin: 0 auto;
      border-radius: 15px 0px;
      cursor: pointer;
    }
    #second {
      display: none;
      width: 1000px;
      height: 650px;
      margin: 0px auto;
      padding: 100px 0 0 0;
    }
    #content {
      text-align: center;
    }
    #fen {
      color: #F66;
      font-weight: 900;
    }
  </style>
</head>
<script>
  var map, food, snake, time;
  var sum = 0;

  function Map() {
    this.width = 1000; //宽度
    this.height = 400;  //高度
    this.color = "#eeeeee";  //颜色
    this.position = "absolute";//蛇、地图、食物有可能重叠。
    this._map = null; //用于保存DOM元素
    this.show = function () {
      this._map = document.createElement('div');
      this._map.style.width = this.width + 'px';
      this._map.style.height = this.height + 'px';
      this._map.style.backgroundColor = this.color;
      this._map.style.position = this.position;
      //this._map.setAttribute("id","swarp");
      //document.getElementsByTagName("body")[0].appendChild(this._map);
      document.getElementById("second").appendChild(this._map);
    };
    this.hide = function () {
      document.getElementById("second").removeChild(this._map);
    }
  }

  function Food() {
    this.width = 20;
    this.height = 20;
    this.color = "green";
    this.position = "absolute";
    this.x = 0;  //横向第几个格
    this.y = 0;  //纵向第几个格
    this._food = null;  //保存之前创建事物的div
    this.show = function () {
      if (this._food == null) {
        this._food = document.createElement("div");
        this._food.style.width = this.width + 'px';
        this._food.style.height = this.height + 'px';
        this._food.style.backgroundColor = this.color;
        this._food.style.position = this.position;
        //追加div
        map._map.appendChild(this._food);
        //map.appendChild(div)   map为js对象 不是DOM对象
        //document.getElementById("swarp").appendChild(div);
      }
      //产生随机数 横向0~49 纵向0~19
      this.x = Math.floor(Math.random() * 50);
      this.y = Math.floor(Math.random() * 20);
      //设置位置
      this._food.style.left = (this.x * 20) + 'px';
      this._food.style.top = (this.y * 20) + 'px';

    },
      this.hide = function () {
        this._food = null;
      }

  }

  function Snack() {
    this.width = 20;
    this.height = 20;
    this.direct = "right";
    this.position = "absolute";
    //蛇节信息  每一个数组元素表示一个蛇节 每一个数组元素的前两个表示位置
    //最后一个null 来保存每一个DOM元素
    this.body = [
      [3, 3, 'red', null],
      [2, 3, "blue", null],
      [1, 3, "blue", null]
    ];
    this.setDirect = function (code) {
      switch (code) {
        case 37:
          this.direct = "left";
          break;
        case 38:
          this.direct = "up";
          break;
        case 39:
          this.direct = "right";
          break;
        case 40:
          this.direct = "down";
          break;
      }
    }
    this.show = function () {
      for (var i = 0; i < this.body.length; i++) {
        //如果是第一次执行,就要创建DOM，还让他移动；
        if (this.body[i][3] == null) {
          this.body[i][3] = document.createElement("div");
          this.body[i][3].style.width = this.width + 'px';
          this.body[i][3].style.height = this.height + 'px';
          this.body[i][3].style.position = this.position;
          this.body[i][3].style.backgroundColor = this.body[i][2];
          map._map.appendChild(this.body[i][3]);
        }
        //如果不是第一次执行(第一次执行，就要创建DOM)，那么只让他移动；
        this.body[i][3].style.left = (this.body[i][0] * 20) + 'px';
        this.body[i][3].style.top = (this.body[i][1] * 20) + 'px';

      }
    };
    this.move = function () {
      //让最后一个  一个一个向前移动
      for (var i = this.body.length - 1; i > 0; i--) {
        //var tmp = this.body[i];
        this.body[i][0] = this.body[i - 1][0];
        this.body[i][1] = this.body[i - 1][1]
      }
      //运行上面for循环之后，除了蛇头，所有蛇身的坐标都向前移动一次
      //蛇头向右+1；
      //判断方向，便于设置蛇头的新方向
      switch (this.direct) {
        case "left":
          this.body[0][0] -= 1;
          break;
        case "up":
          this.body[0][1] -= 1;
          break;
        case "right":
          this.body[0][0] += 1;
          break;
        case "down":
          this.body[0][1] += 1;
          break;
      }
      //this.body[0][0]+=1;
      //判断吃到食物
      if (this.body[0][0] == food.x && this.body[0][1] == food.y) {
        //吃到食物  增加蛇节
        var length = this.body.length - 1;
        var x = this.body[length][0];
        var y = this.body[length][1];
        this.body.push([x, y, 'blue', null]);
        sum++;
        document.getElementById("fen").innerHTML = sum;
        food.show();
      }

      //判断撞墙死
      if (this.body[0][0] == 50 || this.body[0][0] == -1 || this.body[0][1] == -1 || this.body[0][1] == 20) {
        //snake.hide();
        alert("撞墙死");
        clearTimeout(time);
        return false;
      }

      //判断吃到自己
      for (var i = 1; i < this.body.length; i++) {
        if (this.body[0][0] == this.body[i][0] && this.body[0][1] == this.body[i][1]) {
          alert("吃到自己了，死");
          clearTimeout(time);
          return false;
        }
      }
      this.show();
    };
    /*this.hide = function(){
    var len = this.body.length;
    for(var i = 0;i<len;i++){
    this.body[i][3] = null;
    map._map.removeChild(this.body[i][3]);
    }
    };*/
  }

  function start() {
    first.style.display = 'none';
    second.style.display = 'block';
    //将地图对象添加到body中
    map.show();
    //将食物放在地图中
    food.show();
    //将蛇放到地图中
    snake.show();
  }

  window.onload = function () {
    //实例化地图对象
    map = new Map();
    //map.show();
    //实例化食物对象
    //将食物放在地图中
    food = new Food();
    //food.show();
    //实例化蛇对象
    snake = new Snack();
    //snake.show();
    //snake 全局 才会找到  不然会被回收 就找不到move方法
    /*time = setInterval('snake.move()',500);*/
    document.onkeyup = function (event) {
      var evt = window.event || event;
      var code = evt.keyCode;
      console.log(code);
      snake.setDirect(code);
    }

    var first = document.getElementById("first");
    var second = document.getElementById("second");
    var menu = document.getElementById("menu");
    var menuList = document.getElementsByTagName("li");
    var startBtn = document.getElementById("start");
    startBtn.addEventListener("click", function (event) {
      event.stopPropagation();
      console.log(first.getAttribute("data-start"));
      if (first.getAttribute("data-start") == "") {
        alert("请选择难度哦！")
      } else {
        var leave = first.getAttribute("data-start");
        console.log(typeof leave);
        switch (leave) {
          case '0':
            start();
            time = setInterval('snake.move()', 1500);
            break;
          case '1':
            start();
            time = setInterval('snake.move()', 1000);
            break;
          case '2':
            start();
            time = setInterval('snake.move()', 500);
            break;
          case '3':
            start();
            time = setInterval('snake.move()', 100);
            break;
        }
      }
    });

    menu.addEventListener("click", function (event) {
      event.stopPropagation();
      var data = event.target.getAttribute("data");
      first.setAttribute("data-start", data);
    });
  }
</script>
<body>

<div id="box">
  <div id="first" data-start="">
    <ul id="menu" class="menu">
      <li data="3">超级困难</li>
      <li data="2">非常困难</li>
      <li data="1">一般困难</li>
      <li data="0">就选我吧</li>
    </ul>
    <div id="start">开始吧</div>
  </div>
  <div id="second">
    <div id="content">
      共计<span id="fen">0</span>分
    </div>
  </div>
</div>
</body>
</html>