魔方吧·中文魔方俱乐部

标题: HTML5的推箱子程序 [打印本页]

作者: sokoban 时间: 2011-5-25 13:52:04 标题: HTML5的推箱子程序

HTML5版本的在线推箱子程序SokoPlayer基本完成。
程序用脚本语言 javascript 编写，使用了HTML5的canvas（画布）元素和，版本较低的一些浏览器可能无法运行，如IE6,IE7, IE8等。

目前程序带有一个较为完善的编辑器，功能已经相当丰富。

程序的地址是：
http://sokoban.ws/sokoplayer/SokoPlayer_HTML5.php

HTML5版本的优点是不需要Java插件。如果您用的浏览器比较新，那么直接就能在浏览器里面游戏，
甚至在智能手机或平板电脑的浏览器都能运行。但是程序还没有对触摸屏特别优化，不如在台式机上使用方便。

作者: 奇遇 时间: 2011-5-25 15:01:49

HTML5.。牛逼。。

作者: moren 时间: 2011-5-25 16:06:06

HTML5确实牛，flash表示鸭梨大

作者: tonylmd 时间: 2011-5-25 16:52:19

就是最近一直在忙的东西吧辛苦辛苦

作者: anian 时间: 2011-5-25 19:57:37

HTML5版本好用! 版主制作辛苦了!

作者: sokoban 时间: 2011-5-26 12:19:29

http://player.youku.com/player.php/sid/XMjY5OTk4MTcy/v.swf

作者: sokoban 时间: 2011-5-28 19:40:31

再弄一个基于HTML5的推箱子关卡编辑器，基本功能都有了，可以到下面地址使用：

http://sokoban.ws/utility/SokoEditor.php

作者: anian 时间: 2011-5-29 19:04:29

HTML5的SokoEditor不错。

作者: sokoban 时间: 2011-6-12 10:35:02

HTML5版本的SokoPlayer作了较大的更新

http://sokoban.ws/sokoplayer/SokoPlayer_HTML5.php

anian兄为本次更新贡献了大量的代码，捕获鼠标，滑轮和键盘输入以及读入XSB关卡部分，是anian兄的贡献。

主要更新如下：
1，可以在输入框一次载入多个xsb关卡，作为textarea关卡集显示
2，用鼠标滑轮来撤销和恢复
3，可以打开或关闭标尺和网格。#号按钮表示“网格“。打开标尺功能后，鼠标指向的格子会有提示。
4，现在点击人，人能够移动到的地方也用小白点提示。
5，可以自由改变关卡的方向。[>] 按钮表示向右90度旋转, [ | ] 按钮表示左右镜面反射，[ o ] 表示恢复到原始方向。

[ 本帖最后由 sokoban 于 2011-6-12 10:37 编辑 ]

作者: anian 时间: 2011-6-12 21:41:48

现在的SokoPlayer HTML5 已经很好用。

感谢制作和更新!

作者: laizhufu 时间: 2011-6-17 23:06:39

Sokoban兄，看到您sokoban.ws界面及功能不断更新，为您高兴，加油！

作者: sokoban 时间: 2011-6-18 07:40:25 标题: 回复 11# 的帖子

多谢支持和鼓励，很多功能也是边学边弄的。

作者: skyivben 时间: 2011-7-8 20:57:09

SokoPlayer HTML5 和 SokoEditor HTML5 都是非常不错的软件。
我现在用得最多的推箱子程序就是 SokoPlayer HTML5 了，不过我喜欢 simple32 皮肤，而不是默认的 borgar 皮肤。显然 simple32 皮肤更漂亮。borgar 皮肤的优点是能够显示更大的关卡地图，不过我的计算机屏幕已经足够大了，并且我也不推非常大的地图的箱子，simple32 皮肤对我来说正好。
另外，建议在 SokoPlay HTML5 的页面上加上 SokoEditor HTML5 的链接。
非常感谢楼主编写的很好用的推箱子程序。

作者: sokoban 时间: 2011-7-9 13:02:06

谢谢skyivben兄的建议，现在用手机上网，过些天在电脑上修改一下。

作者: skyivben 时间: 2011-7-24 18:04:09 标题: 建议增加把当前关卡地图输出到文本编辑框的功能

