小行星帆布游戏：分裂小行星

Question

我仍然在html5中用画布制作小行星游戏。一切都很顺利，但现在我陷入僵局。碰撞有效，但我不知道如何在射击后分裂小行星。

这是代码：

window.addEventListener('keydown',doKeyDown,true);
window.addEventListener('keyup',doKeyUp,true);
var canvas = document.querySelector('#pageCanvas');
var context = canvas.getContext('2d');
var angle = 0;
var H = /*500;*/window.innerHeight; //*0.75,
var	W = /*500;*/window.innerWidth; //*0.75;
canvas.width = W;
canvas.height = H;
var xc = W/2; //zeby bylo w centrum :v
var yc = H/2; //jw.
var x =  xc;
var y =  yc;
var dv = 0.2;
var dt = 1;
var vx = 0;
var vy = 0;
var fps = 30;
var maxVel = 5;
var maxVelLeft = -5;
var frict = 0.99;
var brakes = 0.90;
var keys = new Array();
var fire = false;
var points = 0;
var lives = 3;
var randomize = true;
//zamiennik do setintervala
var requestAnimationFrame = window.requestAnimationFrame || 
					window.mozRequestAnimationFrame || 
					window.webkitRequestAnimationFrame || 
					window.msRequestAnimationFrame;
var fps = 30;
var now;
var then = Date.now();
var interval = 1000/fps;
var delat;


//laser
var laserF = false;
var lasery = [];
var shootVel = 12;  //velocity of laser

//asteroids
var asteroidy = [];



	var newasteroid1 ={
			ax : ((Math.round(Math.random()*1000))%500),
			ay : ((Math.round(Math.random()*1000))%500),
			avx : 1*(Math.random() > 0.5 ? -1 : 1),
			avy : 1*(Math.random() > 0.5 ? -1 : 1),
			ar : 30,
			aangle : 3,
			colour : "gray"
		};
		asteroidy.push(newasteroid1);

	var newasteroid2 ={
			ax : ((Math.round(Math.random()*1000))%500),
			ay : ((Math.round(Math.random()*1000))%500),
			avx : 1*(Math.random() > 0.5 ? -1 : 1),
			avy : 1*(Math.random() > 0.5 ? -1 : 1),
			ar : 30,
			aangle : 2,
			colour : "gray"
		};
		asteroidy.push(newasteroid2);				
		
	var newasteroid3 ={
			ax : ((Math.round(Math.random()*1000))%500),
			ay : ((Math.round(Math.random()*1000))%500),
			avx : 1*(Math.random() > 0.5 ? -1 : 1),
			avy : 1*(Math.random() > 0.5 ? -1 : 1),
			ar : 30,
			aangle : 2,
			colour : "gray"
		};
		asteroidy.push(newasteroid3);
		
	var newasteroid4 ={
			ax : ((Math.round(Math.random()*1000))%500),
			ay : ((Math.round(Math.random()*1000))%500),
			avx : 1*(Math.random() > 0.5 ? -1 : 1),
			avy : 1*(Math.random() > 0.5 ? -1 : 1),
			ar : 30,
			aangle : 0,
			colour : "fuchsia"
		};
		asteroidy.push(newasteroid4);
	



function doKeyUp(evt){
	keys[evt.keyCode] = false;
	fire = false;
	if (laserF) {
		var	newlaser ={
			lx: x,
			ly: y,	
			//lw : 4,
			//lh : 4,
			lr : 2,
			lvx : Math.cos(convertToRadians(angle)),
			lvy : Math.sin(convertToRadians(angle))
			}
		lasery.push(newlaser);
		laserF = false;
	}
	
}

function doKeyDown(evt){
	keys[evt.keyCode] = true;
	
	if(40 in keys && keys[40]){
		if(randomize){
		x = (Math.round(Math.random()*1000))%W;
		y = (Math.round(Math.random()*1000))%H;
		vx = 0;
		vy = 0;
		randomize = false;
		setTimeout(function(){randomize = true;}, 2000);
		}
	}
	
	

}

function drawPoints(){
		context.save();
		context.setTransform(1,0,0,1,0,0);
		context.beginPath();
		context.fillText("Score: " + points, 50, 50);
		context.fillStyle = "#FFFFFF";
		context.fill();
		context.closePath();
		context.restore();
	}
	
