자바스크립트 쓰기 푸시박스 game_javascript 스킬

푸시박스 게임은 오래된 게임입니다. 푸시박스 게임의 간단한 구현과 제가 찾은 몇 가지 참고 영상에 대해 말씀드리겠습니다.

렌더링은 다음과 같습니다.

이 상자 끌기 게임은 zepto의 터치 모듈을 사용하여 손가락으로 화면을 밀어서 거북이가 다른 방향으로 이동하도록 제어했습니다.

소코반 게임은 비교적 간단하기 때문에 코드는 절차적인 방식으로 직접 작성됩니다. 모듈은 두 개의 뷰와 모델이고 나머지는 사용자의 이벤트 컨트롤러입니다. 사용자가 키보드의 방향 키를 누를 때마다. 데이터가 변경되고 게임의 정적 HTML을 다시 생성한 다음 innerHTML을 사용하여 인터페이스에 삽입하여 자동으로 DOM 노드를 생성합니다.

게임의 레벨 모델은 데이터입니다. 각 레벨의 데이터를 세 부분으로 나누었습니다.

지도 데이터, 2차원 배열(지도 데이터에는 타일, 상자의 대상 위치, 빈 위치가 포함됨)

박스 데이터, 1차원 배열(박스의 초기 위치)
작은 거북이 데이터, json 객체
각 레벨에는 해당 게임 레벨 데이터가 있습니다. 시뮬레이션 데이터는 다음과 같습니다.

level: [
  {
    //0是空的地图
    //1是板砖
    //3是目标点
    state:[
      [0,0,1,1,1,0,0,0,0],
      [0,1,1,3,3,1,0,0,0],
      [0,1,0,0,0,0,1,0,0],
      [0,1,0,0,0,0,1,0,0],
      [0,1,1,1,1,1,1,0,0]
    ],
    person: {x : 2, y : 2},
    box: [{x:3, y : 2},{x:4,y:2}]
  },
  //第二关
  {
    //0是空的地图
    //1是板砖
    //3是目标点
    state:[
      [0,1,1,1,1,1,0,0],
      [0,1,0,0,1,1,1,0],
      [0,1,0,0,0,0,1,0],
      [1,1,1,0,1,0,1,1],
      [1,3,1,0,1,0,0,1],
      [1,3,0,0,0,1,0,1],
      [1,3,0,0,0,0,0,1],
      [1,1,1,1,1,1,1,1]
    ],
    person: {x : 2, y : 2},
    box: [{x:3, y : 2}, {x:2,y:5} ,{x:5, y:6}]
    /*
    box : [
      {x:3, y : 1},
      {x:4, y : 1},
      {x:4, y : 2},
      {x:5, y : 5}
    ]
    */
  },
  //第三关
  {
    //0是空的地图
    //1是板砖
    //3是目标点
    state:[
      [0,0,0,1,1,1,1,1,1,0],
      [0,1,1,1,0,0,0,0,1,0],
      [1,1,3,0,0,1,1,0,1,1],
      [1,3,3,0,0,0,0,0,0,1],
      [1,3,3,0,0,0,0,0,1,1],
      [1,1,1,1,1,1,0,0,1,0],
      [0,0,0,0,0,1,1,1,1,0]
    ],
    person: {x : 8, y : 3},
    box: [{x:4, y : 2}, {x:3,y:3} ,{x:4, y:4},{x:5, y:3},{x:6, y:4}]
  },
  //第四关
  {
    //0是空的地图
    //1是板砖
    //3是目标点
    state:[
      [0,1,1,1,1,1,1,1,0,0],
      [0,1,0,0,0,0,0,1,1,1],
      [1,1,0,1,1,1,0,0,0,1],
      [1,0,0,0,0,0,0,0,0,1],
      [1,0,3,3,1,0,0,0,1,1],
      [1,1,3,3,1,0,0,0,1,0],
      [0,1,1,1,1,1,1,1,1,0]
    ],
    person: {x : 2, y : 3},
    box: [{x:2, y : 2}, {x:4,y:3} ,{x:6, y:4},{x:7, y:3},{x:6, y:4}]
  },
  //第五关
  {
    //0是空的地图
    //1是板砖
    //3是目标点
    state:[
      [0,0,1,1,1,1,0,0],
      [0,0,1,3,3,1,0,0],
      [0,1,1,0,3,1,1,0],
      [0,1,0,0,0,3,1,0],
      [1,1,0,0,0,0,1,1],
      [1,0,0,1,0,0,0,1],
      [1,0,0,0,0,0,0,1],
      [1,1,1,1,1,1,1,1]
    ],
    person: {x : 4, y : 6},
    box: [{x:4, y : 3}, {x:3,y:4} ,{x:4, y:5}, {x:5,y:5}]
    /*
     box : [
     {x:3, y : 1},
     {x:4, y : 1},
     {x:4, y : 2},
     {x:5, y : 5}
     ]
     */
  },
    //第六关
  {
    //0是空的地图
    //1是板砖
    //3是目标点
    state:[
      [0,0,0,0,1,1,1,1,1,1,1,0],
      [0,0,0,0,1,0,0,1,0,0,1,0],
      [0,0,0,0,1,0,0,0,0,0,1,0],
      [1,1,1,1,1,0,0,1,0,0,1,0],
      [3,3,3,1,1,0,0,0,0,0,1,1],
      [3,0,0,1,0,0,0,0,1,0,0,1],
      [3,0,0,0,0,0,0,0,0,0,0,1],
      [3,0,0,1,0,0,0,0,1,0,0,1],
      [3,3,3,1,1,1,0,1,0,0,1,1],
      [1,1,1,1,1,0,0,0,0,0,1,0],
      [0,0,0,0,1,0,0,1,0,0,1,0],
      [0,0,0,0,1,1,1,1,1,1,1,0]
    ],
    person: {x : 5, y : 10},
    box: [
      {x:5, y:6},
      {x:6, y:3},
      {x:6, y:5},
      {x:6, y:7},
      {x:6, y:9},
      {x:7, y:2},
      {x:8, y:2},
      {x:9, y:6}
    ]
  }
]

