一、2048小游戏介绍

1.1 2048小游戏简介

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

1.2 项目预览

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

二、本次实践介绍

2.1 本地环境规划

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

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

游戏规则如下：

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

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

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

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

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

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

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

原文始发于微信公众号（运维江湖客）：Linux系统之部署2048网页小游戏