上一话完成了拖拽移动功能，现在是时候让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车对主角车的碰撞检测
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>赛车游戏</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>