Web上的推箱子游戏Sokoban

先预祝大家节日快乐~

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

什么是 Sokoban ？

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

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

构建镜像

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

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

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;"]

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

# 下载代码
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。

端口

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

# 查看端口占用
netstat -tunlp | grep 端口号

本地端口	容器端口
7180	80

命令行安装

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

# 运行容器
docker run -d \
   --restart unless-stopped \
   --name sokoban \
   -p 7180:80 \
   wbsu2003/sokoban 

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

version: '3'

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

然后执行下面的命令

# 新建文件夹 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/