Balloon Game

Catch the correct balloon before it hits the ground

HTML

<section>
    <article>
        <div id="logo">
            <img src="http://s18.postimg.org/5plqdice1/Logo_Comic.png" id="Logo" />
        </div>
        <br></br>
        <div id="canvas">
            <canvas id="c" style="border:5px solid orange" height="500" width="500"></canvas>
            <p id="p1"></p>
        </div>
    </article>
</section>

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    background-color: silver;
    background-image: linear-gradient(335deg, #d35400 23px, transparent 23px), linear-gradient(155deg, #e67e22 23px, transparent 23px), linear-gradient(335deg, #c0392b 23px, transparent 23px), linear-gradient(155deg, #e74c3c 23px, transparent 23px);
    background-size: 58px 58px;
    background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
}
body {
    width:925px;
    height:auto;
    background-color:#fff;
    margin-left:auto;
    margin-right:auto;
}
#canvas {
    margin-left:205px;
}
section {
    width:auto;
    height:100%;
    background-color:white;
    margin-left:auto;
    margin-right:auto;
}
article {
    width:100x;
    height:100%;
    background-color:#81CFE0;
    margin-left:auto;
    margin-right:auto;
}
#logo {
    width:500px;
    height:250px;
    margin-left:auto;
    margin-right:auto;
}
#comingsoon {
    margin-top:200px;
    margin-left:auto;
    margin-right:auto;
    width:370px;
}
#c {
    background-color: black;
}

JavaScript

var game = create_game();
game.init();

function create_game() {
    debugger;
    var level = 1;
    var apples_per_level = 1;
    var min_speed_per_level = 1;
    var max_speed_per_level = 2;
    var last_apple_time = 0;
    var next_apple_time = 0;
    var width = 500;
    var height = 500;
    var delay = 1000;
    var item_width = 50;
    var item_height = 50;
    var total_apples = 0;
    var apple_img = new Image();
    var apple_w = 50;
    var apple_h = 50;
    var basket_img = new Image();
    var c, ctx;

    var apples = [];
    var basket = {
        x: 100,
        y: 100,
        score: 0
    };

    function init() {
        apple_img.src = "http://s15.postimg.org/3nwjmzsiv/apple.png";
        basket_img.src = "http://s18.postimg.org/h0oe1vj91/basket.png";

        level = 1;
        total_apples = 0;
        apples = [];

        c = document.getElementById("c");
        ctx = c.getContext("2d");
        ctx.fillStyle = "#000";
        ctx.fillRect(0, 0, 500, 500);

        c.addEventListener("mousemove", function (e) {
            //moving over the canvas.
            var bounding_box = c.getBoundingClientRect();
            basket.x = (e.clientX - bounding_box.left) * (c.width / bounding_box.width) - basket_img.width / 2;
            basket.y = (e.clientY - bounding_box.top) * (c.height / bounding_box.height) - basket_img.height / 2;
        }, false);

        setupApples();
        requestAnimationFrame(tick);
    }

    function setupApples() {
        var max_apples = level * apples_per_level;
        while (apples.length < max_apples) {
            initApple(apples.length);
        }
    }

    function initApple(index) {
        var max_speed = max_speed_per_level * level;
        var min_speed = min_speed_per_level * level;
        apples[index] = {
            x: Math.round(Math.random() * (width - 2 * apple_w)) + apple_w,
            y: -apple_h,
            v: Math.round(Math.random() * (max_speed - min_speed)) + min_speed,
          ...