Linux系统之部署2048网页小游戏

1.1 2048小游戏简介1.2 项目预览

2.1 本地环境规划

2.2 本次实践介绍

3.1 检查yum仓库

3.2 安装httpd软件

3.3 启动httpd服务

3.4 查看httpd服务

3.5 防火墙和selinux设置

3.6 浏览器测试web服务

4.1 下载小游戏源码

4.2 查看项目源码目录

4.3 重启httpd服务

4.4 访问网页小游戏

一、2048小游戏介绍

1.1 2048小游戏简介

2048是一款数字拼接的益智游戏。游戏的目标是通过在一个4x4的方格中移动和合并不同数字的方块，最终组合出一个数字是2048的方块。游戏规则很简单，玩家可以通过滑动方向键（上、下、左、右）来移动所有方块。每次滑动时，所有的方块都会向滑动的方向移动一格，相同数字的方块会合并成一个数字更大的方块。每次移动之后，系统会在空白的方格中随机生成一个2或者4的方块。当滑动之后的方块中有一个方块的数字达到2048时，游戏胜利。游戏的挑战在于玩家需要合理地移动方块，使得方块能够合并更大的数字，并且尽量不让方格填满。如果方格填满了并且无法再移动方块，游戏结束。2048是一款简单易懂但又很考验玩家策略和规划能力的游戏，非常适合消磨时间和锻炼大脑。无论是在手机上还是电脑上，你都可以轻松地享受到这款有趣的益智游戏。

1.2 项目预览

可以看下部署好的项目预览

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

二、本次实践介绍

2.1 本地环境规划

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

hostname IP地址 操作系统版本 内核版本 jeven 192.168.3.166 centos 7.6 3.10.0-957.el7.x86_64

2.2 本次实践介绍

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

三、安装httpd软件

3.1 检查yum仓库

如果没有镜像源，可以使用阿里云的镜像源。

curl -o /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-7.repo

sed -i -e '/mirrors.cloud.aliyuncs.com/d' -e '/mirrors.aliyuncs.com/d' /etc/yum.repos.d/CentOS-Base.repo

检查yum仓库状态，确保各镜像源正常。

[root@jeven ~]# yum repolist enabled

Loaded plugins: fastestmirror, langpacks

Determining fastest mirrors

 * epel: mirrors.bestthaihost.com

repo id                                                                       repo name                                                                                  status

!base/7/x86_64                                                                CentOS-7 - Base - mirrors.aliyun.com                                                       10,072

!epel/x86_64                                                                  Extra Packages for Enterprise Linux 7 - x86_64                                             13,767

!extras/7/x86_64                                                              CentOS-7 - Extras - mirrors.aliyun.com                                                        518

!mongodb-org                                                                  MongoDB Repository                                                                            342

!mysql-connectors-community/x86_64                                            MySQL Connectors Community                                                                    227

!mysql-tools-community/x86_64                                                 MySQL Tools Community                                                                         100

!mysql57-community/x86_64                                                     MySQL 5.7 Community Server                                                                    678

!updates/7/x86_64                                                             CentOS-7 - Updates - mirrors.aliyun.com                                                     5,176

repolist: 30,880

3.2 安装httpd软件

直接使用yum安装httpd软件。

yum -y install  httpd

3.3 启动httpd服务

启动httpd服务，并使开机自启。

systemctl start httpd && systemctl enable  httpd

3.4 查看httpd服务

查看httpd服务状态，确保httpd服务正常。

[root@jeven ~]# systemctl status httpd

