小游戏-推箱子

同样采用单体的写法，用json数据存关卡的信息
大概结构：

2、init

2、createMap

json数据里用1，1，2，2，3，3，的方式代表墙，箱子，红区域，蓝区域等。其实是改变其类名，类名设置为pos1，pos2，pos3

3、createBox

箱子采用定位的方式布局，具体定位到哪里，和json数据里的box的坐标有关，创建箱子时设置箱子的left和top

4、 createTurtle

乌龟采用定位的方式布局，具体定位到哪里，和json数据里的turtle的坐标有关，创建箱子时把这个数据绑定到箱子上，并设置箱子的left和top

5、 bindPerson

乌龟移动时做键盘事件，按下上下左右键，

• 要判断乌龟的前方是不是墙，是墙的话坐标就不动，如果不是，就改变小乌龟的坐标。
  由于map存的是数组，要设置根据小乌龟坐标找到对应数组的项。
• 判断小乌龟和箱子的碰撞，如果前面是箱子，箱子在小乌龟的基础上前移，如果前面是墙就都退回来，或者两个箱子，也退回来。
  也需要用到碰撞检测，同小蜜蜂的碰撞检测。

 runPerson: function(oP, opt) {
            var stepX = opt.x || 0;
            var stepY = opt.y || 0;
            if (this.nowJson.map[(oP.data('y') + stepY) * Math.sqrt(this.nowJson.map.length) + oP.data('x') + stepX] != 2) {
                oP.data('x', oP.data('x') + stepX);
                oP.data('y', oP.data('y') + stepY);
                oP.css('left', oP.data('x') * 50);
                oP.css('top', oP.data('y') * 50);
                 $('.box').each($.proxy(function(i,elem){
                    if(this.pz(oP,$(elem)) && this.nowJson.map[(oP.data('y') + stepY) * Math.sqrt(this.nowJson.map.length) + oP.data('x') + stepX] != 2){
                        $(elem).css('left', (oP.data('x') + stepX)*50);
                        $(elem).css('top', (oP.data('y') + stepY)*50);
                        $('.box').each($.proxy(function(j,elem2){
                            if(this.pz($(elem),$(elem2))&& elem != elem2){
                                $(elem).css('left', (oP.data('x') )*50);
                                $(elem).css('top', (oP.data('y') )*50);

                                oP.data('x', oP.data('x') - stepX);
                                oP.data('y', oP.data('y') - stepY);
                                oP.css('left', oP.data('x') * 50);
                                oP.css('top', oP.data('y') * 50);
                            }

                        },this))

                    }else if(this.pz(oP,$(elem))){
                         oP.data('x', oP.data('x') - stepX);
                oP.data('y', oP.data('y') - stepY);
                oP.css('left', oP.data('x') * 50);
                oP.css('top', oP.data('y') * 50);

                    }
                 },this));
            }
          this.nextShow();
        },

6、成功条件

将箱子全部推入指定区域即成功，同样采用碰撞检测，对红色区域做循环检测是否和每一个箱子发绳碰撞，碰撞一次就iNUm++，最后inum等于箱子数即成功。

 nextShow: function() {
            var iNum = 0;
            $('.pos3').each($.proxy(function(i, elem) {
                $('.box').each($.proxy(function(j, elem2) {
                    if (this.pz($(elem), $(elem2))) {
                        iNum++;
                    }
                }, this))
            }, this));
            if (iNum == $('.box').size()) {
                this.createMap(1);
            }

        },