Asteroids Canvas Game: Splitting the asteroid - html

Question

I'm still making Asteroids game in canvas in html5. Everything were going good, but now I'm in deadlock. Collision works, but I have no idea how to split an asteroid after shooting in it.
Here is code:
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>