SokoPlayer HTML5 推箱子程序 使用说明 使用说明最早于 2012 年 6 月 2 日发在魔方吧论坛, 后整理成单独文档 http://bbs.mf8-china.com/forum.php?mod=viewthread&tid=90057 文档作者 : 杨超 (aka sokoban@mf8) 最后更新日期 :2013 年 7 月 13 日 SokoPlayer HTML5 程序作者 : 杨超, anian 简介 SokoPlayer HTML5 推箱子的地址是 :http://sokoban.ws/sokoplayer/sokoplayer_html5.php 也可以在 http://sokoban.ws 首页点击 在线推箱子入口 进入 SokoPlayer HTML5 第一版 于 2011 年 5 月 21 日上线 这是一个在线程序, 无需安装, 无需插件, 直接在浏览器就可以运行 但是要保证浏览器是比较新的, 支持 HTML5 的一些特性才可以使用 如果使用 IE8 或者以下, 请升级到 IE9 若是使用 WinXP 等老系统无法升级到 IE9, 也可以安装其他支持 HTML5 的浏览器 如 Firefox 可以到这里下载火狐 Firefox: http://www.firefox.com.cn/ 其他的如谷歌的 Chrome 浏览器也对 HTML5 的支持很好 事实上, 根据经验,Chrome 执行 javascript 代码的速度是 Firefox 的两倍 除了在台式电脑上运行, SokoPlayer HTML5 也可以在 Android( 安卓 ) 和苹果手机或平板 电脑上运行 若使用安卓设备, 在 Android 4.0 以上支持较好, 可用系统默认浏览器或下载 Android 版 Firefox 总的来说 :SokoPlayer HTML5 是一个轻便的在线推箱子程序, 兼备游戏和编辑两大主要功能 因为在浏览器里面运行, 所以具有跨平台的特点, 在 Windows,Mac OS X, Linux,iPad 平板电 脑,Android 设备等各种平台上都可以流畅地运行 下面汇总一下 SokoPlayer HTML5 的功能和使用方法
目录 (1) 游戏控制 (2) 关卡的选择和载入, 答案的载入 (3) 关卡或答案的输出 (4) 一些辅助功能 (5) 存档 (6) 关卡编辑器 (7) 逆推模式 (8) 关卡的标题和作者 (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 对这一特性的支持比较好, 其他一些浏览器可能暂时还不支持这一功能 浏览器扩展 (Add-on) 为了方便从网页加载 XSB 关卡, 我给浏览器写了一个扩展, 安装了这个扩展之后, 在网页 ( 如 论坛, 邮件 ) 中看到有 XSB 格式的关卡, 可以直接选中, 右键点击后, 在右键菜单中选择 Copy to SokoPlayer HTML5 直接在线打开 节省了至少两次鼠标点击 效果请看下面截图
目前扩展支持 Firefox 和 Chrome 两大浏览器 Firefox 扩展安装请到下面地址 : https://addons.mozilla.org/en-us/firefox/addon/sokobanws-tools/ 点击 Add to Firefox 大按钮就行了 或者点击链接 :http://sokoban.ws/sokoplayer/sokoban@sokoban.ws.xpi Chrome 可直接下载扩展文件 : http://sokoban.ws/sokoplayer/sokoban_ws_tools.crx 打开浏览器的扩展页, 把下载的扩展文件拖放进去就会提示安装了 (3) 关卡或答案的输出 可以用键盘 : O: 把当前答案 ( 或部分答案 ) 输出到文本编辑框
M: 把当前关卡输出到文本编辑框 也可以用页面中的按钮 : 在游戏画面下方的第一排按钮, 也就是前面介绍过的控制按钮, 在这一排按钮的最右部分有三 个输出按钮 分别是 : 输出关卡, 输出答案 和 输出链接 前两个顾名思义, 最后 一个 输出链接 的含义是输出一个带有关卡信息在内的超链接 如 链接代码 : http://sokoban.ws/sokoplayer/index2.php?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 _ 按住 CTRL 键同时点击 输出链接, 则输出英文界面的地址链接 你可以把这个链接直接通过电子邮件, 即时聊天工具或者论坛发给你的朋友 他直接点开链接 就可以玩这个关了 这也算 SokoPlayer HTML5 提供的一项比较有特色的功能了 不管是用键盘快捷键, 还是用页面按钮, 关卡或答案都是输出到我们前面用来输入的大编辑框 中 此时你可以把大编辑框中的内容复制出来, 以作它用 为了使得导出关卡和答案更加方便, 还提供了发送邮件快捷按钮 这样可以省去一些复制 粘贴的操作 [1] 发送邮件 点击 发送邮件 按钮, 浏览器会打开默认的邮件管理程序 ( 如 Foxmail, 微软的 outlook, 或 者智能手机带的各种邮件收发管理程序 ), 并且 SokoPlayer HTML5 会把关卡信息传给邮件管 理程序 这样邮件管理程序的收件人地址, 邮件标题和邮件内容 ( 关卡和答案 ) 都会自动填写 好了 [2] @ 收件人地址用 @ 按钮用来设置 在大输入框中填入地址, 按 @ 键, 程序就记住了, 以后就不用 输入了 如果没有设置, 那么在 [1] 中, 收件人地址一栏将为空白 (4) 一些辅助功能
换皮肤 : 游戏画面上方的 皮肤 下拉菜单可以选择更换皮肤 默认的是 borgar 的非常精美的皮肤 若你的显示器很大, 觉得皮肤小了 建议换成 simple32 皮肤 标尺 网格和旋转 : 标尺 按钮: 打开或者关闭标尺 采取和 YSokoban 一样的标号方法 即横坐标用字母, 纵坐标用数字 # 按钮 : 打开或者关闭网格, 便于更清楚的辨认位置 标尺左侧有几个按钮, 可以用来变换关卡方向 : # 按 > 按钮, 关卡向右旋转 90 度 # 按 < 按钮, 关卡向左旋转 90 度 # 按 按钮, 关卡左右作镜面反射 # 按 o 按钮, 恢复原始朝向改变方向后, 关卡上方会显示一个红色或者绿色的符号, 表示当前方向和原始方向的关系 注意 : 不管方向怎么变, 程序内部都是以原始方向来记录和输出 lurd 答案 区域数箱子和目标功能 : 按住 ctrl 键, 同时按住鼠标左键不放, 在关卡画面中拖动选择一个矩形区域 程序会把矩形区域内的箱子和目标的数目显示在关卡上方 声音效果 : 要启用声音效果, 要把 音效 选项选上 有两种音效 : [1] 过关时, 会有约 3 秒钟的掌声 [2] 若鼠标点击到一个空位是人无法走过去的, 或者是选中的箱子无法推到的, 那么这时会有 uh-oh 的一个错误提示声 (5) 存档 因为程序是在浏览器中运行的, 而浏览器出于安全考虑, 禁止程序对硬盘进行写操作 因此程 序无法直接使用硬盘来保存和管理答案
但是幸好浏览器还是提供了一种较为简单的存储方式, 这也是 HTML5 的一个特性, 即所谓的 local Storage 运用这一特性, SokoPlayer HTML5 还是提供了一种较为初级的存档功能 我们前面提到过, 可以把关卡载入到 textarea 关卡集 但是这个只是保存在内存里, 下次玩的时候, 又要重新载入, 十分不方便 而存档功能是通过浏览器间接保存到硬盘, 下次玩的时候, 直接从存档中把关卡调出到 textarea 关卡集就行了, 省去了复制粘贴的麻烦 先看一下和存档相关的按钮, 在关卡画面下方的第二排 : 一共提供 200 个存档, 编号为从 0 到 199. 在 存档 的下拉菜单可以选择不同的存档 存档的名字显示在存档标号右侧 程序会自动以关卡的标题和作者作为存档的名字 每个存档都保存了一个关卡和一个完整或不完整的答案 存档各个按钮的用途 保存 把当前游戏中的关卡, 答案保存到显示的存档号 可以先在 存档 下拉菜单中选择你希望保存的编号 ( 一般选择一个空的存档 ), 然后再点击保存 程序直接用标题和作者作为存档名字, 参看第 (8) 小节 读取 把当前编号的存档及其答案读取到 textarea 关卡集 删除 因为只有 200 个存档 所以也可以删除一些无用的存档 删除时, 最右侧的选项框要 选中, 否则程序会提醒你无法删除 这主要是为了避免误删 检查 用于查看究竟哪些存档用了, 哪些没用 按此按钮, 所有有记录的存档号码及其名字 就会输出到下面的大编辑框 读取全部 把所有存档都读入到 textarea 关卡集 清空 清空所有存档 为安全起见, 右侧的选择框也必须选上, 才能执行清空操作, 否则报 错
前面在第 (2) 部分谈到 载入关卡 按钮右侧有个 2slot 选项 如果这个选择选上的话, 大编辑框里的关卡除了被载入内存 ( 即 textarea 关卡集中 ), 同时也保存到硬盘 ( 即存档 ) 保存的方式是从第 0 号存档开始, 有空的就往里填 ; 若该存档已使用, 就跳到下一个空的存档 若一次载入很多关卡, 超出了 200 个存档的数量, 则存满即止, 后面的就不保存了 (6) 关卡编辑器 可以点击关卡上方的 进入编辑模式 进入关卡编辑, 再点击 进入游戏模式 回到游戏模式 游戏模式和编辑模式可以随意切换, 所以用来编辑设计关卡和检验关卡是否有解非常方便 在编辑模式下, 多出了四排编辑用的按钮, 所以很容易识别当前在何种模式之下 在编辑模式下, 若直接点第三排 退出, 程序直接退出编辑模式, 不对当前的更改作保存 若要保存更改, 请点击第三排按钮中的 保存并退出 或 进入游戏模式 退出后, 程序把这个关卡作为一个新的关卡加到 textarea 关卡集, 成为 textarea 关卡集的最后一个关卡 若你不想在内存中新增一个关卡, 可以选择 保存并退出 按钮右侧的 覆盖 选项之后, 再保存退出, 这时关卡就在内存里覆盖了原来对应的关卡, 关卡集和关卡号不变 若选中 标准化, 那么保存退出的时候, 程序会把关卡标准化, 移除没有用的墙体等等 注意 : 保存退出后, 关卡只是暂时存在 textarea 关卡集, 要永久保存的话, 请使用存档, 或者把关卡输出后另作保存 请记得做好存档工作, 避免不必要的数据丢失 编辑模式下, 基本的操作方法是这样的 : 先在第一排按钮选择一种工具 不同的工具在画布上的作用是不同的 如 箱子 工具就是在鼠标点击的位置画一个箱子, 若重复的点一个位置, 那么就会就会在 箱子, 目标上的箱子 两者之间来回的变化 其他的 人, 目标, 墙体, 橡皮擦 的工作原理类似 另外鼠标右键也同样起到 橡皮擦 的作用 加行, 加列, 删行, 删列 这四种工具也是先选中, 然后再点击画布 点击的
位置就会执行相应的加行删列等操作 区域选择 工具是所有工具里面相对比较高级的一种工具, 它提供了更为强大的功能 第二排按钮全部都是对应 区域选择 工具使用的 在 区域选择 工具模式下, 可以按住鼠标左键拖动选择一个区域 当前选中区域有一个矩形黑框围着 按 复制 或者 剪切 按钮完成选中 选中之后就可以直接用鼠标左键拖着选中的区域摆放在画布中你想要的位置 点击选中区域外部, 选中的区域就被粘贴在当前位置了 SokoPlayer HTML5 的编辑器还提供了一种特别的 融入 的粘贴方式, 可以选中 融入 按钮右侧的选项对比 融入 和 粘贴 的区别 选择的区域还可以通过 > 按钮来旋转或者镜面反射; 第二排的 边界加墙 填充墙体 填充空位 也是对选中的区域的改变, 这个可以试一下就很清楚了 编辑模式下有无限撤销功能, 所以不用怕操作失误, 点击第三排的 撤销 按钮就可以撤销上一步的编辑 第三排的 辅助边框 按钮也很有用, 它直接在关卡四周加上一圈空位, 是 加行 加列 工具的一个有益的补充 第三排还有 清空目标 和 清空箱子 两个比较有特色的按钮 清空目标 把目标变成地板, 把目标上的箱子变成箱子 清空箱子 把箱子变成地板, 把目标上的箱子变成目标 (7) 逆推模式 逆推模式指的是把箱子的初始位置和目标位置互换, 从目标位置出发, 把箱子拉到 ( 不能推 ) 初始位置, 并且人还要回到初始位置为过关 YASC Sokoban 和 Sokofan 等推箱子软件都早已提供了逆推模式的功能, 有时能为解关提供新的思路 SokoPlayer HTML5 也提供了逆推模式 点击 进入逆推模式 按钮进入逆推模式 进入逆推模式后, 有一个红色粗体的 R 字提示当前是逆推模式 ( 如下图 )
刚进入逆推模式时, 在第一步推动之前, 可以用鼠标直接点击空地随意设置人的位置 这是因为需要游戏者去判断正确过关时人的停留位置 逆推模式下, 可以用箭头键控制人的移动, 用 Ctrl 加箭头键来拉箱子 也可以用鼠标操作 点击箱子, 再点击白点, 人会自动寻找路径拉箱子 下面的 5 个 前进后退停止 等控制按钮在 逆推模式 下也可以使用 在没有选中箱子的情况下, 会有一个小白点提示人最后应该停到的位置 ( 即原关卡人的初始位置 ) 箱子都拉到正确位置后, 人还必须停到这个小白点才算过关 过关后, 点击 输出答案 按钮, 会把答案转换成正常模式的答案输出 过关后还可以再次点击 进入游戏模式 按钮退出逆推模式, 此时答案也会输出到下方的文本编辑框 逆推模式的答案 在逆推模式下, 若当前状态还没过关, 则输出答案按钮给出 逆推 的答案 若在逆推模式下过关了, 在过关状态下, 给出的则是 正常 顺序的答案
逆推模式记录 ( 部分 ) 答案除了用 lurd 格式外, 还有一个特殊之处 因为逆推模式下有第一步设置人的位置的步骤, 故用 [x,y] 表示正式拉之前人直接跳到的位置 x 是列,y 是行, 都从 0 开始算 [x,y] 置于 lurd 之前 逆推模式的答案格式的例子如下 : [15,7]LLLLLLLLLLLluuurrddUUUUU 逆推模式下也必须读入这种格式的答案, 也就是要有前面 跳 的一步 (8) 关卡的标题和作者 这个功能本不应该单独作为一个小节, 而是应该分散在关卡的读入输出编辑等小节中 但由于对关卡标题和作者信息的较完整的支持是在 SokoPlayer HTML5 第 1 版本完成差不多两年之后才实现, 所以后来才补上这一节单独说明一下 除了 XSB 格式作为描述关卡自身的标准之外, 关于关卡的元数据, 广泛接受和支持的基本只有 Title( 标题 ) 和 Author( 作者 ) 这两个关键词 (a) 从文本编辑框读入关卡时, 标题和作者信息也同时读入, 并显示 (b) 输出关卡 按钮, 除了输出 xsb 关卡, 同时也输出 Title 和 Author (c) 在编辑模式下, 可以更改 标题 / 作者 信息 编辑模式下, 增加了两个按钮 : 编辑标题, 编辑作者 (d) 存档功能也支持标题作者, 程序自动把标题和作者作为存档的名字, 不需要自己取存档名字了