《SokoPlayer HTML5》推箱子程序的功能详细说明

sokoban

(85楼）不完全 known bugs 列表
(104楼) 最新《2013年七月离线版》下载

--------------


SokoPlayer HTML5  推箱子的地址是：http://sokoban.ws/sokoplayer/SokoPlayer_HTML5.php
也可以在 http://sokoban.ws 首页点击“在线推箱子入口”进入。

这是一个在线程序，无需安装，无需插件，直接在浏览器就可以运行。
但是要保证浏览器是比较新的，支持HTML5的一些特性才可以使用。如果你使用IE8或者以下，请升级到IE9。
若是使用WinXP 等老系统无法升级到IE9，你也可以安装其他支持HTML5的浏览器。
如Firefox。可以到这里下载火狐Firefox: http://www.firefox.com.cn/
其他的如谷歌的Chrome浏览器也对HTML5的支持很好。事实上，根据我的经验，Chrome执行javascript代码
的速度是Firefox的两倍。尽管如此，我还是更喜欢使用 Firefox.

但建议不要使用360浏览器。360极速浏览器使用的是Chrome的内核，还不如直接
使用Chrome：http://www.google.com/chrome


总的来说：SokoPlayer HTML5是一个轻便的在线推箱子程序，兼备游戏和编辑两大主要功能。
因为在浏览器里面运行，所以具有跨平台的特点,
在Windows，Linux，iPad平板电脑等各种平台上都可以流畅地运行。


下面汇总一下SokoPlayer HTML5的功能和使用方法。

(1)游戏控制

可以用键盘或鼠标实现基本的游戏控制。

键盘：
# W,A,S,D或箭头: 控制人移动
# Z 或 backspace(退格键): 撤销一步
# X: 恢复一步
# Esc: 重置关卡

也可以用鼠标控制：
# 鼠标左键：点击空位，人会自动走过去；点击人，会提示人能走到的地方
# 鼠标左键：点击箱子选中，箱子能被推到的地方会有提示；再点击空位，人会把箱子推到空位
# 鼠标左键：点击墙，显示当前能被推动的箱子
# 鼠标滑轮：撤销/恢复
# 鼠标右键：撤销一个箱子的完整推动

游戏关卡下方的第一排按钮，也有一部分是和游戏控制有关，如下图所示：




【重置关卡】按钮： 和按键盘 Esc键效果一样，关卡回到起点
【<】 : 撤销一个箱子的完整推动过程
【>】: 恢复一个箱子的完整推动过程
【|<】 : 连续地撤销到起点
【>|】 : 连续地恢复
【||】 : 暂停

后面还有两个选项：
IM：选中的话，表示瞬间移动，即不演示中间动画过程，对某些特大型关卡可以节省时间。
Go-Thru：所谓的”穿越“功能，选中的话，在路径搜索中会“穿越”一种类型的箱子搜索更多的可能路径，也是对某种类型关卡比较有用，如下图由西北天狼兄设计的关卡



(2)关卡的载入和选择，答案的载入

游戏画面上方有一排按钮，如下：



游戏自带了十多个关卡集，可在【关卡集】下拉菜单中选择。
点击【上一关】【下一关】在当前的关卡集中切换关卡。或者在【第x关】下拉菜单中直接选中某一关。
也可以在右侧输入框输入关卡号，再按【选关】按钮直接选择。

除了游戏自带的关卡，程序还可以读入外部关卡。游戏画面下方有一个大的输入框（我称之为 textarea)，如
下图所示。大输入框上还有一排按钮。这个大输入框肩负着多种输入输出的任务。



可以把一个或多个xsb格式的关卡复制粘贴到输入框，然后按【载入关卡】按钮，那么所有
关卡都会被加载到程序。这时你会看见关卡集显示的是 textarea，表示这是把关卡载入到 textarea
临时关卡集，此时关卡只保留在内存，一旦关闭浏览器再打开，就没有了。
但是如果不关闭浏览器的话，载入的关卡数目理论上是没有限制的，只受你的内存限制。
textarea 关卡集就像一个工作区，你可以把多个关卡载入到此关卡集。
textarea 临时关卡集和其他自带的关卡集一样，也可以在关卡之间自由切换。