SokoPlayer HTML5 可以 O: 把当前答案（或部分答案）输出到文本编辑框，这非常有用。
建议增加一个功能：M: 把当前关卡地图以 XSB 格式输出到文本编辑框，这样就方便玩家在遇到难题时在论坛中求助。

作者: sokoban 时间: 2011-7-24 21:15:48 标题: 回复 15# 的帖子

已经更新，现在按M把当前关卡的当前状态输出到文本框。
若想输出初始状态，先按esc重置后再按M

作者: skyivben 时间: 2011-7-24 21:25:23 标题: 回复 16# 的帖子

sokoban 更新很快，非常感谢。
好象有个 Bug，就是在谷歌浏览器，按 O 键可以正常输出当前答案，但是按 M 键没有反应。
而在 IE 9 浏览器中，一切正常，按 M 键可以正常输出当前关卡的当前状态。
不知道是不是我的机器的问题，还请各位朋友在谷歌浏览器中测试一下。谢谢！

作者: sokoban 时间: 2011-7-24 21:30:47

我测试了一下Chrome ，似乎正常。会不会是浏览器还是用缓存的.js 文件，多刷新几次看行不行？

作者: skyivben 时间: 2011-7-24 21:45:57 标题: 回复 18# 的帖子

我刚才在谷歌浏览器中刷新了一下，果然可以了。谢谢！

原来因为已经在页面中看到：“M: 把当前关卡输出到文本编辑框”，所以就没有刷新页面。
我还在 Firefox 浏览器中测试了一下，也能够正常使用。

作者: sokoban 时间: 2011-7-24 22:14:37 标题: 回复 13# 的帖子

把 SokoEditor HTML5 的链接直接加到导航菜单的"软件"下面了。SokoEditor HTML5 有几个地方我自己也还不太满意，还有待进一步完善，先加了链接再说，以后再慢慢改了。

[ 本帖最后由 sokoban 于 2011-7-25 09:25 编辑 ]

作者: skyivben 时间: 2011-7-25 07:48:09 标题: 回复 20# 的帖子

应该说是导航菜单的“软件”下面。虽然说这两个单词的意义在这里是差不多的，大家看了也知道是怎么回事。

我认为 SokoEditor 已经很不错了，功能很强，操作起来也很方便，是个非常不错的在线工具。

作者: sokoban 时间: 2011-7-25 09:26:30 标题: 回复 21# 的帖子

哈哈，我搞错了，已经修正。

作者: sokoban 时间: 2012-1-18 13:31:48

HTML5推箱子更新

地址：http://sokoban.ws/sokoplayer/SokoPlayer_HTML5.php

把编辑器和游戏程序合二为一。

点击“进入/退出编辑模式“来切换。

进入编辑模式后，会多了三行按钮。
第一行是工具按钮，先点中选择一种工具，再在画布上编辑。

加行，减行，加列，减列工具选中，在画布上点击，点中的行或列就会被删除或在该处增加行或列。

区域选择工具可以作区域操作。选择此工具后，可拖动鼠标在画布上选择一个矩形区域。
选择区域后，就可点击第二行工具进行相应的操作。

第三行按钮是对关卡的操作。
其中“保存“按钮把当前编辑的关卡保存到内存。保存后退出编辑模式就可以在游戏模式下测试关卡。
注意：只是在内存中保存修改，关闭浏览器或刷新网页后，保存的关卡丢失。

作者: sokoban 时间: 2012-1-18 14:29:58

接上，

合并后有一些好处：
编辑模式下可以使用网格
SokoPlayer 的读入关卡模块是anian兄写得，兼容性和可靠性比较强。

作者: sokoban 时间: 2012-1-18 14:33:52

SokoPlayer HTML5 还有一个重要的新功能是可以从地址中接受关卡。

可以把任意一个关卡作为一个链接发给他人，别人点开后就可以直接在线游戏了。
如下面这个链接：

第30期比赛关卡

http://sokoban.ws/sokoplayer/?w=21&h=21&lvl=___________HHHHHHHHH_|___________H___H___H_|___________H_H***H_H_|___HHHHHHHHH_*___*_H_|__HH_______H_*___*_H_|_HH__*_*_*_H__***__H_|_H__*_*_*__H_*___*_H_|HHHH*HHH_*_H_*___*_H_|H______H*a*___***__H_|H_*_*__H_*_H_H_H_HHHH|H*$***_H*__H_*______H|H______H__H_*******_H|H*****_H_H_*___*____H|H______HH____*****H_H|HHHHHH_H__H_*__*____H|____H_$._H__*__*____H|____H___H__********_H|____HHHHHH_____*____H|_________HHHHH_*_HHHH|_____________H_._H___|_____________HHHHH___

