码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • Web上的推箱子游戏Sokoban


    在这里插入图片描述

    先预祝大家节日快乐~

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

    什么是 Sokoban ?

    这个项目是一个 Sokoban 的克隆,只是为了演示 React 和 Hooks 的使用。它具有无限撤消和近 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 就能看到主界面

    操作很简单

    按键操作
    ↑向上移动
    ← →左右移动
    ↓向下移动
    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/

  • 相关阅读:
    UE4 蓝图宏库以及字母前缀说明
    pcl--第七节 点云配准
    基于PLC控制四自由度气动式机械手设计
    ValueError: invalid literal for int() with base 10: ‘‘
    【开源】基于Vue.js的高校实验室管理系统的设计和实现
    2022年最新黑龙江建筑安全员真题题库及答案
    Vue2:axios的使用
    探索C语言的数据类型:解密编程世界的核心秘密
    GIS工具maptalks开发手册(四)02——渲染地图信息框之添加绘制工具 & 获取面的坐标数据信息框进行展示 & 渲染图片的两种方式
    两个有序序列的中位数
  • 原文地址:https://blog.csdn.net/wbsu2004/article/details/127118734
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号