function drawLives(){
		context.save();
		context.setTransform(1,0,0,1,0,0);
		context.beginPath();
		context.fillText(lives + " lives left", 150, 50);
		context.fillStyle = "#FFFFFF";
		context.fill();
		context.closePath();
		context.restore();
	}

function drawAsteroids(idx){
	var asteroid = asteroidy[idx];
	context.save();
	context.setTransform(1,0,0,1,0,0);
	context.rotate(0);
	context.translate(asteroid.ax, asteroid.ay);
	context.rotate(asteroid.aangle);
	context.translate(-25,-25);
	context.beginPath();
	context.fillText(asteroid.ax + " " + asteroid.ay, 0,50);
	context.arc(0, 0, asteroid.ar, 0, 2 * Math.PI, false);
	context.fillStyle = asteroid.colour;
	context.fill();
	context.closePath();
	/*beginPath();
	moveTo(0,0);
	lineTo()*/
	context.restore();
}

function moveAsteroids(idx){
	var asteroid = asteroidy[idx]
	asteroid.ax += asteroid.avx;
	asteroid.ay += asteroid.avy;
	asteroid.aangle += 0.009;
	if(asteroid.ax > W){
		asteroid.ax = 0 -25;
		}	
	else{
		if(asteroid.ax < -25){
			asteroid.ax = W;
		}
	}
	
	if(asteroid.ay > H){
		asteroid.ay = 0 -25;
	}
	else{
		if(asteroid.ay < -25){
			asteroid.ay = H;
		}
	}
}

function drawLaser(idx) {
	var laser = lasery[idx];
	context.save();
	context.translate(laser.lx,laser.ly);		
	context.fillStyle = "red";
	//context.fillText(laser.lx + " " + laser.ly,10,10);
	//context.fillRect(0,0,laser.lw,laser.lh);
	context.beginPath();
	context.arc(0, 0, laser.lr, 0, 2 * Math.PI, false);
	context.fillStyle = "red";
	context.fill();
	context.closePath();
	
	context.restore();
}

function moveLaser(idx) {
	var laser = lasery[idx];
	laser.lx += laser.lvx * shootVel;
	laser.ly += laser.lvy * shootVel;
	if (laser.lx > W || laser.lx < 0 || laser.ly > H || laser.ly < 0) {
		lasery.splice(idx, 1);
	}
}



//OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO
function ogienZdupy(){
		context.fillStyle = "red";
		context.beginPath();
		context.moveTo(-2,2);
		context.lineTo(2,10);
		context.lineTo(-2,18);
		context.lineTo(-25,10);
		context.lineTo(-2,2);
		context.strokeStyle = "red";
		context.stroke();
	}

function convertToRadians(degree) {
	return degree*(Math.PI/180);
}

function incrementAngle() {
	angle += 5;
	if(angle > 360){
		angle = 0;
		}
}

function decrementAngle(){
	angle -= 5;
	if(angle > 360){
		angle = 0;
		}
}
function xyVelocity(){
	vx += dv * Math.cos(convertToRadians(angle)); //* friction;
	vy += dv * Math.sin(convertToRadians(angle)); //* friction;
	if(vx > maxVel){
		vx = maxVel;
	}
	if(vy < maxVelLeft){
		vy = maxVelLeft;
	}
	
	if(vx < maxVelLeft){
		vx = maxVelLeft;
	}
	
	if(vy > maxVel){
		vy = maxVel;
	}
	
}

function shipMovement(){
	
	
	if(66 in keys && keys[66]){ //it's B
		vx = 0;
		vy = 0;
	}
	
	if(38 in keys && keys[38]){
		xyVelocity();
		fire = true;
	}
	
	if(37 in keys && keys[37]){
		decrementAngle();
	};
	if (39 in keys && keys[39]){
		incrementAngle();
	};
	if (32 in keys && keys[32]){
		laserF = true;
	};
	
}

function xyAndFriction(){
	
	x += vx * dt;
	y += vy * dt;
	
	vx *= frict;
	vy *= frict;
	
}

function outOfBorders(){
	
	if(x > W){
		x = x - W;
		}
	if(x< 0){
		x = W;
	}
	
	if(y > H){
		y = y - H;
	}
	
	if(y < 0){
		y = H;
	}
}

