同样采用单体的写法，用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);
}
},
