随时随地，卜上一卦，趋吉避凶...
点击上方“人云亦云” 可以订阅哦！
上一篇远古流传下来的“蓍草占卜法”，大家都学会了吗？
先给大家普及个有关占卜的小知识：
在古代，占卜是一项工作，负责占卜的官在官员里是举足轻重的，或者说要当上大官重臣，起码学会占卜，比如姜子牙、诸葛亮……
在春秋战国之前，占卜都是以龟甲占卜为主流的，易经占卜则为辅，就是大事先用龟甲占卜，如果结果不明朗，再用易经占卜配合一下。
龟甲占卜就是用火灼烤龟甲，占卜者观看龟甲被烧出的裂纹，并刻上甲骨文以判凶吉，没错，甲骨文就是占卜刻录的卜辞。
自孔老夫子发现了“周易”，如获珍宝，韦编三绝，并说出“不占而已矣”之后，易经占卜反倒成为了民间占卜的主流，而龟甲占卜则慢慢衰落，甚至已经失传了。
如果你是诚心学《易》，请大家还是尊重传统，学一下“蓍草占卜法”，让这一门流传了三千多年的中华文化继续流传下去。
当然，如果你仔细看了上一篇“蓍草占卜”的方法，你会发现，要占得“一爻”要历经“三变”，而每一“变”都要历经“五步”，最终“六爻成一卦”，估计怎么也得一两个时辰。未必有那么多人有这闲情雅致能够完整地卜下来，那就看看今天分享给大家的简易卜卦法，卜一个卦只要2-3分钟左右吧，其实卜卦可能就是古人的一种娱乐方式，类似于今天的下围棋，或者搓麻将……今天我们就来像玩游戏一样来卜卦吧。
这个游戏有个很玄乎的开头：易有太极，是生两仪，两仪生四象，四象生八卦。很熟悉吧？太极拳、八卦、甚至老子说的“道生一，一生二，二生三，三生万物”都是从这里来的。今天要介绍的卜卦方法就是通过这“一二三四”，推出“六七八九”，用“六七八九”组成一个卦，然后就可以趋吉避凶啦。1易有太极——“一”件未卜之事
太极，一百个人有一百种理解，我们暂且先理解为是万物源头、万事开头好了，哲学方面我们不多讨论，就像为什么麻将里要有春夏秋冬、梅兰竹菊……游戏开始，我们就要有想一件未卜之事，那它就是这个游戏的太极，就是这个“一”。
当然，开始之前，很多地方说要诚心默念所占之事，这个各位随意，因为怎样算“诚心”这个谁都不好说，反正专心、专注就好。
还有，这“一件事”不能太空泛，也不能太具体，给大家个小参考：
日，诺贝尔奖获得者杨振宁和李政道先生熏香沐浴之后，虔敬地展开了《易经》，求“天意”引导。他们卜问的问题是“今后两年内粒子物理学是否会有重大突破？”结果卜到“渐卦”，是渐进的意思。杨李两人果真决定缓进，不急于投入这方面的研究。2是生两仪——寻“二”象之物
两仪，就是阴、阳，是天、地，也是男、女，代表着一切事物的最基本对立面，简单说就是事物的两面性。瞧瞧，这种辩证思想3000年前咱们中国人就有了。
回到游戏，我们要找一个能代表两面性的东西，可正可反、可黑可白，最简单的就是硬币，所以我们这个简单的卜卦方法也叫“金钱卦”。简单点，可以用流通的硬币，虔诚点，可以去买几枚古币，如果有人找你算卦，也能装的像点^_^
对了，哪面算正，哪面算反，各位自己定义就行。3二生三，三生万物——备取“三”份
一是太极，二是两仪，那三呢？
《三字经》有云：“三才者，天地人。三光者，日月星。”没错，三就是三才。
天地之间有了人，才有了万千变化，卜卦这么高深莫测，我们的游戏就离不开三，所以我们要准备三枚硬币。4两仪生四象——得到“四”种结果
四象，东南西北、春夏秋冬，在《易经》里就是少阳、老阳、少阴、老阴，为了方便记忆你可以把这四象看作是一天里的温度变化，早晨天开始越来越暖是少阳，到了正午最热就是老阳，接着慢慢变凉是少阴，到半夜最冷就是老阴，我们要做的就是用硬币得到这四象。
我们把准备好的三枚硬币抛掷或旋转（有条件的也可以备个龟壳来摇）
等静止后会得到几种结果？
我们如果把硬币的正面定义为3（表示三才皆具），反面定义为2（表示三才缺人），那么只会得到四个结果：全反、一正两反、两正一反、全正，用累加起来的数字表示就是6、7、8、9，对应的就是老阴（6），少阳（7），少阴（8），老阳（9）。
每一次结果就代表一爻，六爻就可以成一卦。5四象生八卦——八八六十四卦
好了，经过上面“一二三四”的准备，我们就要开始推出“六七八九”了。
为了得到一个卦，我们共需要抛掷六次硬币，拿出一张纸，从下至上，我们把六次抛掷的结果记录下来，记的时候稍作改变，不是记数字，而是记符号：6和8为阴，记“- -”，7和9为阳，记“—”。
举个例子：抛掷结果依次是7，7，7，8，6，8，那纸上应该就画出了这么个卦：
如果你手边有《易经》，你一翻看就知道，这是个“上地下天——泰卦”，俗话说的天地交泰就是这么来的。看，两分钟就能卜出一个卦了吧。
等等，还有一个重要的概念没介绍：变卦。
我们常说的变卦也是从《易经》里来的。《易经》里，老阳会开始往阴变化，老阴会开始往阳变化，这就是为什么我们常说否极泰来、苦尽甘来，《易经》有一个重要的思想就是物极必反。
那放到卜卦里怎么变呢？
就是我们要把得到的那一卦里，出现6或者9的那一爻的符号变成相反的符号，上面例子里，从下往上第五爻出现了6，所以要变成阳爻“—”，那变卦的结果就是：
翻看《易经》，原来这就是“上水下天——需卦”，也就是我们卜的“泰卦”变成了“需卦”。
就这样，我们一共可以从金钱卦的占卜游戏中，卜到六十四个卦。是不是很简单，是不是很方便？
卜到卦了，吉凶如何判断？怎么做才能趋吉避凶呢？
每一卦什么意思，爻辞怎么看？卦辞怎么看？
变卦了又怎么看？
“上水”是什么意思？“下天”又是什么意思？
这些问题晓云先卖个关子，下次更新的时候分享给大家。
《易经》也好，卜卦也好，其实都是我们文化传递的一部分，孔子为什么要说“不占而已矣”，荀子为什么要说“善易者不占”，当我们学透了《易经》你会发现，六十四卦、三百八十四爻已经把世间所有事物的变化规律归纳起来了，一个能了解并掌握这些规律的人是不需要占卜的……
卜卦其实也是学习《易经》的方法之一，我们可以像玩游戏一样，随时随地卜上一卦，翻看《易经》，学习卦辞和爻辞。
感谢各位订阅“人云亦云”，我们下期再见。
【蓍草占卜法】请点击“阅读原文”
微信扫一扫关注公众号
要回复文章请先或
微信扫一扫关注公众号JavaScript编写推箱子游戏
转载 & & 投稿：hebedich
本文给大家介绍的是使用javascript来实现一款经典的老游戏--推箱子，主要侧重于实现的思路，最后附上源码给大家。
　　推箱子游戏是老游戏了， 网上有各种各样的版本， 说下推箱子游戏的简单实现，以及我找到的一些参考视频和实例；
　　如下是效果图：
　　这个拖箱子游戏做了移动端的适配， 我使用了zepto的touch模块， 通过手指滑动屏幕就可以控制乌龟走不同的方向；
　　因为推箱子这个游戏比较简单， 直接用了过程式的方式写代码， 模块也就是两个View 和 Model， 剩下就是用户的事件Controller， 用户每一次按下键盘的方向键都会改变数据模型的数据，然后重新生成游戏的静态html， 然后用innerHTML方式插入到界面， 自动生成DOM节点；
　　游戏的关卡模型就是数据， 我把每一关的数据分为三块：
　　地图数据，二维数组（地图数据包括板砖， 箱子要去的目标位置， 空白的位置）
　　箱子数据，一维数组（箱子的初始位置）
　　小乌龟的数据，json对象
　　每一个关卡都有对应的游戏关卡数据， 模拟的数据如下：
//0是空的地图
//3是目标点
[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是空的地图
//3是目标点
[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}]
{x:3, y : 1},
{x:4, y : 1},
{x:4, y : 2},
{x:5, y : 5}
//0是空的地图
//3是目标点
[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是空的地图
//3是目标点
[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是空的地图
//3是目标点
[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}]
{x:3, y : 1},
{x:4, y : 1},
{x:4, y : 2},
{x:5, y : 5}
//0是空的地图
//3是目标点
[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},
{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}}
{{#addY}}{{/addY}}
　　为Handlebars定了几个helper，包括initY， getClass， getY，calc 、、、、，模板引擎主要是辅助的作用， 这边用Handlebars不是很明智啊， 代码的可读性变差了点， 这里面也利用了闭包保存变量， 避免全局变量的污染：
(function() {
var y = 0;
Handlebars.registerHelper("initY", function() {
Handlebars.registerHelper("addY", function() {
Handlebars.registerHelper("getY", function() {
Handlebars.registerHelper("calc", function(arg) {
//console.log(arg)
if(arg!==1111) {
return 50*arg + "px";
return 50*y + "px";
Handlebars.registerHelper("getClass", function(arg) {
switch( arg ) {
return "bg"
return "block"
return "box"
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提供了touch模块，我们要去官网去找，然后额外引用进来，打开地址 , 然后就可以使用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");
$(window).on("keydown", function(ev) {
var state = "";
switch( ev.keyCode ) {
state = "left";
state = "right";
state = "top";
state = "bottom";
_this.step(state)
　　因为要保存用户的当前关卡， 也额外引用了jQuery-cookies插件， 每一次闯关成功，我们就保存一次当前的闯关记录， 当用户不想玩或者别的原因关闭了浏览器， 过几天想重新玩的时候可以继续玩；
if( G.now+1 & G.level.length-1 ) {
alert("闯关成功");
//如果可用的等级大于当前的等级，就把level设置进去;
if( G.now+1 & parseInt( $.cookie('level') || 0 )) {
$.cookie('level' , G.now+1 , { expires: 7 });
start( G.now+1 );
　　所有的代码在这里：
&!DOCTYPE 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}}
{{#addY}}{{/addY}}
(function() {
var y = 0;
Handlebars.registerHelper("initY", function() {
Handlebars.registerHelper("addY", function() {
Handlebars.registerHelper("getY", function() {
Handlebars.registerHelper("calc", function(arg) {
//console.log(arg)
if(arg!==1111) {
return 50*arg + "px";
return 50*y + "px";
Handlebars.registerHelper("getClass", function(arg) {
switch( arg ) {
return "bg"
return "block"
return "box"
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;
box-sizing: border-
background-image: url(imgs/wall.png);
box-sizing: border-
background: #fbd500;
background-image: url(imgs/box.png);
background: url(imgs/target.jpg);
background-size: 50px 50;
box-sizing: border-
background-image: url(imgs/person.png);
#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:30
.height20percent{
height:30%;
.height30percent{
height:30%;
.height40percent{
height:40%;
.height100percent{
height:100%;
font-size:30
color:#34495e;
&div id="select"&
&div class="container"&
&div class="row"&
&p class="text-info"&
已经解锁的关卡:
&p id="level"&
&button id="start" class="btn btn-default"&
&div id="game" class="container"&
&div class="row"&
&button onclick="location.reload()" class="btn btn-info" &
返回选择关卡重新
&div id="house"&
//0是空的地图
//3是目标点
[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是空的地图
//3是目标点
[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}]
{x:3, y : 1},
{x:4, y : 1},
{x:4, y : 2},
{x:5, y : 5}
//0是空的地图
//3是目标点
[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是空的地图
//3是目标点
[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是空的地图
//3是目标点
[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}]
{x:3, y : 1},
{x:4, y : 1},
{x:4, y : 2},
{x:5, y : 5}
//0是空的地图
//3是目标点
[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},
{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 = {};
get: function () {
set: function (arg) {
//穿进来的数据在界面中是否存在;
collision: function (x, y) {
if( data.state[y][x] === 1)
collisionBox : function(x,y) {
for(var i= 0, len= data.box. i& i++) {
if( data.box[i].x === x&& data.box[i].y === y)return data.box[i];
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";
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. i++) {
var box = document.createElement("div");
box.className = "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.
while( len-- ) {
eBoxs[len].parentNode.removeChild( eBoxs[len] );
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){
this.direction = 0;
case "top" :
if(this.direction===1){
this.direction = 1;
case "right" :
if(this.direction === 2) {
this.direction = 2;
case "bottom" :
if(this.direction ===3 ) {
this.direction = 3;
//如果是墙壁就不能走
if( this.mapData.collision(mapData.person.x + x, mapData.person.y+y) ) {
//如果碰到的是箱子, 而且箱子前面是墙壁, 就return
if( this.mapData.collisionBox(mapData.person.x+x, mapData.person.y+y) && this.mapData.collision(mapData.person.x+xx, mapData.person.y+yy)) {
if( this.mapData.collisionBox(mapData.person.x+x, mapData.person.y+y) && this.mapData.collisionBox(mapData.person.x+xx, mapData.person.y+yy)) {
//mapData.x+xx, mapData.y+yy
mapData.person.x = mapData.person.x +
mapData.person.y = mapData.person.y +
this.per.style.left = 50* mapData.person.x+"px";
this.per.style.top = 50* mapData.person.y+"px";
this.per.className = {
1:"right",
2:"bottom",
}[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 B
//遍历所有的box，如果在box中的所有x，y在地图中对应的值为3，全部通过就返回true
testSuccess : function() {
var mapData = this.mapData.get();
for(var i=0; i&mapData.box. i++) {
if(mapData.state[mapData.box[i].y][mapData.box[i].x] != 3) {
$.dialog({
content : '游戏成功, 进入下一关!',
title : 'alert',
ok : function() {
if( G.now+1 & G.level.length-1 ) {
alert("闯关成功");
//如果可用的等级大于当前的等级，就把level设置进去;
if( G.now+1 & parseInt( $.cookie('level') || 0 )) {
$.cookie('level' , G.now+1 , { expires: 7 });
start( G.now+1 );
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 ) {
this.hasBind =
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 class="height30percent"&\
&div class="col-xs-6 arrow-left"&\
&span class="glyphicon glyphicon-arrow-left" aria-hidden="true"&&/span&\
&div class="col-xs-6 arrow-right"&\
&span class="glyphicon glyphicon-arrow-right" aria-hidden="true"&&/span&\
&div class="height30percent arrow-down"&\
&span class="glyphicon glyphicon-arrow-down" aria-hidden="true"&&/span&\
+function addDOM() {
$("#game").append( mobileDOMString );
var _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");
$(window).on("keydown", function(ev) {
var state = "";
switch( ev.keyCode ) {
state = "left";
state = "right";
state = "top";
state = "bottom";
_this.step(state)
function start( level ) {
G.mapData.set(G.level[level] );
$("#game").show();
$("#select").hide();
function init() {
var cookieLevel = $.cookie('level') || 0;
start( cookieLevel );
$("#start").click(function() {
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++;
　　游戏一共有6关， 每一关成功通过即可解锁下一关， 地图的话其实可以多找些的，哈哈；
　　推箱子游戏的在线DEMO ：
以上所述就是本文的全部内容了，希望大家能够喜欢。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具}