This example is illustrated based on the experience of making a racing game APP that was used to sell money to car dealers in the past (but of course only the part about the game)
Idea: A picture of the track, there is a protagonist car on the track, and the player can control the movement of the car by dragging with their fingers
Set a timer, NPC vehicles that are not controlled by the protagonist will be refreshed continuously at the top of the screen, and these vehicles will continue to move down until they leave the bottom of the screen
Set a timer, if the protagonist's vehicle is not hit by an NPC vehicle, add 100 points for every second of survival (actually a survival game)
Until the protagonist's vehicle is hit by an NPC vehicle, the game ends. The score obtained at this time is the final score of the game, and all timers are closed.
》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》
Preparation: pictures of racing cars (Note: All pictures are from the Internet, only for learning, not for commercial purposes. If you need to use the program for commercial purposes, please replace it with original pictures, and thanks to the author of the following pictures, great deeds)
road track pictures
Picture of road dividing line:
(A white vertical line picture, x=5 pixels, y=15 pixels, you can draw it with the drawing tool by yourself, just above it, because the background color is also white, it is invisible)
》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》
Code preparation: (nonsense)
The most basic html5 code to implement animation and games, you can take a look at some of the most basic introductions in the previous article:
About developing html5 2d animations and games and packaging and publishing as mobile APPs (simple entry)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Racing game</title>
<script type="text/javascript">
function init() {
setInterval(function(e) {
animate();
}, 100);
}
function animate() {
}
</script>
</head>
<body onLoad="init();">
<canvas id="canvas">
</canvas>
</body>
</html>
》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》
Let's talk about how to draw our pictures
If you have hbuilder code editing software (if you don't have it, create a new folder directly and edit it with text), then open hbuilder, create a new mobile APP project, the program name is saiche (this can be set by yourself), in the project management The browser finds the saiche project, finds the img folder, and then puts all our pictures into the img folder
Followed by the definition of 2 variables, used to save the picture object
var roadpic; var zhujuepic;
Add to roadpic in the init() method , instantiate the zhujuepic variable and set the processing of the image path
function init() {
ctx = document.getElementById('canvas').getContext('2d');
canvas1 = document.getElementById('canvas');
//Instantiate the variable with new image()
roadpic = new Image();
zhujuepic=new Image();
//Set the image path of the image instance
roadpic.src = "img/road.png"; //The path of the road picture
zhujuepic.src="img/car1.png"; //The path of the protagonist's car
setInterval(function(e) {
animate();
}, 100);
}
Draw a picture in animate() , drawImage (which image instance, coordinate X position, coordinate Y position, width, height)
ctx.drawImage(roadpic,0,0,canvas1.width,canvas1.height);
ctx.drawImage(zhujuepic,canvas1.width/2-40/2,canvas1.height-80,40,80);
see the effect
In this way, we can make the vehicle appear on the road. You can use the method of online packaging into an installation package introduced in the previous article to package it into an APK and test it on your own mobile phone. It is worth noting that we only fixed the screen here. The size of the screen, you have to adjust the size of the screen to adapt to different mobile devices, the project source code is below
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Racing game</title>
<script type="text/javascript">
var ctx;
var canvas1;
var roadpic;
var zhujuepic;
function init() {
ctx = document.getElementById('canvas').getContext('2d');
canvas1 = document.getElementById('canvas');
roadpic = new Image();
zhujuepic=new Image();
roadpic.src ="img/road.png";
zhujuepic.src="img/car1.png";
setInterval(function(e) {
animate();
}, 100);
}
function animate() {
ctx.clearRect(0, 0, canvas1.width, canvas1.height);
//----------------------------------//
ctx.drawImage(roadpic,0,0,canvas1.width,canvas1.height);
ctx.drawImage(zhujuepic,canvas1.width/2-40/2,canvas1.height-80,40,80);
}
</script>
</head>
<body onLoad="init();">
<canvas id="canvas" width="300" height="540">
</canvas>
</body>
</html>
In the next chapter, we will explain how to make things move