Abstract: This article mainly takes the development of the Cocos2d Web project 2048 small game to the cloud as an example to introduce the whole process of DevOps development practice
foreword
This article mainly takes the development of the Cocos2d Web project 2048 mini-game on the cloud as an example to introduce the whole process of DevOps development practice, mainly involving the development tools of Huawei Cloud software development platform DevCloud and CocosCreator. According to the overall development process: code hosting -> compile and build -> release (warehouse) -> deployment, the article is divided into two parts for detailed introduction. The first part is the code development of the 2048 mini-game, and the second part is the development of the mini-game project. For the operation instructions of the cloud, please see the details below!
Before the official start, let's first explain the code repository used in this article:
The code repository used in the 1.x section is for CocosCreator development code, source code address: https://github.com/potato47/so-many-games.git
The code repository used in Section 2.x is: the web-side file built by CocosCreator, the repository address: https://codehub.devcloud.cn-north-4.huaweicloud.com/yxdmmsymbgl00001/soManyGames.git
2048 Mini Game Code Development
Game function description
In the 4x4 grid layout, the player swipes up, down, left and right through gestures to add up numbers of the same value in the same direction as the swipe, until the accumulation reaches 2048. This logic has also derived many high-profile mini-games.
The 2048 game in this demo is to rewrite the numbers into "kindergarten", "primary school", etc. on this basis, simulating the learning and growth path of our life to enhance the fun of the game, and the upper limit set in this demo is not Then it's 2048, what is it, why don't you try it yourself~
CocosCreator development process
Create a new scene in CocosCreator and create nodes under Canvas. According to different needs, you can add some Sprite, Label, Button and other different nodes.
For each node, we can also add corresponding components to it. These components can be the components that come with CocosCreator, or the code we wrote ourselves.
Implementation Logic: Six Key Points
The logic of the game mainly includes six points: creating a grid class, initializing the game design, setting random initial values, gesture recognition, gesture sliding logic implementation and ending the game judgment. The detailed methods are as follows:
Lattice class creation
The grid class is the basis for composing the 2048 game. Different grids are placed in 16 positions of the 4*4 grid, and each position is an independent grid. For each grid, we need to record 3 values (or 2 values): abscissa x, vertical coordinate y, (x and y together determine the grid position). The number n in the grid. Depending on the actual value of n, the text and color displayed in the grid will also change. The code reference is as follows:
Game initialization
At the beginning of the game, perform the initialization of the chessboard, clear all the grids, and then set the values of the two grids, and the values of all grids are reset to zero. The code reference is as follows:
random initial value
The code reference is as follows:
Gesture Recognition
Add a listener event when the scene is initialized, and after getting the touch event, record the start position and end position of the click. The displacement direction is determined by the change of the gesture displacement, and then the gesture sliding method is called. The reference code is as follows:
Gesture swipe logic
Depending on the sliding direction, different methods need to be used for processing.
Here is an example of left swipe:
Merge: First traverse the vertical axis y, and then traverse the horizontal axis x. In each vertical axis y, the values corresponding to the x-axis from left to right are 0 to 3. If there is a value on its right side and it is equal to it, its value is x2, and its right side value is set to 0.
Move: Repeat the above traversal. If a grid value is 0 and there is a value on the right side, the grid value is set to the right value, and the right value is set to 0.
If there is "merge" or "move", it is a valid sliding operation, that is, a new grid value is generated, and whether it is a valid operation is returned. The reference code is as follows:
Game over judgment
If it is a valid operation, judge whether it is possible to end the game and end the game. The reference code is as follows:
Application running on cloud
Using the HUAWEI CLOUD software development platform DevCloud as the development tool, the process of running the project on the cloud: creating a project, creating a code repository, creating a compilation and build task, creating a deployment task, accessing the application, and releasing resources.
Create project
Go to the software development platform DevCloud >>>
Click on the free trial to open the basic version package
Create a new Scrum project with the following parameters:
- Project Process: Scrum
- project name: custom
- Click "OK" to complete the project creation
Practical Step 2: Create a Code Repository
Go to the code hosting, import the external repository, and fill in the external repository information as follows:
Note: The code warehouse imported this time is the Web file warehouse built by CocosCreator.
- Source warehouse address: https://codehub.devcloud.cn-north-4.huaweicloud.com/yxdmmsymbgl00001/soManyGames.git
- Source repository access: no username/password required
- Check "I have read and agree to the "Privacy Policy Statement" and "Software Development Services Usage Statement"
- Click the "Next" button.
Practical Step 3: Compile and Build Tasks
Go to Compile and Build New Task
Edit build templates
(1) Select Shell, click OK, and enter the content in the command line on the right: zip -qr WebGames.zip ./
(2) Add "Choose to upload software package to software release repository" below Shell, fill in the following contents, click New and execute.
- Build Pack Path: WebGames.zip
- Release version number: 1.0.0
- Package name: WebGames
Practical Step 4: Deploy the Application
To deploy applications on the cloud, you need to configure cloud server resources to replace server resources.
(1) Go to Elastic Cloud Server Resources >>> to purchase cloud resources.
(2) Configure cloud resources according to requirements
A) The basic configuration is as follows:
- Billing model: pay on demand
- Region: North China - Beijing IV
- Availability Zone: Randomly assigned
- CPU Architecture: x86 Computing
- Specifications: c6.large.2 (2 cores 4G)
- Image: CentOS 7.5 64bit (40GB)
B) The network configuration is as follows:
- Network: vpc-default/subnet-default
- Security group: Sys-WebServer (inbound rules need to include TCP: port 8080)
- Elastic Public IP: Buy Now
- Public Internet Broadband: Calculated by Broadband
- Bandwidth Size: 1
- Release behavior: release with the instance
C) The advanced configuration is as follows:
- Cloud server name: custom
- Login Credentials: Password
- Password: Custom (required for subsequent deployments)
D) Confirm that the configuration is completed and the ECS creation is completed. Note that the number of ECS purchased is 1.
Go to Deployment Services and add a host group.
(1) Enter the host group name and select Linux.
(2) Add a host and import ECS.
- Host name (self-made, cloud service name webGames),
- IP (cloud service elastic public network IP)
- Authentication method: password
- Username: root
- Password: the password of your own cloud server ECS
- ssh port: 22
Create a deployment task
(1) Enter the deployment task and create a new task
(2) Select the "Tomcat application deployment" template, the Tomcat application deployment template will preset the steps of jdk, tomcat installation and startup.
(3) After the "Choose Deployment Source" step, add "Decompression File", and add the decompression path of the build package in it, and save it.
- Compressed file path: /usr/local/tomcat/apache-tomcat-8.5.38/webapps/WebGames.zip
- Extract directory: /usr/local/tomcat/apache-tomcat-8.5.38/webapps/WebGames
(4) "URL Health Test", modify the URL address to http://cloud server elastic public network IP:8080/WebGames/index.html, and click "Save and Execute".
(5) In the pop-up runtime parameter page, fill in the parameter value.
- host_group You can use the drop-down arrow to select the previously created host group
- package_url is the address of the build package in the release repository: /WebGames/1.0.0/WebGames.zip,
- service_port is: 8080.
Practical Step 5: After the deployment is successful, go to the "Access Method" tab of the deployment task, and click "Access" to view the application
Experience a 2048 mini-game to interpret my "this life" and see which level I can reach~
2000 years later……
Well, my education can only stop at high school...
Practical Step 6: Release resources. The free version of HUAWEI CLOUD DevCloud is free of charge, but ECS resources need to be released in time for on-demand charging.
Go to the ECS list page and delete and release ECS resources.
The above is the whole process of developing 2048 mini-games to running on the cloud. If you want to learn more, please pay attention to HUAWEI CLOUD One Line of Code Second Cloud Activity >>> , join our learning exchange group to get more cloud development skills~
Click Follow to learn about HUAWEI CLOUD's new technologies for the first time~