JavaScript推箱子项目

JS小项目----推箱子

面向对象思想来编写Java Script 推箱子

需要源码联系企鹅1825010650，后续继续更新小项目源码

创建地图类Map.js

var _Map = function() {
  this.mapGrid = [
    // 创建地图  8*8 0代表的是墙
    [0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0]
  ];
  this.mapimg = 'img/wall.gif';
  this.Showmap = function(roadList, person, mubiaolist) {
    // 声明一个方法来传入其他对象显示在地图中
    for (var i = 0; i < roadList.length; i++) {
      // 创建路在地图中
      var x = roadList[i][0];
      var y = roadList[i][1];
      this.mapGrid[x][y] = 1;
    }
    this.mapGrid[person[0]][person[1]] = 2;
    // 创建人在地图中
    // console.log(person[0]);
    for (var j = 0; j < mubiaolist.length; j++) {
      // 创建目标点在地图中
      // console.log(mubiaolist);
      var h = mubiaolist[j][0];
      var l = mubiaolist[j][1];
      this.mapGrid[h][l] = 3;
    }
    this.boxlist = [[4, 4], [2, 3], [3, 5], [5, 4]];
    for (var k = 0; k < this.boxlist.length; k++) {
      // 创建箱子在地图中
      var h = this.boxlist[k][0];
      var l = this.boxlist[k][1];
      this.mapGrid[h][l] = 4;
    }
  };
  var self = this;
  var H, L;
  // 控制人物移动的方法
  this.controller = function(neoper, dir, pstand) {
    H = neoper[0]; // 获取人物的当前位置；
    L = neoper[1];
    //判断人物的方向
    switch (dir) {
      case 'left':
        neoper[1] -= 1;
        break;
      case 'right':
        neoper[1] += 1;
        break;
      case 'up':
        neoper[0] -= 1;
        break;
      case 'down':
        neoper[0] += 1;
        break;
    }
    // 判断是否撞到墙，当人物的行和列为0的时候就是撞到墙
    if (self.mapGrid[neoper[0]][neoper[1]] == 0) {
      neoper[0] = H; // 撞到墙后让人物保持不动
      neoper[1] = L;
      return;
    } // 判断下一个位置是否是路
    else if (self.mapGrid[neoper[0]][neoper[1]] == 1) {
      self.mapGrid[neoper[0]][neoper[1]] = 2; // 位置发生改变时判断是路的话让这个路的坐标变为人
      self.mapGrid[H][L] = pstand[0]; // 位置发生改变后之前人的位置变为路
      pstand[0] = 1;
    } // 判断下一个位置是否是目标点
    else if (self.mapGrid[neoper[0]][neoper[1]] == 3) {
      self.mapGrid[neoper[0]][neoper[1]] = 2;
      self.mapGrid[H][L] = pstand[0];
      pstand[0] = 3;
    } // 判断下一个位置是否箱子
    else if (self.mapGrid[neoper[0]][neoper[1]] == 4) {
      var perH = neoper[0]; // 记录箱子的位置
      var perL = neoper[1];
      switch (dir) {
        case 'left':
          neoper[1] -= 1;
          break;
        case 'right':
          neoper[1] += 1;
          break;
        case 'up':
          neoper[0] -= 1;
          break;
        case 'down':
          neoper[0] += 1;
          break;
      }
      if (self.mapGrid[neoper[0]][neoper[1]] == 1) {
        // 箱子前面是路
        self.mapGrid[neoper[0]][neoper[1]] = 4; // 下一个位置变为箱子
        self.mapGrid[perH][perL] = 2; // 箱子之前的位置变为人
        self.mapGrid[H][L] = pstand[0]; //  位置发生改变后之前人的位置变为路
        pstand[0] = 1;
      } else if (self.mapGrid[neoper[0]][neoper[1]] == 3) {
        //箱子前面是目标点
        self.mapGrid[neoper[0]][neoper[1]] = 5;
        self.mapGrid[perH][perL] = 2;
        self.mapGrid[H][L] = pstand[0];
        pstand[0] = 1;
      } else if (
        self.mapGrid[neoper[0]][neoper[1]] == 5 ||
        self.mapGrid[neoper[0]][neoper[1]] == 4 ||
        self.mapGrid[neoper[0]][neoper[1]] == 0
      ) {
        // 箱子前面是已经被放置的目标点
        neoper[0] = H;
        neoper[1] = L;
        return;
      }
      neoper[0] = perH;
      neoper[1] = perL;
    } // 判断下一个位置是否是已被放置的目标点
    else if (self.mapGrid[neoper[0]][neoper[1]] == 5) {
      //箱子前面是已被放置目标点
      var perH = neoper[0]; // 记录箱子的位置
      var perL = neoper[1];
      switch (dir) {
        case 'left':
          neoper[1] -= 1;
          break;
        case 'right':
          neoper[1] += 1;
          break;
        case 'up':
          neoper[0] -= 1;
          break;
        case 'down':
          neoper[0] += 1;
          break;
      }
      if (self.mapGrid[neoper[0]][neoper[1]] == 1) {
        // 箱子前面是路
        self.mapGrid[neoper[0]][neoper[1]] = 4; // 下一个位置变为箱子
        self.mapGrid[perH][perL] = 2; // 箱子之前的位置变为人
        self.mapGrid[H][L] = pstand[0]; //  位置发生改变后之前人的位置变为路
        pstand[0] = 3; //人移动完成之后变为目标点
      } else if (self.mapGrid[neoper[0]][neoper[1]] == 3) {
        //箱子前面是目标点
        self.mapGrid[neoper[0]][neoper[1]] = 5;
        self.mapGrid[perH][perL] = 2;
        self.mapGrid[H][L] = pstand[0];
        pstand[0] = 3;
      } else if (
        self.mapGrid[neoper[0]][neoper[1]] == 5 ||
        self.mapGrid[neoper[0]][neoper[1]] == 4 ||
        self.mapGrid[neoper[0]][neoper[1]] == 0
      ) {
        // 箱子前面是已经被放置的目标点
        neoper[0] = H;
        neoper[1] = L;
        return;
      }
    }
  };
};

