Develop a html5 2d racing game and package and publish it as a mobile APP Chapter 2 Make the monotonous background move

Continuing from the previous episode, no one will like to get a rigid "picture", so in this episode, let's make the rigid background move and make the car look like it is moving forward, so the road that was not used in the previous episode The dividing line picture is useful in this chapter

We want to draw the road dividing line, first define 2 variables

var fenjiepic; //Used to save the road boundary picture object
var fen_y; //Y coordinate of the first dividing line

Add the instantiation of fenjiepic in the init() method and set the image path

fenjiepic=new Image();

fenjiepic.src="img/fenjie.png";

Then go to draw, how to draw? Because the road is definitely not only one road dividing line, but N road dividing lines, and during the driving process, under the action of the speed of the car, the road dividing line is actually one by one. The road is constantly approaching the car and stay away from the car, we can do

Use the for loop to draw the dividing line 50 times, each dividing line is 80 pixels higher than the previous dividing line

for(var i=0;i<50;i++)
{
    ctx.drawImage(fenjiepic,canvas1.width/2-10/2,fen_y-80*i,10,30);
}

You will see the following effect, it will not move

Then all the dividing lines move down quickly, and return to the starting position when they exceed the height of the canvas

    		if(fen_y<canvas1.height)
    		{
    			fen_y=fen_y+150;
    		}else if(fen_y>=canvas1.height)
    		{
    			fen_y=0;
    		}

The principle is that because the above code is in the animate() action of the timer, the timer is continuously executed every ( ) milliseconds.

If fen_y is smaller than the canvas height of canvas1.height, fen_y is automatically added by 150; otherwise, if fen_y is greater than the canvas height of canvas1.height, fen_y is assigned a value of 0.

In this way, the dividing line is constantly moving downward, or is it not vivid enough? Let's make the road "shake" again

Define another global variable road_d

var road_d;

Assign road_d to 1 in init()

road_d=1;

In the animate() method, add judgment to the code for drawing the road

    		if(road_d==1)
    		{
    		ctx.drawImage(roadpic,0,0,canvas1.width+8,canvas1.height+8);
    		road_d=0;
    		}
    		else{
    			ctx.drawImage(roadpic,0,0,canvas1.width,canvas1.height);
    			road_d=1;
    		}

In fact, it is equivalent to the infinite repeated judgment of right, wrong, right, wrong, right, wrong, right and wrong. When road_d is equal to 1, draw a road image that is 8 pixels wider and 8 pixels higher than the canvas, and assign road_d to 0 ; When road_d is not equal to 1, draw a road image of the same size as the canvas.

Finally, in order to make the speed look faster and the game smoother, we modified the timer execution interval to every 50ms

    		setInterval(function(e) {
					animate();
				}, 50);

The background processing is completed, and the car looks really fast. After each new function is completed, it is recommended that you use hbuilder to package and release it online for testing, and back up the code, no matter what kind of program you are doing (long-winded) , I also find it long-winded).

In the next chapter, let's make evil hostile NPCs appear.

Full code:

<!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;
        var fenjiepic;
        
        var fen_y;
        var road_d;
    	function init() {
    		
    		ctx = document.getElementById('canvas').getContext('2d');
		    canvas1 = document.getElementById('canvas');
				        
				        
            roadpic = new Image();  
            zhujuepic=new Image();
            
            fenjiepic=new Image();
            roadpic.src ="img/road.png";
            zhujuepic.src="img/car1.png";
            fenjiepic.src="img/fenjie.png";
            
            
            fen_y=0;
            road_d=1;
            
    		setInterval(function(e) {
					animate();
				}, 50);
				
    	}
    	
    	function animate() {
    		ctx.clearRect(0, 0, canvas1.width, canvas1.height);

    		//----------------------------------//
    		
    		if(road_d==1)
    		{
    		ctx.drawImage(roadpic,0,0,canvas1.width+8,canvas1.height+8);
    		road_d=0;
    		}
    		else{
    			ctx.drawImage(roadpic,0,0,canvas1.width,canvas1.height);
    			road_d=1;
    		}
    		
    		
    		
    		for(var i=0;i<50;i++)
    		{
    		ctx.drawImage(fenjiepic,canvas1.width/2-10/2,fen_y-80*i,10,30);
    		}
    		
    		if(fen_y<canvas1.height)
    		{
    			fen_y=fen_y+150;
    		}else if(fen_y>=canvas1.height)
    		{
    			fen_y=0;
    		}
    		
    		
    		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>

Develop a html5 2d racing game and package and publish it as a mobile APP Chapter 2 Make the monotonous background move

Guess you like