Collision

by anzen516

HTML

<title>Collision Game</title>
<link rel="stylesheet" href="css/collision.css" type="text/css" />
<body>
    <div id="game">
        <canvas width="400" height="400" id="canvas"></canvas>
    </div>
    <footer></footer>
    <script src="js/collision.js" type="text/javascript"></script>
</body>

CSS

body{
	background: #efefef;
}
#game{
	width: 400px;
	height:400px;
	margin: 0px auto 0px auto;
}
#canvas{
	width: 400px;
	height: 400px;
	border: 1px solid #000;
	background: #fff;
	position: relative;	
	float: right;
}

JavaScript

function square(number) {
    return number * number;
}

function detect_collision() {
    // Detect collisions between the balls
    for (i = 0; i < sprites.length; i++) {
        for (j = i + 1; j < sprites.length; j++) {
            ri = sprites[i];
            rj = sprites[j];
            if (ball_dist(ri, rj) < ri.w + 10) {
                if (i == 0 && window.gamestate == "started") {
                    window.gamestate = "gameover";
                    window.gravity = 0.05;
                } else if (window.gamestate == "started") {
                    // Resolve collisions on detection
                    resolve_colliding(ri, rj);
                } else if (window.gamestate == "gameover") {
                    resolve_colliding(ri, rj);
                }
            }
        }
    }
}

function moveRed() {
    /* Assign new coordinated to the red balls
     *
     * Starts when the timer goes off
     *
     * Check if any of the balls are out of the canvas
     * If yes, reassign them to new bounced coordinates
     */

    if (window.gamestate != "started") {
        return;
    }

    for (i = 1; i < sprites.length; i++) {
        rball = sprites[i];
        x = rball.cx() + rball.vx * rball.sp;
        y = rball.cy() + rball.vy * rball.sp;
        right = (rball.w / 2) + x;
        left = x - (rball.w / 2);
        ytop = y - (rball.h / 2);
        bottom = y + (rball.h / 2);

        if (right > canvas.width) {
            diff = right - canvas.width;
            rball.vx *= -1;
            x -= diff;
        } else if (left < 0) {
            diff = 0 - left;
            rball.vx *= -1;
            x += diff;
        } else if (bottom > canvas.height) {
            diff = bottom - canvas.height;
            rball.vy *= -1;
            y -= diff;
        } else if (ytop < 0) {
            diff = 0 - ytop;
            rball.vy *= -1;
            y += diff;
        }
        rball.setx(x);
        rball.sety(y);
    }
   ...