The last chapter completed the drag and drop function, now it's time for the NPC vehicle to appear automatically
In the first few words, we have a few pictures of the car that we haven't used yet. Let's use them in this case.
First define an array variable to store a large number of NPC car teams
var npccars; npccars = new Array();
Then add a setnpccar() method in the animate() method to automatically increase the NPC car
function setnpccar() {
var carnpc1 = Object.create(Car);
var deshu = (Math.random () * 10) * (300/10);
carnpc1.x = deshu;
carnpc1.y = 0-80;
carnpc1.img = new Image();
switch (Math.floor(Math.random() * 5))
{
case 0:
carnpc1.img.src = "img/car2.png";
break;
case 1:
carnpc1.img.src = "img/car3.png";
break;
case 2:
carnpc1.img.src = "img/car4.png";
break;
case 3:
carnpc1.img.src = "img/car5.png";
break;
case 4:
carnpc1.img.src = "img/car6.png";
break;
}
carnpc1.width = 40;
carnpc1.height = 80;
npccars.push(carnpc1);
if (npccars.length > 0)
{
for (var i = 0; i < npccars.length; i++) {
npccars[i].y += 5;
if(npccars[i].y>540)
{
npccars[i].y=-80;
npccars.pop ();
}
}
}
}
Explanation: var carnpc1 = Object.create(Car); means to define a new variable and instantiate it as the Car class, that is, to generate a new car
var deshu = (Math.random() * 10) * (300 / 10); Represents randomly generated screen width divided by 10 and multiplied by random 1 to 10 coefficients X coordinate according to the width of the screen, our screen width here is 300 , you can modify it to the screen width you need; this will randomly generate the X coordinate according to the screen width
carnpc1.x = deshu; means to assign the above X coordinate value to the new car
carnpc1.y = 0-80; means to assign the Y coordinate of 0 minus the height of the car to the new car
carnpc1.img = new Image(); instantiate the image object and assign it to the new car
switch (Math.floor(Math.random() * 5))
{
case 0:
carnpc1.img.src = "img/car2.png";
break;
case 1:
carnpc1.img.src = "img/car3.png";
break;
case 2:
carnpc1.img.src = "img/car4.png";
break;
case 3:
carnpc1.img.src = "img/car5.png";
break;
case 4:
carnpc1.img.src = "img/car6.png";
break;
}
Represents the number of Math.floor(Math.random() * 5) selected by the switch condition, that is, the number of 0-4 is randomly generated, and if the number is 0, the case 0 is processed (the picture of the new car is The path is assigned as "img/car2.png"), if it is 1, it will be processed as case 1 (the image path of the new car will be assigned as "img/car3.png"), if it is 2, it will be processed as case 2 (the image of the new car will be processed as case 2). The path is assigned as "img/car4.png"), if it is 3, it is processed as case 3 (the image path of the new car is assigned as "img/car5.png"), if it is 4, it is processed as case 4 (the picture of the new car is assigned The path is assigned as "img/car6.png")
carnpc1.width = 40; //Represents assigning the width of the new car to 40
carnpc1.height = 80; //represents the height of the new car as 80
npccars.push(carnpc1); //Represents putting the new car object into the defined NPC car array for easy saving
if (npccars.length > 0)
{
for (var i = 0; i < npccars.length; i++) {
npccars[i].y += 5;
if(npccars[i].y>540)
{
npccars[i].y=-80;
npccars.pop ();
}
}
}
Explanation: if (npccars.length > 0) do the following when the length of the npc car array is greater than 0
for (var i = 0; i < npccars.length; i++) {} Use a for loop to inspect each car in the NPC car array
And add 5 to the Y coordinate of each car npccars[i].y += 5;
If in each car, the y-coordinate of a car is already greater than the height of the screen 540, set the y-coordinate of this car to minus 80 npccars[i].y=-80;
And delete the last element in the NPC vehicle array npccars.pop ();
Since in the animate() method, the setnpccar() method will also be executed continuously, and NPC cars will appear on our screen in large numbers and move down
Finally, you only need to draw all NPC cars in the animate() method according to the total length of the NPC car array
- if (npccars.length > 0) {
- //ctx.fillText(npccars.length, 10, 20);
- for (var i = 0; i < npccars.length; i++) {
- ctx.drawImage(npccars[i].img, npccars[i].x, npccars[i].y, npccars[i].width, npccars[i].height);
- }
- }
It's easy to imagine that with such a dense NPC car, our protagonist's car must be rolled over and die,,,,
Moreover, the NPC cars shown in the picture above are still rolling over each other, which seems unrealistic. How can the cars roll over each other? So we will optimize the appearance of NPCs in the next chapter, and realize the collision detection of the NPC cars against the protagonist cars.
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;
var zhujue;
var is_clicked_zhujue;
var npccars;
function Car(x, y, width, height, img) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.img = img;
}
function init() {
ctx = document.getElementById('canvas').getContext('2d');
canvas1 = document.getElementById('canvas');
canvas1.addEventListener('touchstart', onTouchStart, false);
canvas1.addEventListener('touchmove', onTouchMove, false);
canvas1.addEventListener('touchend', onTouchEnd, false);
//------------------------------------------//
zhujue = Object.create(Car);
zhujue.x = canvas1.width / 2 - 40 / 2;
zhujue.y = canvas1.height - 80;
zhujue.width = 40;
zhujue.height = 80;
zhujuepic = new Image();
zhujue.img = zhujuepic;
//------------------------------------------//
roadpic = 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;
npccars = new Array();
setInterval(function(e) {
animate();
}, 50);
}
function onTouchMove(event) {
var touch = event.targetTouches[0];
if (is_clicked_zhujue) {
zhujue.x = touch.pageX - zhujue.width / 2;
zhujue.y = touch.pageY - zhujue.height / 2;
}
}
function onTouchStart(event) {
var touch = event.targetTouches[0];
if (checkimpact(touch.pageX, touch.pageY, zhujue)) {
//alert("1");
is_clicked_zhujue = true;
}
}
function onTouchEnd(event) {
is_clicked_zhujue = false;
}
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;
}
//----------------------------------//
setnpccar();
if (npccars.length > 0) {
//ctx.fillText(npccars.length, 10, 20);
for (var i = 0; i < npccars.length; i++) {
ctx.drawImage(npccars[i].img, npccars[i].x, npccars[i].y, npccars[i].width, npccars[i].height);
}
}
ctx.drawImage(zhujue.img, zhujue.x, zhujue.y, zhujue.width, zhujue.height);
}
function checkimpact(finger_x, finger_y, el2) {
var e1 = {
x: finger_x,
y: finger_y,
w: 10,
h: 10
}
var e2 = {
x: el2.x,
y: el2.y,
w: el2.width,
h: el2.height
}
var px, py;
px = e1.x <= e2.x ? e2.x : e1.x;
py = e1.y <= e2.y ? e2.y : e1.y;
if (px >= e1.x && px <= e1.x + e1.w && py >= e1.y && py <= e1.y + e1.h && px >= e2.x && px <= e2.x + e2.w && py >= e2.y && py <= e2.y + e2.h) {
return true;
} else {
return false;
}
}
function setnpccar() {
var carnpc1 = Object.create(Car);
var deshu = (Math.random () * 10) * (300/10);
carnpc1.x = deshu;
carnpc1.y = 0-80;
carnpc1.img = new Image();
switch (Math.floor(Math.random() * 5))
{
case 0:
carnpc1.img.src = "img/car2.png";
break;
case 1:
carnpc1.img.src = "img/car3.png";
break;
case 2:
carnpc1.img.src = "img/car4.png";
break;
case 3:
carnpc1.img.src = "img/car5.png";
break;
case 4:
carnpc1.img.src = "img/car6.png";
break;
}
carnpc1.width = 40;
carnpc1.height = 80;
npccars.push(carnpc1);
if (npccars.length > 0)
{
for (var i = 0; i < npccars.length; i++) {
npccars[i].y += 5;
if(npccars[i].y>540)
{
npccars[i].y=-80;
npccars.pop ();
}
}
}
}
</script>
</head>
<body onLoad="init();">
<canvas id="canvas" width="300" height="540">
</canvas>
</body>
</html>