【好玩的经典游戏】Docker环境下部署双人网页小游戏

最新推荐文章于 2024-04-17 11:23:57 发布
最新推荐文章于 2024-04-17 11:23:57 发布
阅读量710 收藏 2
点赞数
文章标签： 游戏 docker 容器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jks212454/article/details/136705647
版权

【好玩的经典游戏】Docker环境下部署双人网页小游戏

一、项目介绍

1.1 项目简介

flatris：Flatris是一个最近从头开始重新设计的项目，它已经发展成一个具有UI和服务器组件的多人游戏。Flatris是一个快速节奏的两人在线网页游戏。在这个游戏中，两个玩家将同时进行操作，竞争谁能够更快地消除下落的方块。这个游戏的UI经过重新设计，充满了现代感和极简主义的风格。它具有直观的控件和友好的用户界面，使玩家能够轻松地理解和操作游戏。

1.2 项目特点

  • 快节奏的游戏体验：Flatris是一个快节奏的游戏，玩家需要迅速思考和反应，以在游戏中取得胜利。

  • 多人游戏：Flatris是一个多人在线游戏，可以与其他玩家一同竞技。玩家可以与好友或其他在线玩家进行对战。

  • 新的界面设计：游戏界面经过重新设计，使其更加现代化和直观。玩家可以更容易地理解和操作游戏。

  • 服务器组件：Flatris具有服务器组件，这意味着游戏可以在互联网上进行多人游戏。玩家可以与世界各地的其他玩家一起玩耍。

  • 用户界面改进：新的用户界面使得游戏更加易于使用和导航。玩家可以轻松找到自己需要的功能和设置。

  • 更多功能和选项：Flatris提供了更多的功能和选项，如排行榜、成就系统等。

二、本次实践介绍

二、本地环境介绍

2.1 本地环境规划

本次实践为个人测试环境，操作系统版本为centos7.6。

hostnameIP地址操作系统版本Docker版本
jeven192.168.3.166centos 7.620.10.17

2.2 本次实践介绍

1.本次实践部署环境为个人测试环境，生产环境请谨慎；
2.在Docker环境下部署Flatris双人网页小游戏。

三、本地环境检查

3.1 安装Docker环境

本次实践需要提前安装Docker环境，如果未安装，可以使用以下一键安装脚本部署Docker环境。

curl -fsSL https://get.docker.com -o get-docker.sh
sh get-docker.sh --mirror Aliyun
  • Docker镜像加速配置
echo '{ "registry-mirrors": ["https://docker.mirrors.sjtug.sjtu.edu.cn"] }'   > /etc/docker/daemon.json 
systemctl daemon-reload  && systemctl restart docker
  • 开启路由转发
echo "net.ipv4.ip_forward=1" >>  /etc/sysctl.conf
systemctl restart network
sysctl net.ipv4.ip_forward
  • 在/etc/rc.d/rc.local文件中，写入以下内容：
vim /etc/rc.d/rc.local

echo 1 > /proc/sys/net/bridge/bridge-nf-call-iptables
echo 1 > /proc/sys/net/bridge/bridge-nf-call-ip6tables

chmod +x /etc/rc.d/rc.local

3.2 检查Docker服务状态

检查Docker服务是否正常运行，确保Docker正常运行。

[root@jeven ~]# systemctl status docker
● docker.service - Docker Application Container Engine
   Loaded: loaded (/usr/lib/systemd/system/docker.service; enabled; vendor preset: disabled)
   Active: active (running) since Fri 2024-03-01 00:18:43 CST; 52s ago
     Docs: https://docs.docker.com
 Main PID: 11826 (dockerd)
    Tasks: 28
   Memory: 155.4M
   CGroup: /system.slice/docker.service
           ├─11826 /usr/bin/dockerd -H fd:// --containerd=/run/containerd/containerd.sock

3.3 检查Docker版本

检查Docker版本

[root@jeven ~]# docker -v
Docker version 20.10.17, build 100c701

3.4 检查docker compose 版本

检查Docker compose版本，确保2.0以上版本。

[root@jeven ~]# docker compose version
Docker Compose version v2.6.0

四、构建容器镜像