【载入关卡】按钮右侧有一个 “2slot" 选项，这个和存档有关，留待下面再做介绍。

前面说了，这个输入框是多用途的，也可以用来载入答案。把lurd 答案复制粘贴到输入框，
然后按【载入答案】按钮，程序就会读入答案并开始自动演示。

【载入答案】右侧也有一个选项："u2U“。这个选项一般用不着。
因为大多数程序输出的lurd答案用大小写来区分移动和推动。但若由于各种原因，你得到的
是一个全小写或者全大写的答案，需要程序帮你校正和识别究竟是推动还是移动，那么请把 “u2U" 选上，
否则程序可能会出错。

需要时，可按【清空编辑框】把大输入框的内容全部清空。

除了自己手动把关卡或者答案复制粘贴到输入框之外，还可以让浏览器帮你直接从文件中读取。
点击【清空编辑框】右侧的文件路径框，会弹出一个文件选择对话框。通过这个对话框选择一个关卡或者答案文件。
选中后，文件地址（或文件名）会显示在文件路径框，这时再点击【载入文件】，程序就会
把文件的内容读到下面的大输入框。这时你可以再根据需要，点击【载入关卡】或【载入答案】。

注意：直接从文件中读入内容这一功能也是一个HTML5的特性（即所谓的File API），
目前Firefox对这一特性的支持比较好，其他一些浏览器可能暂时还不支持这一功能。

Firefox 浏览器插件(Add-on)

为了方便从网页加载XSB关卡，我给Firefox写了一个扩展，安装了这个扩展之后，在网页（如论坛，邮件）中看到有XSB格式的关卡，可以直接选中，右键点击后，在右键菜单中选择“Copy to SokoPlayer HTML5”直接在线打开。节省了至少两次鼠标点击。效果请看下面截图。

安装请到下面地址：
https://addons.mozilla.org/en-US/firefox/addon/sokobanws-tools/
点击 Add to Firefox大按钮就行了。

sokoban

(3)关卡或答案的输出



可以用键盘：

# O: 把当前答案（或部分答案）输出到文本编辑框
# M: 把当前关卡输出到文本编辑框

也可以用页面中的按钮：

在游戏画面下方的第一排按钮，也就是前面介绍过的控制按钮，在这一排按钮的最右部分有三个输出按钮。
分别是：【输出关卡】，【输出答案】和【输出链接】。
前两个顾名思义，最后一个【输出链接】的含义是输入一个带有关卡信息在内的超链接。如


链接代码：

1. http://sokoban.ws/sokoplayer/?w=19&h=11&lvl=____HHHHH__________|____H___H__________|____H$__H__________|__HHH__$HH_________|__H__$_$_H_________|HHH_H_HH_H___HHHHHH|H___H_HH_HHHHH__..H|H_$__$__________..H|HHHHH_HHH_HaHH__..H|____H_____HHHHHHHHH|____HHHHHHH________

复制代码

你可以把这个链接直接通过电子邮件，即时聊天工具或者论坛发给你的朋友。
他直接点开链接就可以玩这个关了。这也算《SokoPlayer HTML5》提供的一项比较有特色的功能了。

不管是用键盘快捷键，还是用页面按钮，关卡或答案都是输出到我们前面用来输入的大编辑框中。
此时你可以把大编辑框中的内容复制出来，以作它用。

为了使得导出关卡和答案更加方便，还提供了发送邮件快捷按钮。
（1）发送邮件
点击“发送邮件”按钮，浏览器会打开默认的邮件管理程序（如Foxmail，微软的outlook，或者智能手机带的各种邮件收发管理程序）
并且SokoPlayer HTML5会把关卡信息传给邮件管理程序。这样邮件管理程序的收件人地址，邮件标题和邮件内容（关卡和答案）都会自动填写好了。
（2）@
收件人地址用@按钮用来设置。在大输入框中填入地址，按@键，程序就记住了，以后就不用输入了。
如果没有设置，那么在(1)中，收件人地址一栏将为空白。


