Web上的推箱子游戏Sokoban

先预祝大家节日快乐~

Sokoban 是老苏最喜欢的益智游戏之一,放假了,当然要放松一下啦;

什么是 Sokoban ?

这个项目是一个 Sokoban 的克隆,只是为了演示 ReactHooks 的使用。它具有无限撤消和近 500 个推箱子谜题。

如果不想安装,可以试试官方站点:https://ecyrbe.github.io/sokoban/

构建镜像

如果你不想自己构建,可以跳过,直接阅读下一章节

老苏是基于源代码构建的镜像, Dockerfile 如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
FROM node:lts-alpine as build-base
LABEL maintainer=laosu<wbsu2003@gmail.com>

ARG PUBLIC_URL=/

WORKDIR /app
COPY ./package.json yarn.lock ./
RUN yarn config set registry https://registry.npm.taobao.org
RUN yarn install

COPY . .
RUN yarn build


FROM nginx:1.12-alpine
COPY --from=build-base /app/build /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

构建镜像和容器运行的基本命令如下👇

1
2
3
4
5
6
7
8
9
10
11
12
13
# 下载代码
git clone https://github.com/ecyrbe/sokoban.git

# 或者加个代理
git clone https://ghproxy.com/github.com/ecyrbe/sokoban.git

# 进入目录
cd sokoban

# 放入老苏的 Dockerfile 文件;

# 构建镜像
docker build -t wbsu2003/sokoban:v1 .

安装

在群晖上以 Docker 方式安装。

在注册表中搜索 wbsu2003 ,下拉找到 wbsu2003/sokoban,版本选择 latest

端口

本地端口不冲突就行,不确定的话可以用命令查一下

1
2
# 查看端口占用
netstat -tunlp | grep 端口号
本地端口 容器端口
7180 80

命令行安装

如果你熟悉命令行,可能用 docker cli 更快捷

1
2
3
4
5
6
# 运行容器
docker run -d \
--restart unless-stopped \
--name sokoban \
-p 7180:80 \
wbsu2003/sokoban

也可以用 docker-compose 安装,将下面的内容保存为 docker-compose.yml 文件

1
2
3
4
5
6
7
8
9
version: '3'

services:
sokoban:
image: wbsu2003/sokoban
container_name: sokoban
restart: unless-stopped
ports:
- 7180:80

然后执行下面的命令

1
2
3
4
5
6
7
8
9
10
# 新建文件夹 sokoban 
mkdir -p /volume2/docker/sokoban

# 进入 sokoban 目录
cd /volume2/docker/sokoban

# 将 docker-compose.yml 放入当前目录

# 一键启动
docker-compose up -d

运行

在浏览器中输入 http://群晖IP:7180 就能看到主界面

操作很简单

按键 操作
向上移动
← → 左右移动
向下移动
backspace Undo 回退一步
escape restart level 重新开局
ENTER load next LEVEL 下一关

关数保存在浏览器的 Local Storage –> SokobanLevel

Value 改为 200,然后刷新页面

老苏试了一下,Value 最大可以到 489,也就是说一共有 490

现在你可以随心所欲的玩耍了,再次㊗️大家节日快乐~

参考文档

ecyrbe/sokoban: sokoban with react hooks and typescript
地址:https://github.com/ecyrbe/sokoban

Sokoban 在线游戏
地址:https://ecyrbe.github.io/sokoban/