4.1 下载项目源码

下载flatris项目源码

git clone https://github.com/ovidiuch/flatris.git

查看源码内容

[root@jeven flatris]# tree -L 2 ./
./
├── babel.config.js
├── docker-compose-visual.yml
├── docker-compose.yml
├── Dockerfile
├── flatris.gif
├── flatris.png
├── flow-typed
│   └── npm
├── jest.config.js
├── jest.framework-setup.js
├── jest-puppeteer.config.js
├── jest.setup.js
├── jest.visual.config.js
├── LICENSE
├── multiplayer.md
├── package.json
├── README.md
├── scripts
│   └── generate-game-media-queries.js
├── server
│   ├── api.js
│   ├── db.js
│   ├── env.js
│   ├── env-set-dev.js
│   ├── env-set-prod.js
│   ├── express.js
│   ├── firebase.js
│   ├── http.js
│   ├── next.js
│   ├── rollbar.js
│   ├── socket.js
│   ├── start-dev-client.js
│   ├── start-dev-server.js
│   └── start-prod.js
├── shared
│   ├── constants
│   ├── reducers
│   ├── types
│   └── utils
├── TODO.md
├── web
│   ├── actions
│   ├── babel.config.js
│   ├── components
│   ├── constants
│   ├── cosmos.config.json
│   ├── global.css
│   ├── __image_snapshots__
│   ├── mocks
│   ├── next.config.js
│   ├── pages
│   ├── reducers
│   ├── static
│   ├── store.js
│   ├── utils
│   └── visualtest.js
└── yarn.lock

19 directories, 38 files

4.2 查看Dockerfile文件

进入flatris源码目录

[root@jeven ~]# cd /data/docker/flatris/
[root@jeven flatris]# ls
babel.config.js            Dockerfile   flow-typed               jest-puppeteer.config.js  LICENSE         README.md  shared   yarn.lock
docker-compose-visual.yml  flatris.gif  jest.config.js           jest.setup.js             multiplayer.md  scripts    TODO.md
docker-compose.yml         flatris.png  jest.framework-setup.js  jest.visual.config.js     package.json    server     web

查看Dockerfile文件内容

[root@jeven flatris]# cat Dockerfile
FROM node:12
WORKDIR /usr/src/app
COPY package.json yarn.lock ./
RUN yarn --frozen-lockfile
COPY . ./
RUN yarn build
EXPOSE 3000
CMD yarn start

4.3 复制变量文件

将源码目录中的.env.example.js复制为.env.js文件

cp .env.example.js .env.js

4.4 构建镜像

执行以下命令，构建镜像。

docker compose build

在这里插入图片描述

如果不想构建或构建失败，可以使用我已经构建好的镜像。

swr.cn-north-4.myhuaweicloud.com/jeven/flatris:latest

五、部署网页小游戏

5.1 修改docker-compose.yml文件

本次实践部署使用docker compose方式，可以直接使用源码目录中的docker-compose.yml部署文件，需要按以上部署提前构建镜像。

[root@jeven flatris]# cat docker-compose.yml
version: '3'
services:
  flatris:
    build: .
    ports:
      - '3000:3000'
    restart: unless-stopped

如果不想构建镜像，可修改docker-compose.yml文件，直接快速部署。

version: '3'
services:
  flatris:
#    build: .
    image: swr.cn-north-4.myhuaweicloud.com/jeven/flatris:latest
    container_name: flatris
    ports:
      - '5200:3000'
    restart: unless-stopped

5.2 创建容器

执行docker compose up -d命令，创建flatris容器。

[root@jeven flatris]# docker compose up -d
[+] Running 2/2
 ⠿ Network flatris_default  Created                                                                                                             0.0s
 ⠿ Container flatris        Started                                                                                                             0.7s

5.3 查看容器状态

检查flatris容器状态，确保flatris容器正常启动。

[root@jeven flatris]# docker compose ps
NAME                COMMAND                  SERVICE             STATUS              PORTS
flatris             "docker-entrypoint.s…"   flatris             running             0.0.0.0:5200->3000/tcp, :::5200->3000/tcp

5.4 查看容器日志