复制代码

要生成这种链接，只需把关卡载入 SokoPlayer ，然后点击“输出链接“ 按钮即可。

[ 本帖最后由 sokoban 于 2012-1-18 14:43 编辑 ]

作者: stopheart 时间: 2012-1-18 19:32:41

谢谢sokoban做出越来越出色的html5在线推箱子。
  刚才试编了一下，合并后很方便！
  能否加一功能：
  当我编大关卡时往往需要数箱子，能否显示一个数字，能统计箱子与点的差植，如是0刚好，正与负我清楚加箱子还是点！另外能否加一开关，可锁定图形大小，推时有用。

作者: sokoban 时间: 2012-1-18 19:54:16 标题: 回复 26# 的帖子

数箱子显示差值容易实现。用开关锁定图形大小是什么意思呢，不是太明白，能否解释一下？
是不是指的是网页的缩放？如果是网页的缩放，好像不太容易实现，要查查看能否锁定网页缩放大小。

作者: stopheart 时间: 2012-1-18 20:26:26

我有时候推的时候把图扩大了，这样点点会准一一些，不过在推得过程中不太容易掌握，点不好图会缩小到原来大小。

作者: sokoban 时间: 2012-1-18 20:48:38 标题: 回复 28# 的帖子

那加一个更大的皮肤也能解决这个问题。现在最大的是32大小的皮肤，可以加一个48甚至60大小的皮肤

作者: stopheart 时间: 2012-1-19 08:19:12

原帖由 sokoban 于 2012-1-18 20:48 发表那加一个更大的皮肤也能解决这个问题。现在最大的是32大小的皮肤，可以加一个48甚至60大小的皮肤

我不是这个意思，这个功能再说吧！

作者: sokoban 时间: 2012-1-19 09:23:00 标题: 回复 30# 的帖子

我没有用过iPad，都是在电脑上调试，所以在iPad上的一些功能需求一时理解不了。

作者: sokoban 时间: 2012-1-19 09:34:29

原帖由 stopheart 于 2012-1-18 20:26 发表
我有时候推的时候把图扩大了，这样点点会准一一些，不过在推得过程中不太容易掌握，点不好图会缩小到原来大小。

是上次提过的放大镜功能吗？

作者: stopheart 时间: 2012-1-19 10:44:00

sokoban兄这个功能只是方便，但不是以前说的，有时间我再描述......

作者: sokoban 时间: 2012-1-19 19:06:35

HTML5 推箱子更新

(1)修正了一些bug
(2)退出编辑模式时总是保存
(3)编辑模式时显示箱子和目标的数量差，若是正数，则还要加箱子，若是负的，加目标。
若是0，则箱子和目标刚好相等。
(4)加了前进，后退，暂停等控制按钮，方便演示观看答案。

作者: stopheart 时间: 2012-1-19 19:45:05

sokoban兄：
　　html5在线推关卡列表集中的关卡怎么没有呢？

作者: sokoban 时间: 2012-1-19 20:11:00 标题: 回复 35# 的帖子

是这个地址 http://sokoban.ws/sokoplayer/SokoPlayer_HTML5.php 吗？
关卡都有啊。stopheart 兄看不到关卡吗？

作者: stopheart 时间: 2012-1-19 20:14:07

我现在正在下载ie9,我怀疑是浏览器的事，目前我用电脑上网呢。

作者: sokoban 时间: 2012-1-19 20:17:35 标题: 回复 37# 的帖子

IE8或以下都不行，不支持 HTML5，看不到图像。只有IE9以上才行。

作者: stopheart 时间: 2012-1-19 20:46:28

确如你所说，装完ie9一切正常。
试用了演示答案，很好！

作者: sokoban 时间: 2012-1-28 12:56:14

HTML5 推箱子更新：
http://sokoban.ws/sokoplayer/SokoPlayer_HTML5.php

主要的新功能有：

【游戏模式】
1. 增加了瞬间移动[IM] 选项，若选中则省略动画，一步到位。
2. 校正选项一般可以不选。只有当载入的答案是全大写或全小写这样信息不完全的情况下，才需要勾上。
3. 把“标准化”按钮移到游戏模式下

