Collision detection between circle and rectangle in Javascript game?

Question

I'm creating a javascript game where I need a collision between the ball and rectangle to trigger a reset of the game. For now I just have an alert there for testing purposes. I'm having trouble getting the collision detection working.

This is what I've got so far but it isn't working

            function startGame() {
            keeper = new obstacle(40, 20, "#666", 130, 180);
            theBall = new component("#000", 80, 10);
            myGameArea.start();
        }

        var myGameArea = {
            canvas : document.createElement("canvas"),
            start : function() {
                this.canvas.width = 300;
                this.canvas.height = 250;
                this.context = this.canvas.getContext("2d");
                document.body.insertBefore(this.canvas, document.body.childNodes[0]);
                this.interval = setInterval(updateGameArea, 20);
                window.addEventListener('keydown', function(e) {
                    myGameArea.key = e.keyCode;
                })
                window.addEventListener('keyup', function(e) {
                    myGameArea.key = false;
                })
            },
            clear : function() {
                this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
            }
        }

        function component(color, x, y, type) {

            this.type = type;
            this.speed = 1.5;
            this.angle = 0;
            this.x = x;
            this.y = y;
            this.update = function() {
                ctx = myGameArea.context;
                ctx.save();
                ctx.translate(this.x, this.y);
                ctx.rotate(this.angle);
                ctx.beginPath();
                ctx.arc(this.x, this.y, 10, 0, 2 * Math.PI);
                ctx.fillStyle = color;
                ctx.fill();
                ctx.restore();
            }
            this.newPos = function() {
                this.x -= this.speed * Math.sin(this.angle);
                this.y += this.speed * Math.cos(this.angle);
            }
        }

        function obstacle(width, height, color, x, y) {
            this.width = width;
            this.height = height;
            this.speedX = 0;
            this.speedY = 0;
            this.x = x;
            this.y = y;
            this.update = function() {
                ctx = myGameArea.context;
                ctx.fillStyle = color;
                ctx.fillRect(this.x, this.y, this.width, this.height);
            }
            this.newPos = function() {
                this.x += this.speedX;
                this.y += this.speedY;
            }
        this.collideWith = function(theBall){
        var collide = true;
        var myTop =this.y;
        var theBallBottom = theBall.y + (theBall.radius)
        if (myTop < theBallBottom)
        {
        collide = false;
        }
        return collide;
        }
        }

        function updateGameArea() {
        if (keeper.crashWith(theBall)) {
                alert("Collision");
            } else {
                myGameArea.clear();
                theBall.newPos();
                theBall.update();
        keeper.speedX = 0;
        keeper.speedY = 0;
            if (myGameArea.key && myGameArea.key == 37) {keeper.speedX = -1; }
            if (myGameArea.key && myGameArea.key == 39) {keeper.speedX = 1; }
        keeper.newPos();
        keeper.update();
        }
        }

The game can be found here http://alexhollingsworth.co.uk/game.php

Answer 1

You named your method collideWith, but you are calling it crashWith in the update method. Plus this will only detect collision on y axis, but I assume this is intended.

Answer 2

I made an if statement that can detect collisions in JavaScript, here it is:

if circle x < rect x + circle width && circle x + rect width > rect x && circle y < rect y + circle height && rect height + circle y > rect y {

This works by putting the ball into an 'imaginary box', then senses if any of the edges of the 'imaginary box' come in contact with any of the edges of the rectangle. I hope this helped.