function blazeatron420(){  //the ship
	context.beginPath();
	context.moveTo(0,0);
	context.lineTo(20,10);
	context.lineTo(0,20);
	context.lineTo(7,10);
	context.lineTo(0,0);
	context.strokeStyle = "green";
	context.stroke();
}

function space(){
	context.fillStyle = "black";
	context.fillRect(0,0,W,H);
}
/*
function superLaserCollider(){
	for(var i in asteroidy){
		var ax = asteroidy[i].ax,
			ay = asteroidy[i].ay,
			ar = asteroidy[i].ar
			
		
	
	
		for(var j in lasery){
			var xl = lasery[j].lx,
				yl = lasery[j].ly,
				rl = lasery[j].lr
				}
				
				}
	/*var dx = Math.abs(ax - (xl+wl/2));
	var dy = Math.abs(ay - (yl+yl/2));
	
	if(dx > ar + wl){
		return (false);
	}
	if(dy > ar + hl){
		return (false);
	}
	if(dx <= wl){
		return (true);
	}
	if(dy <= hl){
		return (true);
	}
	var dx = dx - wl;
	var dy = dy - hl;
	return(dx * dx + dy * dy <= ar * ar);
	
	
	var dx = ax - xl;
	var dy = ay - yl;
	var distance = Math.sqrt(dx * dx + dy * dy); 
	if(xl > ax && yl > ax){
		console.log("kolizja");
	}
	
	
}
*/
function bigAsteroidExplosion(idx){
	var asteroid = asteroidy[idx];
	context.clearRect(asteroid.ax, asteroid.ay, 100, 100);

}

function superLaserCollider(){
		for(var i in asteroidy){
			var ax = asteroidy[i].ax,
				ay = asteroidy[i].ay,
				ar = asteroidy[i].ar;
				
			for(var j in lasery){
				var xl = lasery[j].lx,
					yl = lasery[j].ly,
					rl = lasery[j].lr;
				
				var dx = ax - xl;
				var dy = ay - yl;
				var distance = Math.sqrt(dx * dx + dy * dy); 
				if(distance < ar + rl){
					console.log("kabom");
					points = points + 100;
					//alert("BOOM");
					console.log(points);
				}
			}
		}
	}
		

	/*
					context.beginPath();
					context.fillText(points, 100, 100);
					context.fillStyle = "#FFFFFF";
					context.fill();
					context.closePath();
	*/
function drawEverything() {  
	shipMovement();
	xyAndFriction();
	outOfBorders();

	//context.save();
	//;
	
	space();
	context.save();
	context.translate(x,y);
	//context.translate(25,25);
	context.rotate(convertToRadians(angle));
	context.translate(-7,-10);
	
	if(fire){
		ogienZdupy();
	}
	
					
	context.fillStyle = "green";
	//context.fillText(vx + " ｋｍ／ｈ",50,50);
	/*context.fillText("dupa",-30,0);
	context.beginPath();
	context.moveTo(-20,5);
	context.lineTo(-5,10);
	context.strokeStyle = "green"; //KOLOR LINII ;_;
	context.stroke();*/
	
	if(asteroidy.length > 0 ){
	for (var tmp in asteroidy){
		drawAsteroids(tmp);
		moveAsteroids(tmp);
		
		}
	}
	//putAsteroids();
	blazeatron420();
	//shootAsteroid(idx);
	context.translate(-x+7,-y+10);
	drawPoints();				
	drawLives();
	context.restore();
	console.log(asteroidy.length);
	
	//superCollider();
	//for(var i = 0; i < asteroidy.length; i++)

	if(lasery.length > 0){

		for (var tmp in lasery) {
			
			drawLaser(tmp);
			moveLaser(tmp);
		}			
		
		
	}
					
	
	superLaserCollider();
	
	
	
}
	

//setInterval(drawEverything, 20);
function draw(){
	requestAnimationFrame(draw);
	now = Date.now();
	delta = now - then;
	if (delta > interval){
		then = now - (delta % interval);
	}
	
	drawEverything();
}

draw();

body{
margin:0;
padding:0;
overflow:hidden;
}

<body>
<canvas id="pageCanvas" style="display:block">
You do not have a canvas enabled browser. Please, stop using IE :P
</canvas>
</body>