아주 중요한 것 중 하나는 푸시박스 게임의 주요 논리입니다. 꼬마 거북이가 걸을 수만 있는 곳은 빈 공간이고, 거북이 앞에 벽이 있으면 걸을 수 없거나, 거북이 앞에 상자가 있으면 상자 앞쪽을 판단하세요. 벽이 없으면 거북이와 상자 모두 앞으로 나아갈 수 있습니다. 벽이 있으면 움직일 수 없습니다. 작은 거북이가 떠날 때마다 지도 데이터가 변경되고 인터페이스가 다시 생성됩니다. 이 주기에서는 작은 거북이가 걸어갈 때마다 지도 데이터의 상자 데이터가 모두 정렬되어 있는지 확인합니다. , 사용자에게 다음 레벨이 표시됩니다.

게임의 템플릿 엔진은 HandlebarsJS를 사용합니다. 공식 웹사이트에 가면 API를 볼 수 있습니다. 제가 쓴 블로그입니다. Handlebars 사용법 문서(Handlebars.js): 오픈, 템플릿 콘텐츠:

<script id="tpl" type="text/x-handlebars-template">
  {{#initY}}{{/initY}}
  {{#each this}}
    {{#each this}}
      <div class="{{#getClass this}}{{/getClass}}" data-x="{{@index}}" data-y="{{#getY}}{{/getY}}" style="left:{{#calc @index}}{{/calc}};top:{{#calc 1111}}{{/calc}}">
        <!--{{@index}}
        {{#getY}}{{/getY}}
        -->
      </div>
    {{/each}}
    {{#addY}}{{/addY}}
  {{/each}}
</script>

initY, getClass, getY, calc,,,,를 포함하여 Handlebars에 대한 여러 도우미가 정의되어 있습니다. 템플릿 엔진은 주로 보조 기능으로 사용됩니다. 여기서는 코드의 가독성이 떨어집니다. 조금 더 나쁘게도 클로저는 전역 변수의 오염을 피하기 위해 변수를 저장하는 데에도 사용됩니다.

(function() {
  var y = 0;
  Handlebars.registerHelper("initY", function() {
    y = 0;
  });
  Handlebars.registerHelper("addY", function() {
    y++;
  });
  Handlebars.registerHelper("getY", function() {
    return y;
  });
  Handlebars.registerHelper("calc", function(arg) {
    //console.log(arg)
    if(arg!==1111) {
      return 50*arg + "px";
    }else{
      return 50*y + "px";
    };
  });
  Handlebars.registerHelper("getClass", function(arg) {
    switch( arg ) {
      case 0 :
        return "bg"
      case 1 :
        return "block"
      case 2 :
        return "box"
      case 3 :
        return "target"
    };
  });
  window.util = {
    isMobile : function() {
      return navigator.userAgent.toLowerCase().indexOf("mobile") !== -1 || navigator.userAgent.toLowerCase().indexOf("android") !== -1 || navigator.userAgent.toLowerCase().indexOf("pad") !== -1;
    }
  }
})();

모바일 기기와 호환되어야 하기 때문에 휴대폰인지 태블릿인지 확인해야 합니다. 그렇다면 해당 DOM 요소(방향키 DOM 요소)를 추가한 후 해당 이벤트를 바인딩하겠습니다. zeptoJS는 터치 모듈을 제공합니다. 공식 웹사이트로 이동하여 찾은 다음 추가 참조를 추가하고 주소를 연 다음 swipeLeft, swipeUp, swipeDown, swipeRight 이벤트를 사용할 수 있습니다.

if( window.util.isMobile() ) {
  $(window).on("swipeLeft",function() {
    _this.step("left");
  }).on("swipeRight",function() {
    _this.step("right");
  }).on("swipeUp",function() {
    _this.step("top");
  }).on("swipeDown",function() {
    _this.step("bottom");
  });
  mobileDOM();

  $(".arrow-up").tap(function() {
    _this.step("top");
  });
  $(".arrow-down").tap(function() {
    _this.step("bottom");
  });
  $(".arrow-left").tap(function() {
    _this.step("left");
  });
  $(".arrow-right").tap(function() {
    _this.step("right");
  });
}else{
  $(window).on("keydown", function(ev) {
    var state = "";
    switch( ev.keyCode ) {
      case 37 :
        state = "left";
      break;
      case 39 :
        state = "right";
      break;
      case 38 :
        state = "top";
      break;
      case 40 :
        state = "bottom";
      break;
    };
    _this.step(state)
  });
};

사용자의 현재 레벨을 저장해야 하기 때문에 레벨이 성공적으로 지워질 때마다 사용자가 플레이를 원하지 않거나 종료할 때 jQuery-cookies 플러그인도 사용합니다. 다른 이유로 인해 브라우저가 닫히면 며칠 후에 다시 플레이하고 싶을 때 계속 플레이할 수 있습니다.

if( G.now+1 > G.level.length-1 ) {
  alert("闯关成功");
  return ;
}else{
  //如果可用的等级大于当前的等级，就把level设置进去;
  if( G.now+1 > parseInt( $.cookie('level') || 0 )) {
    $.cookie('level' , G.now+1 , { expires: 7 });
  };
  start( G.now+1 );
  return ;
};

모든 코드는 여기에 있습니다:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://sqqihao.github.io/games/rusBlock/libs/Tiny-Alert/css/zepto.alert.css"/>
  <script src="libs/jquery-1.9.1.min.js"></script>
  <script src="libs/handlebars.js"></script>
  <script src="libs/jquery-cookie.js"></script>
  <script src="http://sqqihao.github.io/games/rusBlock/libs/Tiny-Alert/js/zepto.alert.js"></script>
  <script id="tpl" type="text/x-handlebars-template">
    {{#initY}}{{/initY}}
    {{#each this}}
      {{#each this}}
        <div class="{{#getClass this}}{{/getClass}}" data-x="{{@index}}" data-y="{{#getY}}{{/getY}}" style="left:{{#calc @index}}{{/calc}};top:{{#calc 1111}}{{/calc}}">
          <!--{{@index}}
          {{#getY}}{{/getY}}
          -->
        </div>
      {{/each}}
      {{#addY}}{{/addY}}
    {{/each}}
  </script>
  <script>
    (function() {
      var y = 0;
      Handlebars.registerHelper("initY", function() {
        y = 0;
      });
      Handlebars.registerHelper("addY", function() {
        y++;
      });
      Handlebars.registerHelper("getY", function() {
        return y;
      });
      Handlebars.registerHelper("calc", function(arg) {
        //console.log(arg)
        if(arg!==1111) {
          return 50*arg + "px";
        }else{
          return 50*y + "px";
        };
      });
      Handlebars.registerHelper("getClass", function(arg) {
        switch( arg ) {
          case 0 :
            return "bg"
          case 1 :
            return "block"
          case 2 :
            return "box"
          case 3 :
            return "target"
        };
      });
      window.util = {
        isMobile : function() {
          return navigator.userAgent.toLowerCase().indexOf("mobile") !== -1 || navigator.userAgent.toLowerCase().indexOf("android") !== -1 || navigator.userAgent.toLowerCase().indexOf("pad") !== -1;
        }
      }
    })();
  </script>
</head>
<style>
  #game{
    display: none;
  }
  #house{
    position: relative;
  }
  .bg{
    position: absolute;
    width:50px;
    height:50px;
    box-sizing: border-box;
  }
  .block{
    position: absolute;
    background-image: url(imgs/wall.png);
    width:50px;
    height:50px;
    box-sizing: border-box;
  }
  .box{
    position: absolute;
    background: #fbd500;
    width:50px;
    height:50px;
    background-image: url(imgs/box.png);
  }
  .target{
    position: absolute;
    background: url(imgs/target.jpg);
    background-size: 50px 50px;;
    width:50px;
    height:50px;
    box-sizing: border-box;
  }
  #person{
    background-image: url(imgs/person.png);
    width:50px;
    height:50px;
    position: absolute;
  }
  #person.up{
    background-position: 0 0;
  }
  #person.right{
    background-position:-50px 0 ;
  }
  #person.bottom{
    background-position:-100px 0 ;
  }
  #person.left{
    background-position:-150px 0 ;
  }
  /*移动端的DOM*/
  .operate-bar{
    font-size:30px;
  }
  .height20percent{
    height:30%;
  }
  .height30percent{
    height:30%;
  }
  .height40percent{
    height:40%;
  }
  .height100percent{
    height:100%;
  }
  .font30{
    font-size:30px;
    color:#34495e;
  }
</style>
<body>
  <div id="select">
    <div class="container">
      <div class="row">
        <p class="text-info">
          已经解锁的关卡:
        <p id="level">
        </p>
        </p>
        <button id="start" class="btn btn-default">
          开始游戏
        </button>
      </div>
    </div>
  </div>
  <div id="game" class="container">
    <div class="row">
      <button onclick="location.reload()" class="btn btn-info" >
        返回选择关卡重新
      </button>
      <div id="house">
      </div>
    </div>
  </div>

  <script>
    G = {
      level: [
        {
          //0是空的地图
          //1是板砖
          //3是目标点
          state:[
            [0,0,1,1,1,0,0,0,0],
            [0,1,1,3,3,1,0,0,0],
            [0,1,0,0,0,0,1,0,0],
            [0,1,0,0,0,0,1,0,0],
            [0,1,1,1,1,1,1,0,0]
          ],
          person: {x : 2, y : 2},
          box: [{x:3, y : 2},{x:4,y:2}]
        },
        //第二关
        {
          //0是空的地图
          //1是板砖
          //3是目标点
          state:[
            [0,1,1,1,1,1,0,0],
            [0,1,0,0,1,1,1,0],
            [0,1,0,0,0,0,1,0],
            [1,1,1,0,1,0,1,1],
            [1,3,1,0,1,0,0,1],
            [1,3,0,0,0,1,0,1],
            [1,3,0,0,0,0,0,1],
            [1,1,1,1,1,1,1,1]
          ],
          person: {x : 2, y : 2},
          box: [{x:3, y : 2}, {x:2,y:5} ,{x:5, y:6}]
          /*
          box : [
            {x:3, y : 1},
            {x:4, y : 1},
            {x:4, y : 2},
            {x:5, y : 5}
          ]
          */
        },
        //第三关
        {
          //0是空的地图
          //1是板砖
          //3是目标点
          state:[
            [0,0,0,1,1,1,1,1,1,0],
            [0,1,1,1,0,0,0,0,1,0],
            [1,1,3,0,0,1,1,0,1,1],
            [1,3,3,0,0,0,0,0,0,1],
            [1,3,3,0,0,0,0,0,1,1],
            [1,1,1,1,1,1,0,0,1,0],
            [0,0,0,0,0,1,1,1,1,0]
          ],
          person: {x : 8, y : 3},
          box: [{x:4, y : 2}, {x:3,y:3} ,{x:4, y:4},{x:5, y:3},{x:6, y:4}]
        },
        //第四关
        {
          //0是空的地图
          //1是板砖
          //3是目标点
          state:[
            [0,1,1,1,1,1,1,1,0,0],
            [0,1,0,0,0,0,0,1,1,1],
            [1,1,0,1,1,1,0,0,0,1],
            [1,0,0,0,0,0,0,0,0,1],
            [1,0,3,3,1,0,0,0,1,1],
            [1,1,3,3,1,0,0,0,1,0],
            [0,1,1,1,1,1,1,1,1,0]
          ],
          person: {x : 2, y : 3},
          box: [{x:2, y : 2}, {x:4,y:3} ,{x:6, y:4},{x:7, y:3},{x:6, y:4}]
        },
        //第五关
        {
          //0是空的地图
          //1是板砖
          //3是目标点
          state:[
            [0,0,1,1,1,1,0,0],
            [0,0,1,3,3,1,0,0],
            [0,1,1,0,3,1,1,0],
            [0,1,0,0,0,3,1,0],
            [1,1,0,0,0,0,1,1],
            [1,0,0,1,0,0,0,1],
            [1,0,0,0,0,0,0,1],
            [1,1,1,1,1,1,1,1]
          ],
          person: {x : 4, y : 6},
          box: [{x:4, y : 3}, {x:3,y:4} ,{x:4, y:5}, {x:5,y:5}]
          /*
           box : [
           {x:3, y : 1},
           {x:4, y : 1},
           {x:4, y : 2},
           {x:5, y : 5}
           ]
           */
        },
          //第六关
        {
          //0是空的地图
          //1是板砖
          //3是目标点
          state:[
            [0,0,0,0,1,1,1,1,1,1,1,0],
            [0,0,0,0,1,0,0,1,0,0,1,0],
            [0,0,0,0,1,0,0,0,0,0,1,0],
            [1,1,1,1,1,0,0,1,0,0,1,0],
            [3,3,3,1,1,0,0,0,0,0,1,1],
            [3,0,0,1,0,0,0,0,1,0,0,1],
            [3,0,0,0,0,0,0,0,0,0,0,1],
            [3,0,0,1,0,0,0,0,1,0,0,1],
            [3,3,3,1,1,1,0,1,0,0,1,1],
            [1,1,1,1,1,0,0,0,0,0,1,0],
            [0,0,0,0,1,0,0,1,0,0,1,0],
            [0,0,0,0,1,1,1,1,1,1,1,0]
          ],
          person: {x : 5, y : 10},
          box: [
            {x:5, y:6},
            {x:6, y:3},
            {x:6, y:5},
            {x:6, y:7},
            {x:6, y:9},
            {x:7, y:2},
            {x:8, y:2},
            {x:9, y:6}
          ]
        }
      ],
      //map data
      mapData : (function() {
        var data = {};
        return {
          get: function () {
            return data;
          },
          set: function (arg) {
            data = arg;
          },
          //穿进来的数据在界面中是否存在;
          collision: function (x, y) {
            if( data.state[y][x] === 1)return true;
            return false;
          },
          collisionBox : function(x,y) {
            for(var i= 0, len= data.box.length; i< len; i++) {
              if( data.box[i].x === x&& data.box[i].y === y)return data.box[i];
            };
            return false;
          }
        }
      })(),
      view : {
        initMap : function(map) {
          document.getElementById("house").innerHTML = Handlebars.compile( document.getElementById("tpl").innerHTML )( map );
        },
        initPerson : function(personXY) {
          var per = document.createElement("div");
          per.id = "person";
          G.per = per;
          document.getElementById("house").appendChild(per);
          per.style.left = 50* personXY.x+"px";
          per.style.top = 50* personXY.y+"px";
        },
        initBox : function(boxs) {
          for(var i=0;i<boxs.length; i++) {
            var box = document.createElement("div");
            box.className = "box";
            G.box = box;
            document.getElementById("house").appendChild(box);
            box.style.left = boxs[i].x*50 + "px";
            box.style.top = boxs[i].y*50 + "px";
          };
        },
        deleteBox : function() {
          var eBoxs = document.getElementsByClassName("box");
          var len = eBoxs.length;
          while( len-- ) {
            eBoxs[len].parentNode.removeChild( eBoxs[len] );
          };
        }
      },
      /*
      * 0;向上
      * 1:向右
      * 2:向下
      * 3:向左
      * */
      direction : 0,
      step : function(xy) {
        //这里面要做很多判断
        /*包括：
         用户当前的方向和以前是否一样，如果不一样要先转头；
         如果一样的话，判断前面是否有石头， 是否有箱子；
           如果前面有墙壁或者
           前面有箱子，而且箱子前面有墙壁就return
         把人物往前移动
         如果人物的位置上有一个箱子，把箱子也移动一下;
         */
        var mapData = this.mapData.get();
        //对参数进行处理;
        if ( typeof xy === "string" ) {
          var x = 0, y = 0, xx = 0, yy = 0;
          switch( xy ) {
            case "left" :
                if(this.direction==0){
                  x = -1;
                  xx = -2;
                }else{
                  x = 0;
                };
              this.direction = 0;
              break;
            case "top" :
                if(this.direction===1){
                  y = -1;
                  yy = -2
                }else{
                  y = 0;
                };
                this.direction = 1;
              break;
            case "right" :
                if(this.direction === 2) {
                  x = 1;
                  xx = 2;
                }else{
                  x = 0;
                };
              this.direction = 2;
              break;
            case "bottom" :
                if(this.direction ===3 ) {
                  y = 1;
                  yy = 2;
                }else{
                  y = 0;
                };
              this.direction = 3;
          };
          //如果是墙壁就不能走
          if( this.mapData.collision(mapData.person.x + x, mapData.person.y+y) ) {
            return;
          };
          //如果碰到的是箱子, 而且箱子前面是墙壁, 就return
          if( this.mapData.collisionBox(mapData.person.x+x, mapData.person.y+y) && this.mapData.collision(mapData.person.x+xx, mapData.person.y+yy)) {
            return;
          };
          if( this.mapData.collisionBox(mapData.person.x+x, mapData.person.y+y) && this.mapData.collisionBox(mapData.person.x+xx, mapData.person.y+yy)) {
            return
          }
          //mapData.x+xx, mapData.y+yy
          mapData.person.x = mapData.person.x + x;
          mapData.person.y = mapData.person.y + y;

          this.per.style.left = 50* mapData.person.x+"px";
          this.per.style.top = 50* mapData.person.y+"px";
          this.per.className = {
            0:"up",
            1:"right",
            2:"bottom",
            3:"left"
          }[this.direction];
          var theBox = {};
          if(theBox = this.mapData.collisionBox(mapData.person.x, mapData.person.y)) {
            theBox.x = mapData.person.x+x;
            theBox.y = mapData.person.y+y;
            this.view.deleteBox();
            this.view.initBox(mapData.box);
            this.testSuccess();
          };
          //如果碰到了箱子，而且箱子前面不能走就return， 否则就走箱子和人物;
        };
      },
      /*
      * return Boolean;
      * */
      //遍历所有的box，如果在box中的所有x，y在地图中对应的值为3，全部通过就返回true
      testSuccess : function() {
        var mapData = this.mapData.get();
        for(var i=0; i<mapData.box.length; i++) {
          if(mapData.state[mapData.box[i].y][mapData.box[i].x] != 3) {
            return false;
          };
        };
        $.dialog({
          content : '游戏成功, 进入下一关!',
          title : 'alert',
          ok : function() {
            if( G.now+1 > G.level.length-1 ) {
              alert("闯关成功");
              return ;
            }else{
              //如果可用的等级大于当前的等级，就把level设置进去;
              if( G.now+1 > parseInt( $.cookie('level') || 0 )) {
                $.cookie('level' , G.now+1 , { expires: 7 });
              };
              start( G.now+1 );
              return ;
            };
          },
          cancel : function(){
            location.reload();
          },
          lock : true
        });
      },
      //这里面需要处理 map， 人物数据， box数据
      init : function() {
        //更新地图;
        //this.level[0].state
        this.view.initMap( this.mapData.get().state );
        this.view.initPerson( this.mapData.get().person );
        this.view.initBox( this.mapData.get().box );
        //this.person = this.factory.Person(0,0);
        //this.box = this.factory.Box([{x:0,y:1},{x:1,y:1},{x:0,y:2},{x:1,y:2}]);
        if( this.hasBind ) {
          return
        };
        this.hasBind = true;
        this.controller();
      },
      controller : function() {
        function mobileDOM() {
          var mobileDOMString = '\
            <div class="navbar-fixed-bottom height20percent operate-bar" >\
              <div class="container height100percent">\
                <div class="row text-center height100percent">\
                  <div class="height40percent arrow-up">\
                    <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>\
                  </div>\
                  <div class="height30percent">\
                    <div class="col-xs-6 arrow-left">\
                      <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>\
                    </div>\
                    <div class="col-xs-6 arrow-right">\
                      <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span>\
                    </div>\
                  </div>\
                  <div class="height30percent arrow-down">\
                    <span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>\
                  </div>\
                </div>\
              </div>\
            </div>\
            ';
            +function addDOM() {
              $("#game").append( mobileDOMString );
            }();
        };
        var _this = this;
        if( window.util.isMobile() ) {
          $(window).on("swipeLeft",function() {
            _this.step("left");
          }).on("swipeRight",function() {
            _this.step("right");
          }).on("swipeUp",function() {
            _this.step("top");
          }).on("swipeDown",function() {
            _this.step("bottom");
          });
          mobileDOM();

          $(".arrow-up").tap(function() {
            _this.step("top");
          });
          $(".arrow-down").tap(function() {
            _this.step("bottom");
          });
          $(".arrow-left").tap(function() {
            _this.step("left");
          });
          $(".arrow-right").tap(function() {
            _this.step("right");
          });
        }else{
          $(window).on("keydown", function(ev) {
            var state = "";
            switch( ev.keyCode ) {
              case 37 :
                state = "left";
              break;
              case 39 :
                state = "right";
              break;
              case 38 :
                state = "top";
              break;
              case 40 :
                state = "bottom";
              break;
            };
            _this.step(state)
          });
        };
      }
    };

    function start( level ) {
      G.now = level;
      G.mapData.set(G.level[level] );
      G.init();
      $("#game").show();
      $("#select").hide();
    };

    function init() {
      var cookieLevel = $.cookie('level') || 0;
      start( cookieLevel );
    };
    $("#start").click(function() {
      init();
    });
    String.prototype.repeat = String.prototype.repeat || function(num) {
      return (new Array(num+1)).join( this.toString() );
    };

    window.onload = function() {
      var cookieLevel = $.cookie('level') || 0;
      $("#level").html( function() {
        var index = 0;
        return "<a href='###' class='btn btn-info' onclick='start({{i}})'>关卡</a>    ".repeat((parseInt($.cookie('level')) || 0)+1).replace(/{{i}}/gi, function() {
          return index++;
        })
      });
    }
  </script>
</body>
</html>

게임에는 6개의 레벨이 있습니다. 각 레벨을 성공적으로 통과하면 다음 레벨이 잠금 해제됩니다. 하하.

Sokoban 게임 온라인 데모:

공개

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.