创人物类Person.js

var _Person = function() {
  this.neoper = [4, 5]; // 人物的初始位置
  this.personimg = 'img/left.gif'; // 人物的图片
  this.pstand = [1];
  this.permove = function(dir) {
    // 人物的移动
    // console.log(dir);
    switch (dir) {
      case 'left':
        this.personimg = 'img/left.gif';
        break;
      case 'right':
        this.personimg = 'img/right.gif';
        break;
      case 'up':
        this.personimg = 'img/up.gif';
        break;
      case 'down':
        this.personimg = 'img/down.gif';
        break;
    }
  };
};

创建路类Road.js

var _Road=function(){
	this.roadlist=[
		[1,3],[2,3],[3,3],[3,4],[3,5],[3,6],[4,1],[4,2],[4,3],[4,4],[5,4],[6,4]
	];
	this.roadimg='img/passageway.gif';
	
}

创建箱子类Box.js

var _Box = function() {
  this.Boxlist = [4, 3];
  this.BoxlistImg = 'img/box1.png';
};

创建目标点Mubiao.js

var _Mubiao = function() {
  this.mubiaolist = [[4, 1], [1, 3], [3, 6], [6, 4]];
  this.mubiaoImg = 'img/Destination.gif';
  this.mubiaoImg2 = 'img/redbox.gif';
};

主页面index.html文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      * {
        margin: 0px;
        padding: 0px;
      }

      .map_div {
        width: 800px;
        height: 800px;
        margin: 10px auto;
        font-size: 0px;
        border: 1px black solid;
      }

      img {
        width: 100px;
        height: 100px;
      }
    </style>
    <script src="Msp.js" type="text/javascript" charset="utf-8"></script>
    <script src="Road.js" type="text/javascript" charset="utf-8"></script>
    <script src="Person.js" type="text/javascript" charset="utf-8"></script>
    <script src="Mubiao.js" type="text/javascript" charset="utf-8"></script>
    <script src="Box.js" type="text/javascript" charset="utf-8"></script>
    <script>
      var per = new _Person();
      var imglist = new Array(); // 声明数组来接收图片先创建一维数组
      // onload加载事件
      window.onload = function() {
        //通过class找到创建的地图DIV
        var map_div = document.getElementsByClassName('map_div')[0];
        var mubiao = new _Mubiao();
        var _maps = new _Map();
        var rond = new _Road();
        var boxlist = new _Box();
        for (var i = 0; i < _maps.mapGrid.length; i++) {
          // 循环遍历列
          imglist[i] = new Array(); // 再声明二维数组
          for (var j = 0; j < _maps.mapGrid[i].length; j++) {
            // 循环遍历行
            var img = document.createElement('img'); // 每个数组元素创建一个img
            _maps.Showmap(rond.roadlist, per.neoper, mubiao.mubiaolist);
            // 调用显示地图方法显示路,人物,目标点
            switch (_maps.mapGrid[i][j]) {
              // 用switch来判断每一个元素对应的图片
              case 0:
                img.src = _maps.mapimg;
                break;
              case 1:
                img.src = rond.roadimg;
                break;
              case 2:
                img.src = per.personimg;
                break;
              case 3:
                img.src = mubiao.mubiaoImg;
                break;
              case 4:
                img.src = boxlist.BoxlistImg;
                break;
              case 5:
                img.src = boxlist.BoxlistImg2;
                break;
            }
            map_div.appendChild(img); // 将创建的图片添加进地图中
            imglist[i][j] = img; // 将每个图片存入二维数组中，以便刷新
          }
        }
        window.onkeydown = function(even) {
          // 定义键盘事件
          var dir = '';
          switch (even.keyCode) {
            case 37:
              dir = 'left';
              break;
            case 38:
              dir = 'up';
              break;
            case 39:
              dir = 'right';
              break;
            case 40:
              dir = 'down';
              break;
          }
          per.permove(dir); // 调用人移动的方法传入dir参数来判断
          // imglist[per.neoper[0]][per.neoper[1]].src = per.personimg;
          _maps.controller(per.neoper, dir, per.pstand);
          // 调用控制器方法控制移动
          refresh();
          // 刷新页面
        };

        // 刷新页面的方法
        var refresh = function() {
          for (var i = 0; i < _maps.mapGrid.length; i++) {
            for (var j = 0; j < _maps.mapGrid[i].length; j++) {
              switch (_maps.mapGrid[i][j]) {
                case 0:
                  imglist[i][j].src = _maps.mapimg;
                  break;
                case 1:
                  imglist[i][j].src = rond.roadimg;
                  break;
                case 2:
                  imglist[i][j].src = per.personimg;
                  break;
                case 3:
                  imglist[i][j].src = mubiao.mubiaoImg;
                  break;
                case 4:
                  imglist[i][j].src = boxlist.BoxlistImg;
                  break;
                case 5:
                  imglist[i][j].src = mubiao.mubiaoImg2;
                  break;
              }
            }
          }
        };
      };
    </script>
  </head>
  <body>
    <div class="map_div"></div>
  </body>
</html>