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

本文涉及的产品
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
RDS MySQL Serverless 高可用系列,价值2615元额度,1个月
简介: 【5月更文挑战第5天】Linux系统之部署2048网页小游戏

一、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的方块。

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

相关实践学习
如何在云端创建MySQL数据库
开始实验后,系统会自动创建一台自建MySQL的 源数据库 ECS 实例和一台 目标数据库 RDS。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助     相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
相关文章
|
3天前
|
Linux
Linux系统之expr命令的基本使用
【10月更文挑战第18天】Linux系统之expr命令的基本使用
25 4
|
2天前
|
Linux 测试技术 网络安全
Linux系统之安装OneNav个人书签管理器
【10月更文挑战第19天】Linux系统之安装OneNav个人书签管理器
16 5
Linux系统之安装OneNav个人书签管理器
|
1天前
|
运维 监控 Linux
Linux系统之部署Linux管理面板1Panel
【10月更文挑战第20天】Linux系统之部署Linux管理面板1Panel
15 2
Linux系统之部署Linux管理面板1Panel
|
1天前
|
Linux Shell
Linux系统
是对Linux系统进行管理的命令。对于Linux系统来说,无论是中央处理器、内存、磁盘驱动器、键盘、鼠标,还是用户等都是文件,Linux系统管理的命令是它正常运行的核心,与之前的DOS命令类似。linux命令在系统中有两种类型:内置Shell命令和Linux命令。
|
2天前
|
Linux Shell
Linux系统
是对Linux系统进行管理的命令。对于Linux系统来说,无论是中央处理器、内存、磁盘驱动器、键盘、鼠标,还是用户等都是文件,Linux系统管理的命令是它正常运行的核心,与之前的DOS命令类似。linux命令在系统中有两种类型:内置Shell命令和Linux命令。
|
2天前
|
关系型数据库 MySQL Linux
基于阿里云服务器Linux系统安装Docker完整图文教程(附部署开源项目)
基于阿里云服务器Linux系统安装Docker完整图文教程(附部署开源项目)
46 2
|
6月前
|
缓存 Linux 测试技术
安装【银河麒麟V10】linux系统--并挂载镜像
安装【银河麒麟V10】linux系统--并挂载镜像
1453 0
|
6月前
|
关系型数据库 MySQL Linux
卸载、下载、安装mysql(Linux系统centos7)
卸载、下载、安装mysql(Linux系统centos7)
223 0
|
10天前
|
Linux
手把手教会你安装Linux系统
手把手教会你安装Linux系统
|
2月前
|
Ubuntu Linux 网络安全
从头安装Arch Linux系统
本文记录了作者安装Arch Linux系统的过程,包括安装成果展示和遇到的疑难点及其解决方法,如硬盘不足、下载失败、设置时区、安装微码和配置无密码登录等。
从头安装Arch Linux系统