● httpd.service - The Apache HTTP Server

   Loaded: loaded (/usr/lib/systemd/system/httpd.service; enabled; vendor preset: disabled)

   Active: active (running) since Fri 2024-04-12 04:41:29 CST; 1h 31min ago

     Docs: man:httpd(8)

           man:apachectl(8)

 Main PID: 37892 (httpd)

   Status: "Total requests: 49; Current requests/sec: 0; Current traffic:   0 B/sec"

    Tasks: 11

   Memory: 4.8M

   CGroup: /system.slice/httpd.service

           ├─37892 /usr/sbin/httpd -DFOREGROUND

           ├─37895 /usr/sbin/httpd -DFOREGROUND

           ├─37897 /usr/sbin/httpd -DFOREGROUND

           ├─37898 /usr/sbin/httpd -DFOREGROUND

           ├─37899 /usr/sbin/httpd -DFOREGROUND

           ├─37926 /usr/sbin/httpd -DFOREGROUND

           ├─37929 /usr/sbin/httpd -DFOREGROUND

           ├─37931 /usr/sbin/httpd -DFOREGROUND

           ├─37932 /usr/sbin/httpd -DFOREGROUND

           ├─38118 /usr/sbin/httpd -DFOREGROUND

           └─41149 /usr/sbin/httpd -DFOREGROUND

Apr 12 04:41:29 jeven systemd[1]: Starting The Apache HTTP Server...

Apr 12 04:41:29 jeven systemd[1]: Started The Apache HTTP Server.

3.5 防火墙和selinux设置

设置selinux

sed -i 's/SELINUX=enforcing/SELINUX=disabled/' /etc/selinux/config

setenforce 0关闭防火墙，如果想要开启防火墙，需放行80端口。

systemctl stop firewalld && systemctl disable firewalld

3.6 浏览器测试web服务

浏览器打开：http://192.168.3.166，将IP替换为自己服务器IP地址。

四、部署2048网页小游戏

4.1 下载小游戏源码

进入网页根目录

[root@jeven ~]# cd /var/www/html/

[root@jeven html]#

在github拉取2048网页小游戏源码

 git clone https://github.com/gabrielecirulli/2048.git

4.2 查看项目源码目录

查看项目源码目录

[root@jeven html]# tree -L 2 ./2048/

./2048/

├── CONTRIBUTING.md

├── favicon.ico

├── index.html

├── js

│   ├── animframe_polyfill.js

│   ├── application.js

│   ├── bind_polyfill.js

│   ├── classlist_polyfill.js

│   ├── game_manager.js

│   ├── grid.js

│   ├── html_actuator.js

│   ├── keyboard_input_manager.js

│   ├── local_storage_manager.js

│   └── tile.js

├── LICENSE.txt

├── meta

│   ├── apple-touch-icon.png

│   ├── apple-touch-startup-image-640x1096.png

│   └── apple-touch-startup-image-640x920.png

├── Rakefile

├── README.md

└── style

    ├── fonts

    ├── helpers.scss

    ├── main.css

    └── main.scss

4 directories, 22 files

给以下目录授权

chown -R apache:apache /var/www/html/2048

4.3 重启httpd服务

重启httpd服务

systemctl restart httpd

4.4 访问网页小游戏

访问地址：http://服务器IP地址/2048，进入到2048网页小游戏主页。

五、试玩2048网页小游戏

点击页面中的“New Game”，开始新游戏。

2048是一款数字类益智游戏，玩家需要在一个4x4的方格中移动数字方块，通过合并相同数字的方块来得到更高的数字，最终目标是得到一个2048的方块。

游戏规则如下：

游戏开始时，方格中会随机生成两个数字方块，数字为2或4。

玩家可以通过上下左右四个方向的滑动来移动数字方块，所有方块会沿着滑动方向移动，直到遇到墙壁或其他方块。

当两个相同数字的方块在移动过程中相邻接触时，它们会合并成一个新的方块，数字为原来两个方块的数字之和。

每次滑动后，系统会在空白的方格中随机生成一个新的数字方块，数字为2或4。

游戏结束条件有两个：一是方格填满无法再移动任何方块时，二是成功得到一个2048的方块。

在游戏过程中，玩家可以选择重新开始游戏或者悔棋。

作者声明本文无利益相关，欢迎值友理性交流，和谐讨论～