(4)一些辅助功能


换皮肤：游戏画面上方的【皮肤】下拉菜单可以选择更换皮肤。默认的是borgar的非常精美的皮肤。
若你的显示器很大，觉得皮肤小了。建议换成 simple32皮肤。

标尺、网格和旋转：
【标尺】按钮：打开或者关闭标尺。采取和YSokoban一样的标号方法。即横坐标用字母，纵坐标用数字。
【#】 按钮：打开或者关闭网格，便于更清楚的辨认位置。

标尺左侧有几个按钮，可以用来变换关卡方向：
# 按【> 】按钮，关卡向右旋转90度
# 按【< 】按钮，关卡向左旋转90度
# 按【| 】按钮，关卡左右作镜面反射
# 按【o 】按钮，恢复原始朝向
改变方向后，关卡上方会显示一个红色或者绿色的符合，表示当前方向和原始方向的关系。

注意：不管方向怎么变，程序内部都是以原始方向来记录和输出lurd答案。


区域数箱子和目标功能：
按住ctrl键，同时按住鼠标左键不放，在关卡画面中拖动选择一个矩形区域。
程序会把矩形区域内的箱子和目标的数目显示在关卡上方。


声音效果:
要启用声音效果，要把“音效“选项选上。
有两种音效：
（1）过关时，会有约3秒钟的掌声。
（2）若鼠标点击到一个空位是人无法走过去的，或者是选中的箱子无法推到的，那么这时会有“uh-oh“的一个错误提示声。

经过测试，在Firefox, Chrome 和IE9下都能运作正常。苹果的Safari浏览器我用Windows版测试不行，不知在苹果系统下的原版如何。

sokoban

(5) 存档

因为程序是在浏览器中运行的，而浏览器处于安全考虑，禁止程序对硬盘进行写操作。因此程序无法
直接使用硬盘来保存和管理答案。

但是幸好浏览器还是提供了一种较为简单的存储方式，这也是HTML5的一个特性，即所谓的local Storage。
运用这一特性，《SokoPlayer HTML5》还是提供了一种较为初级的存档功能。

我们前面提到过，可以把关卡载入到 textarea关卡集。但是这个只是保存在内存里，下次玩的时候，又要重新
载入，十分不方便。而存档功能是通过浏览器简介保存到硬盘，下次玩的时候，直接从存档中把关卡调出到
textarea 关卡集就行了，省去了复制粘贴的麻烦。

先看一下和存档相关的按钮，在关卡画面下方的第二排：



一共提供200个存档，编号为从0到199. 在【存档】的下拉菜单可以选择不同的存档。
存档可以取名字帮助记忆，名字就显示在存档标号右侧。
每个存档都保存了一个关卡和一个完整或不完整的答案。

存档各个按钮的用途

【保存】把当前游戏中的关卡，答案保存到显示的存档号。
可以先在【存档】下拉菜单中选择你希望保存的编号（一般选择一个空的存档）。
在保存之前还可以先输入一个名字，直接在【存档】下拉菜单
右侧的小输入框填入或者修改。

【读取】把当前编号的存档及其答案读取到 textarea 关卡集。

【删除】因为只有200个存档。所以也可以删除一些无用的存档。
当删除时，最右侧的选项框要选中，否则程序会提醒你无法删除。
这主要是为了避免误删。


【检查】用于查看究竟哪些存档用了，哪些没用。按此按钮，所有有记录的存档号码及其名字
就会输出到下面的大编辑框。

【读取全部】把所有存档都读入到 textarea 关卡集。

【清空】清空所有存档。为安全起见，右侧的选择框也必须选上，才能执行清空操作，否则报错。

前面在第（2）部分谈到【载入关卡】按钮右侧有个 "2slot"  选项。
如果这个选择选上的话，大编辑框里的关卡除了被载入内存（即textarea关卡集中），同时也保存到硬盘（即存档）。
保存的方式是从第0号存档开始，有空的就往里填；若该存档已使用，就跳到下一个空的存档。
若一次载入很多关卡，超出了200个存档的数量，则存慢即止，后面的就不保存了。