查看flatris容器运行日志，确保flatris服务正常启动。

[root@jeven flatris]# docker compose logs
flatris  | yarn run v1.22.17
flatris  | $ env-cmd babel-node server/start-prod.js
flatris  | Browserslist: caniuse-lite is outdated. Please run:
flatris  | npx browserslist@latest --update-db
flatris  | Firebase not configured
flatris  | > Ready on http://localhost:3000

六、访问游戏系统

6.1 访问游戏初始页

访问地址：http://192.168.3.166:5200，将IP替换为自己服务器IP地址，进入进flatris初始页。如果无法访问，则检查服务器防火墙是否设置，云服务器的安全组端口是否放行等。

在这里插入图片描述

6.2 开始新游戏

点击“NEW GAME”，开始新游戏。

在这里插入图片描述

输入名称，自定义填写即可。

在这里插入图片描述
在这里插入图片描述

6.3 双人游戏

点击游戏右侧的“2P”，复制游戏链接。

在这里插入图片描述

在另一个浏览器或者电脑打开复制的链接，输入名字即可。

在这里插入图片描述

一直选择确认，点击“OK”。

在这里插入图片描述

选择加入游戏

在这里插入图片描述

开始双人网页小游戏，通过方向键：上下左右控制方块。

在这里插入图片描述

