一、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服务
四、部署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 访问网页小游戏
五、试玩2048网页小游戏
点击页面中的“New Game”,开始新游戏。
2048是一款数字类益智游戏,玩家需要在一个4x4的方格中移动数字方块,通过合并相同数字的方块来得到更高的数字,最终目标是得到一个2048的方块。
游戏规则如下:
游戏开始时,方格中会随机生成两个数字方块,数字为2或4。
玩家可以通过上下左右四个方向的滑动来移动数字方块,所有方块会沿着滑动方向移动,直到遇到墙壁或其他方块。
当两个相同数字的方块在移动过程中相邻接触时,它们会合并成一个新的方块,数字为原来两个方块的数字之和。
每次滑动后,系统会在空白的方格中随机生成一个新的数字方块,数字为2或4。
游戏结束条件有两个:一是方格填满无法再移动任何方块时,二是成功得到一个2048的方块。
在游戏过程中,玩家可以选择重新开始游戏或者悔棋。