【编辑模式】
1. 编辑模式下保存的关卡都被加入 textarea 关卡集，即视为从输入框载入的临时关卡
2. 选中的矩形区域可以作“旋转，对称”等操作。
3. 选中区域增加“剪切”和“融入”两个操作。
4. 选中的区域可用鼠标或箭头键移动，看好了再粘贴或融入。要预览融入后的效果，把融入右边的选项勾上。按ESC键取消选中区域。
5. 增加NORM选项，若勾上，退出编辑模式时，自动正规化关卡。否则只去掉空行。
6. 编辑模式下增加了无限撤销功能，不小心画错了也可以轻松undo
7. 增加了一个四周加辅助边框的按钮

[ 本帖最后由 sokoban 于 2012-2-3 09:17 编辑 ]

作者: stopheart 时间: 2012-1-31 12:55:09

sokoban兄，你好：
今天用html5在线解未来的比赛关卡，出现了一个让我“心痛”的问题，当我解一段时间的时候，我想回到某一个阶段，下意识的按了esc，复位了！原来走的步数全看不到了。
能否增加一个功能，当按esc键的时候，把步数复制出来？

作者: sokoban 时间: 2012-1-31 17:47:30 标题: 回复 41# 的帖子

stopheart 兄，好的，这个容易。

作者: sokoban 时间: 2012-2-2 14:36:25

HTML5 推箱子更新：
http://sokoban.ws/sokoplayer/SokoPlayer_HTML5.php

1. 启用鼠标右键。游戏模式下，右键撤销。编辑模式下，右键起橡皮擦功能
2. 较为简单的穿越功能（类似歪推的穿越），可用下面两关测试：(要勾上穿越选项启用此功能)

---#################---
---#---##--#---##--#---
---#--$----#--$----#---
#####-###$-##-###$-#---
#---#$-##-###$-##-####--
#--$---#--$----#--$--#--
##-##--#---##--#-@-#-#--
##-#################-###
#--$-$-$-$-$-$-$-$-$-$-#
#-...................--#
########################

----####-------
----#--###-----
----#-.--######
--###-$#------#
--#--#-######-#
--#-.---#---#-#
--#-$##-#--*--#
--##-#-*##-#-##
####-#---@-#-#
#----#--#-##-#
#-#######*-#-#
#-#---#----#-#
#-#--*--#--#-#
#-##-##-####-#
#----#--*--#-##
###-##---#-#$-#
-##-######--.-#
-#-.$------#--#
-#---##########
-#####---------

作者: stopheart 时间: 2012-2-2 16:43:51

sokoban兄，你好：
　试了你的穿越，很好！
　另一个功能，按esc，答案复制出来，已经有了，试过，很好！
　还有一个功能能否加一下，因我的关卡大多都是直接从老封导出来的，和魔方吧的格式不一样，有时候我着急发到我平板电脑的信箱了，就上班了，忘了转换，平板里又没有查找替换功能的软件，能否让html5也能识别老封的空格格式呢？

作者: sokoban 时间: 2012-2-2 19:34:39 标题: 回复 44# 的帖子

好的，我先看看老封的空格格式是怎样的。

另：上面两个穿越测试关卡，第一关是天狼兄设计的吧。不知第二关作者是谁？

作者: stopheart 时间: 2012-2-2 20:04:42

sokoban兄，你好：
　　刚才测试了一下，有一个奇怪的问题！
我用电脑装载关卡文件，就是复制了一个关卡集，可以认识老封的格式，而且能分类出关卡。
但同样的关卡集，我在平板里复制到那个窗口，装载关卡，虽然出现了大量的关卡，但关卡数量与原来不符，另一个关卡显示的不对，有的是一行，有的是二行，或者三行？
　　不知道问题出在哪儿？

作者: sokoban 时间: 2012-2-2 20:17:14

那应该已经支持老封的空格了。空格无论是 - （横杠）还是 _ (下划线)都是能认的。

这个可能是行尾换行符的问题。windows，linux和苹果对文本文件的换行符处理不太一样。不知anian兄对这个问题见解？我没有在苹果平板上测试过，还真不好分析具体的原因是为什么。

作者: anian 时间: 2012-2-3 00:43:34 标题: 回复 43# 的帖子

level 2 info:

