• Web上的推箱子游戏Sokoban


    在这里插入图片描述

    先预祝大家节日快乐~

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

    什么是 Sokoban ?

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

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

    构建镜像

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

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

    FROM node:lts-alpine as build-base
    LABEL maintainer=laosu
    
    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 端口号
    
    本地端口容器端口
    718080

    命令行安装

    如果你熟悉命令行,可能用 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 就能看到主界面

    操作很简单

    按键操作
    向上移动
    ← →左右移动
    向下移动
    backspaceUndo 回退一步
    escaperestart level 重新开局
    ENTERload 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/

  • 相关阅读:
    【C#】项目中添加png文件时,设置其“生成操作”(Build Action)属性
    计算机网络——物理层(数字传输系统)
    基于springboot的美食点评APP设计与实现
    two point(双指针)
    C++ Reference: Standard C++ Library reference: C Library: cmath: round
    redis常见面试题
    2.2 Go语言中的布尔型和整型
    .NET8中的Microsoft.Extensions.Http.Resilience库
    项目管理之如何高效召开项目团队会议
    如何评价GPT-4o?
  • 原文地址:https://blog.csdn.net/wbsu2004/article/details/127118734