上一话完成了拖拽移动功能，现在是时候让NPC车辆自动出现了
前几话，咱们有几张车子的图片还没用到，这话使用它们吧
首先定义一个数组变量，用于存放大量的NPC车子队伍
var npccars; npccars = new Array();
然后在animate()方法中里面添加一个setnpccar()方法用来自动增加NPC车
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 ();
}
}
}
}
解释：var carnpc1 = Object.create(Car); 代表新定义一个变量，并把它实例化为Car类，也就是生成一辆新车
var deshu = (Math.random() * 10) * (300 / 10); 代表根据屏幕的宽随机生成屏幕宽除以10再乘以随机1到10系数的X坐标，我们这里的屏幕宽为300，可以修改为自己需要的屏幕宽度；这样就会根据屏幕宽随机生成X坐标
carnpc1.x = deshu; 代表把上面的X坐标值赋值给新车
carnpc1.y = 0-80; 代表把0减去车子的高度的Y坐标赋值给新车
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;
}
代表用switch 条件选择 Math.floor(Math.random() * 5) 的得数，也就是随机生成0-4的数字，并根据得出数字做如果为0作case 0的处理（把新车的图片路径赋值为“img/car2.png”）， 如果为1作case 1的处理（把新车的图片路径赋值为“img/car3.png”），如果为2作case 2的处理（把新车的图片路径赋值为“img/car4.png”），如果为3作case 3的处理（把新车的图片路径赋值为“img/car5.png”），如果为4作case 4的处理（把新车的图片路径赋值为“img/car6.png”）
carnpc1.width = 40; //代表把新车的宽度赋值为40
carnpc1.height = 80; //代表把新车的高度赋值为80
npccars.push(carnpc1); //代表把新车对象放进定义的NPC车子数组里，便于保存
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 ();
}
}
}
解释：if (npccars.length > 0) 当npc车子数组的长度大于0的时候做下面处理
for (var i = 0; i < npccars.length; i++) {} 用for循环巡视NPC车子数组中的每一辆车子
并且把每一辆车子的Y坐标加上5 npccars[i].y += 5;
如果每一辆车子中，有车子的y坐标已经大于屏幕的高度540，把这辆车子的y坐标设为负80 npccars[i].y=-80;
并且删除NPC车辆数组里面的最后一个元素 npccars.pop ();
由于在animate()方法里面，setnpccar()方法也会同样不断执行，NPC车子就会大量出现在我们的屏幕中，并且向下移动
最后只需要在animate()方法里面根据NPC车子数组的总长度，画出所有NPC车子
- 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);
- }
- }
很容易想象，这样密集的NPC车，咱们的主角车肯定被辗轧，死定了，，，，
而且图上面显示的NPC车子还互相辗轧对方，看起来很不现实，车子怎么能互相辗轧呢，所以我们下一话来优化NPC的出现，，并且来实现NPC车对主角车的碰撞检测
完整代码
赛车游戏