----####-------
----#--###-----
----#-.--######
--###-$#------#
--#--#-######-#
--#-.---#---#-#
--#-$##-#--*--#
--##-#-*##-#-##
####-#---@-#-#-
#----#--#-##-#-
#-#######*-#-#-
#-#---#----#-#-
#-#--*--#--#-#-
#-##-##-####-#-
#----#--*--#-##
###-##---#-#$-#
-##-######--.-#
-#-.$------#--#
-#---##########
-#####---------
Title: Learning Orimaze 3
Author: Dries de Clercq

作者: anian 时间: 2012-2-3 01:02:13 标题: 回复 47# 的帖子

\r 和\n 已经没有问题，除非那是其它的符号。或许遇到不认识的符号时，写出来是什么，这样就可以知道了。

作者: sokoban 时间: 2012-2-3 08:32:23

原帖由 stopheart 于 2012-2-2 20:04 发表
sokoban兄，你好：
　　刚才测试了一下，有一个奇怪的问题！
我用电脑装载关卡文件，就是复制了一个关卡集，可以认识老封的格式，而且能分类出关卡。
但同样的关卡集，我在平板里复制到那个窗口，装载关卡，虽然出 ...

stopheart 兄，是某一个关卡集有问题，还是所有关卡集都有问题呢？

作者: csgg 时间: 2012-2-3 08:41:20

Html5V5！！！
Flash表示鸭梨很大…………

作者: sokoban 时间: 2012-5-14 08:19:22

HTML5 推箱子(SokoPlayer HTML5)更新：
在游戏模式下，按住ctrl键，用鼠标选择一个区域。程序会计算所选中的区域的箱子和目标的个数，并显示在关卡上方。
地址：http://sokoban.ws/sokoplayer/SokoPlayer_HTML5.php

（可能要刷新一下页面）

作者: Fenz 时间: 2012-5-14 09:23:13

赞！
早听说HTML5要让flash被淘汰了，不过眼下flash还是主流。
不知道用HTML5编像胡波仿真软件那样的程序合不合适

作者: stopheart 时间: 2012-6-1 15:19:24

今天不小心试了一个功能，存档，好极了，以前从来没有注意这个功能，这样就方便多了!

不过想问sokoban兄，存档的这个文件在什么情况下存档文件会没有?存档的文件应该是放在内存中吧?

1.关闭浏览器，存档文件丢失?
2.重启电脑，存档文件丢失?

作者: 洛阳狼王 时间: 2012-6-1 15:43:09

推箱子可以过几关的路过。

作者: sokoban 时间: 2012-6-2 00:36:34

stopheart 发表于 2012-6-1 15:19
今天不小心试了一个功能，存档，好极了，以前从来没有注意这个功能，这样就方便多了!

不过想问sokoban兄 ...

只要不清空浏览器历史，存档都不会消失。且若在同一台机器用多个浏览器，每个浏览器是独立的，存档互不影响。

有空我把HTML 5推箱子功能整理介绍一下，目前可以吹牛地说，在所有平台历史上所有推箱子程序来个总排名，HTML 5推箱子能挤进前五名。特点是无须安装，跨平台，较强的游戏及关卡编辑功能，还算是具备了一些別人没有的特点。

作者: sokoban 时间: 2012-6-2 00:47:06

本帖最后由 sokoban 于 2012-6-2 00:48 编辑

存档是由浏览器存入硬盘。

HTML5推箱子的硬伤是没有关卡答案管理。

作者: stopheart 时间: 2012-6-2 11:35:13

sokoban 发表于 2012-6-2 00:36
只要不清空浏览器历史，存档都不会消失。且若在同一台机器用多个浏览器，每个浏览器是独立的，存档互不影 ...

如果按平板算，sokoban兄的html5在线推箱子，我认为是世界第一！
如果你想随时随地，把XSB关卡文件变成图片，hmtl5在线推箱子软件，是你唯一的选择！
如果你想在各种平台都想省事推箱子，除了html5在线推箱子，还能有谁？！
.....

好功能实在是很多，我也没有全部用到，详细功能请看：http://bbs.mf8-china.com/forum.p ... &extra=page%3D1

如果你费点时间上手了，我想，你在离开pc想玩电脑的时候，也会唱起那首歌：我的眼里只有你→html5，跨平台在线推箱子一级棒软件！

欢迎光临魔方吧·中文魔方俱乐部 (http://bbs.mf8-china.com/)