Basic Breakout Example HTML5

var canvas = document.createElement('canvas');
var wid = 400;
var hei = 400;
canvas.width = wid;
canvas.height = hei;
var ctx = canvas.getContext("2d");
document.body.appendChild(canvas);

var pressing_left = false;
var pressing_right = false;

var objects = [];
var blocks = [];
var paddle = new Paddle(canvas.width/2 - 35, canvas.height - canvas.height/8);
var ball = new Ball(canvas.width/2, canvas.height/2);
objects.push(paddle);
objects.push(ball);

var blocks_x = 8;
var blocks_y = 4;
generate_blocks(blocks_x, blocks_y);

window.addEventListener('keydown', function(event) {
    switch(event.keyCode) {
        case 37:
            pressing_left = true;
        break;

        case 39:
            pressing_right = true;
        break;
    }
});

window.addEventListener('keyup', function(event) {
    switch(event.keyCode) {
        case 37:
            pressing_left = false;
        break;

        case 39:
            pressing_right = false;
        break;
    }
});

function generate_blocks(x_count, y_count) {
    var cur_ind = 2;
    var block_offset = 3;
    var block_x_count = x_count;
    var block_y_count = y_count;
    var total_width = (40+block_offset)*block_x_count;
    var block_x = canvas.width/2 - total_width/2;
    var block_y = 35;
    for(var i = 0; i < block_y_count; i++) {
        for(var k = 0; k < block_x_count; k++) {
            var block = new Block(block_x, block_y, cur_ind);
            blocks.push(block);
            block_x += block.width + block_offset;

            cur_ind++;
        }
        block_x = canvas.width/2 - total_width/2;
        block_y += 20 + block_offset;
    }
}

function Block(xx, yy, index) {
    this.x = xx;
    this.y = yy;
    this.width = 40;
    this.height = 20;
    this.ind = index;

    this.update = function() {

    }

    this.draw = function() {
        ctx.fillStyle = "#FFFFFF";
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
}

function Ball(xx, yy) {
    this.x = xx;
    this.y = yy;
    this.x_spd = Math.floor(Math.random() * (4 - (-4))) + (-4);
    this.y_spd = 3;
    this.width = 8;
    this.height = 8;

    this.update = function() {

        this.y += this.y_spd;

        var cpx_left = this.x > paddle.x && this.x < paddle.x + paddle.width;
        var cpx_center = this.x+this.width/2 > paddle.x && this.x+this.width/2 < paddle.x + paddle.width;
        var cpx_right = this.x+this.width > paddle.x && this.x+this.width < paddle.x+paddle.width;

        var cpy_up = this.y > paddle.y && this.y < paddle.y + paddle.height;
        var cpy_center = this.y+this.height/2 > paddle.y && this.y+this.height/2 < paddle.y + paddle.height;
        var cpy_down = this.y+this.height > paddle.y && this.y+this.height < paddle.y + paddle.height;

        var collision_x = cpx_left || cpx_center || cpx_right;
        var collision_y = cpy_up || cpy_center || cpy_down;

        if(collision_x && collision_y) {
                this.y_spd += 0.5;
                this.y_spd = -this.y_spd;
                this.x_spd = ((this.x+this.width/2) - (paddle.x+paddle.width/2)) / 16;
                this.y += this.y_spd;
            }
        else
        {
            this.x += this.x_spd;

            cpx_left = this.x > paddle.x && this.x < paddle.x + paddle.width;
            cpx_center = this.x+this.width/2 > paddle.x && this.x+this.width/2 < paddle.x + paddle.width;
            cpx_right = this.x+this.width > paddle.x && this.x+this.width < paddle.x+paddle.width;

            cpy_up = this.y > paddle.y && this.y < paddle.y + paddle.height;
            cpy_center = this.y+this.height/2 > paddle.y && this.y+this.height/2 < paddle.y + paddle.height;
            cpy_down = this.y+this.height > paddle.y && this.y+this.height < paddle.y + paddle.height;

            collision_x = cpx_left || cpx_center || cpx_right;
            collision_y = cpy_up || cpy_center || cpy_down;

            if(collision_x && collision_y) {
                console.log("x collision with paddle");
                this.x_spd = -this.x_spd;
                this.x += this.x_spd;
            }
        }

        var index_destroy = [];
        for(var i = 0; i < blocks.length; i++)
        {
            var block = blocks[i];
            var cpx_left = this.x > block.x && this.x < block.x + block.width;
            var cpx_center = this.x+this.width/2 > block.x && this.x+this.width/2 < block.x + block.width;
            var cpx_right = this.x+this.width > block.x && this.x+this.width < block.x+block.width;

            var cpy_up = this.y > block.y && this.y < block.y + block.height;
            var cpy_center = this.y+this.height/2 > block.y && this.y+this.height/2 < block.y + block.height;
            var cpy_down = this.y+this.height > block.y && this.y+this.height < block.y + block.height;

            collision_x = cpx_left || cpx_center || cpx_right;
            collision_y = cpy_up || cpy_center || cpy_down;

            if(collision_x && collision_y) {
                this.y_spd = -this.y_spd;
                //this.x_spd = -this.x_spd;
                index_destroy.push(i);
            }
        }
        for(var i = 0; i < index_destroy.length; i++) {
            blocks.splice(index_destroy[i], 1);
        }


        if(this.x < 0)
        {
            this.x_spd -= 0.35;
            this.x_spd = -this.x_spd;
        }
        else if(this.x > canvas.width - this.width)
        {
            this.x_spd += 0.35;
            this.x_spd = -this.x_spd;
        }

        if(this.y < 0)
            this.y_spd = -this.y_spd;
        else if(this.y > canvas.height) {
            this.x = canvas.width/2;
            this.y = canvas.height/2;
            this.x_spd = Math.floor(Math.random() * (4 - (-4))) + (-4);
            this.y_spd = 3;
        }
    }

    this.draw = function() {
        ctx.fillStyle = "#FFFFFF";
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
}

function Paddle(xx, yy) {
    this.x = xx;
    this.y = yy;
    this.spd = 8;
    this.width = 70;
    this.height = 8;

    this.update = function() {
        var dir = -pressing_left + pressing_right;
        var move_x = dir * this.spd;
        this.x += move_x;

        if(this.x < 0)
            this.x = 0;
        else if(this.x > canvas.width - this.width)
            this.x = canvas.width - this.width;
    }

    this.draw = function() {
        ctx.fillStyle = "#FFFFFF";
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
}

setInterval(gameloop, (1/60) * 1000);

function gameloop() {
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    for(var i = 0; i < objects.length; i++) {
        objects[i].update();
    }

    for(var i = 0; i < objects.length; i++) {
        objects[i].draw();
    }
    for(var i = 0; i < blocks.length; i++) {
        blocks[i].draw();
    }
    if(blocks.length <= 0) {
        generate_blocks(blocks_x, blocks_y);
    }
}