江湖有缘
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
【好玩的经典游戏】Docker环境下部署retroarch-web经典游戏模拟器
jks212454的博客
05-24 276
【好玩的经典游戏】Docker环境下部署retroarch-web经典游戏模拟器
给新手的 11 个 Docker 免费上手项目
weixin_40877900的博客
10-31 272
给新手的 11 个 Docker 免费上手项目 Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中，然后发布到任何流行的 Linux或Windows 机器上，也可以实现虚拟化。容器是完全使用沙箱机制，相互之间不会有任何接口。给新手们推荐12个极易上手的Docker实践项目 spug 地址: http s:// github.com/openspug/spug star: 3.8k fork: 769 使用 Python+Vue 实现的开源运维平台，前后端分离
Docker最有价值的八个应用场景
TechRunner
07-14 3040
转载关于Docker的好文——Docker最大化实际项目价值的八个应用场景。
幻兽帕鲁游戏搭建（docker）
weixin_50835854的博客
03-19 3422
这段时间一直在写论文还有找工作，也没学啥新技术，所以博客也很长时间没写了，但开年有个游戏爆火，所以我也弄来玩了玩，由于可以搭建私人服务器，所以我趁着过年很多云服务器厂商打折买了个8H16G的云服务器，搭建个私服玩玩，没想到运维个游戏服务器也确实很锻炼人，搭建过程中也遇到了很多问题，所以今天从头记录一下。注意本博客适合有运维基础的人学习，没有的就别看了。
Docker应用推荐个人服务器实用有趣的项目推荐
qq1170993239的博客
04-17 3055
一个开源的虚拟专用网络（VPN）解决方案，可以在个人服务器上搭建，提供安全的远程访问和加密的网络连接。：一个流行的开源内容管理系统（CMS），可以在个人服务器上搭建，方便地创建和管理博客、网站和在线商店。：一个开源的云存储和协作平台，可以在个人服务器上搭建，提供文件同步、日历、联系人、笔记等功能。：一个开源的视频会议和即时通讯平台，可以在个人服务器上搭建，提供安全的远程会议和沟通工具。：一个开源的文档管理系统，可以创建和组织个人笔记、知识库和文档，方便快速查找和共享。
【好玩的 Docker 项目】搭建一个完全自由的音乐播放软件 ————Navidrome 随时随地！想听就听！
11-26 1801
随着国内版权意识的提高，现在想听一首歌曲，往往我们可能要切换 3-4 个 APP—— 网易云音乐、QQ 音乐、咪咕音乐…… 切换起来很麻烦，有的 APP 就算你买了 VIP 服务，下载的歌曲还是加密的，一旦 VIP 到期后某些歌你还听不了，非常蛋疼。顺哥博客最近被朋友推荐入了苹果自己家的音乐 APP，感觉还不错，但是搜索特定的几个歌手的歌曲时候，也发现搜索不到（没错，就是南京小李的）
Github上11 个 练习Docker 的上手项目
这个时代，作为程序员可能要学习小程序
10-26 2543
前言Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中，然后发布到任何流行的 Linux或Windows 机器上，也可以实现虚拟化。容器是完...
利用 Docker 搭建独角数卡的 支付方式，轻松收取货币！｜好玩儿的 Docker 项目
12-03 1852
继上一篇利用 Docker 轻松搭建独角发卡！人人都可以开一个线上小店｜好玩儿的 Docker 项目之后，我们今天来为我们的小店搭建一个 USDT 的付款方式。（支付宝当面付也可以搭建，用门头照，不过之前有个梗 ——“当面付当面抓”；第三方支付也可以搭建，但是咕咕没什么经验，里面手续费有的抽成很高，故这俩都不再展开，有兴趣的自行谷歌搜索）搭建方式首发于Stille 大佬咕咕这边附自己的实操记录，补充一些细节部分。
在Docker容器中部署静态网页的方法教程
09-30
主要给大家介绍了在Docker容器中部署静态网页的方法教程，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
Java实现精致好玩的麻将小游戏.zip
最新发布
05-12
【项目资源】：包含前端、后端、移动开发、操作系统...Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes
在docker环境下部署nacos部署，配有详细附图
01-10
docker部署nacos详细步骤，清测可用
docker+seleniumweb自动化测试环境的部署
02-24
首先搜索需要pull的image命令：dockersearchselenium针对dockerselenium，这里需要pull的image分别是：目前只支持在chrome和firefox中进行测试下载的命令是dockerpull+镜像名称+tag 官方镜像可能会使打开的网页出现...
docker下一键自动部署PHP环境
11-26
docker下 搭建 PHP+mysql+redis+nginx 开发环境， 并实现一键自动化部署，保证了在各个平台上的一致性，既方便又高效。
【好玩的 Docker 项目】10 分钟搭建你专属的下载神器 ——qbittorrent
11-26 378
前阵子，入手了一号双鸡两台 3o，无限流量，1T 的硬盘空间，所以想着折腾一下一直听说，但是又似乎很神奇的 PT 下载（正好租户给了我几个邀请码）。PT 即 Private Tracker ，一种小范围、附带流量统计的下载。根据上传流量不同，用户拥有不同身份，对应不同权限甚至不同下载速度。为了提高上传流量，一般会需要一台能够持续不断下载上传的机子（一般会用 NAS），VPS24 小时开机，加上 3o 又是不限流量，还有 1T 的硬盘空间，是非常理想的 PT 鸡鸡。顺哥博客。
【好玩儿的Docker项目】10分钟搭建一个高颜值的在线工具箱，用户体验很棒！
RRiddle的博客
10-24 1206
咕咕前段时间自己搭了一个在线工具箱，搭建会麻烦一点：今天直接给大家分享一个可以一条docker命令直接搭的在线工具箱。他俩的功能也类似，感兴趣的可以搭一个玩玩～
小而精的 Docker 项目，30 分钟快速入门 Docker 容器
GitChat
10-09 342
为什么要使用 Docker? Docker 容器的启动在秒级 Docker 对系统资源利用率高,一台主机上可以同时运行数千个Docker容器。 Docker 基本不消耗系统资源，使得运行在Docker里面的应用的性能很高。 相比于传统的虚拟化技术，Docker 有哪些优势？ 更快速的支付和部署：开发者可以使用一个标准的镜像来构建一套开发容器，开发完成之后，运维人员可以直接使用这个容器来部署代...
【好玩的开源项目】Docker下部署HomeAssistant智能家居系统
热门推荐
jks212454的博客
11-02 1万+
【好玩的开源项目】Docker下部署HomeAssistant智能家居系统
一键部署：Docker环境下若依项目教程
本教程详细介绍了如何使用Docker部署一个若依前后端分离项目，旨在帮助开发者快速上手并优化部署流程。以下是关键步骤和知识点： 1. **项目规划与前置工作** - **所需镜像**：项目依赖于Java 8（JDK 1.8）、MySQL ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

江湖有缘

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值