sokoban

（6）关卡编辑器

可以点击关卡上方的【进入/退出 编辑模式】来进入或者退出关卡编辑。游戏模式和编辑模式可以随意切换，
所以用来编辑设计关卡和检验关卡是否有解非常方便。

在编辑模式下，【进入/退出 编辑模式】按钮下方多出了三排编辑用的按钮，所以很容易识别当前在何种模式之下。



在编辑模式下，若直接点【进入/退出 编辑模式】，程序直接退出编辑模式，不对当前的更改作保存。
若要保存更改，请点击第三排按钮中的【保存并退出】。退出后，程序把这个关卡作为一个新的关卡加到
textarea 关卡集，成为textarea关卡集的最后一个关卡。若你不想在内存中新增一个关卡，可以选择【保存并退出】
按钮右侧的“覆盖”选项之后，再保存退出，这是关卡就在内存里覆盖了原来对应的关卡，关卡集和关卡号不变。
若选中”标准化“，那么保存退出的时候，程序会把关卡标准化，移除没有用的墙体等等。


注意： 保存退出后，关卡只是暂时存在 textarea 关卡集，要永久保存的话，请使用存档，或者把关卡输出后另作保存。
请记得做好存档工作，避免不必要的数据丢失。

编辑模式下，基本的操作方法是这样的：
先在第一排按钮选择一个种工具。不同的工具在画布上的作用是不同的。

如【箱子】工具就是在鼠标点击的位置画一个箱子，若重复的点一个位置，那么就会就会在”箱子“，”目标上的箱子“两者之间
来回的变化。其他的【人】，【目标】，【墙体】，【橡皮擦】的工作原理类似。
另外鼠标右键也同样起到【橡皮擦】的作用。

【加行】，【加列】，【删行】，【删列】这四种工具也是先选中，然后再点击画布。
点击的位置就会执行相应的加行删列等操作。

【区域选择】工具是所有工具里面相对比较高级的一种工具，它提供了更为强大的功能。
第二排按钮全部都是对应【区域选择】工具使用的。
在【区域选择】工具模式，用按住鼠标左键拖动选择一个区域。当前选中区域有一个矩形黑框围着。
按【复制】或者【剪切】按钮完成选中。
选中之后就可以直接用鼠标左键拖着选中的区域摆放在画布中你想要的位置。点击选中区域外部，选中的区域就被
粘贴在当前位置了。
《SokoPlayer HTML5》的编辑器还提供了一种特别的“融入”的粘贴方式，可以选中【融入】按钮右侧的选项对比
【融入】和【粘贴】的区别。
选择的区域还可以通过【>】【|】按钮来旋转或者镜面反射；第二排的【边界加墙】【填充墙体】【填充空位】
也是对选中的区域的改变，这个可以试一下就很清楚了。


编辑模式下有无限撤销功能，所以不用怕操作失误，点击第三排的【撤销】按钮就可以撤销上一步的编辑。

第三排的【辅助边框】按钮也很有用，它直接在关卡四周加上一圈空位，是【加行】【加列】工具的一个有益的补充。

洛阳狼王

看不懂推箱子的路过。                                    

sokoban

好了，我想基本都介绍完了。

stopheart

【输出链接】。这个功能实用，也牛!

如果以后我用平板编好关卡，直接点这个，就发给他们，他们可以立刻玩不说，还起到了宣传作用，呵呵!

这个得多用，好，不错!

LAMBO

如此强大的功能·······
厉害
服了

stopheart

存档功能强大，以前从来没有用过，忽略了sokoban兄的劳动成果，惭愧!

stopheart

sokoban兄，有个问题，看你的区域功能让我很欣喜!在老封编辑关卡的软件里，我很想有这种加墙、加地的功能，但让我遗憾的是，你功能必须有鼠标哦!
能不能为俺平板考虑下让俺流口水的功能呢?

平板可以时间长点按，出现一个选择框，然后就可以实现这个功能了!
这个程序html5实现不了吗?