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

Have you look at this post http://stackoverflow.com/questions/21089959/detecting-collision-of-rectangle-with-circle? — Salvador Rubio Martinez
– Salvador Rubio Martinez, Commented Jul 8, 2016 at 9:40

Bjornir · Accepted Answer · 2016-07-08 09:29:03Z

0

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.

answered Jul 8, 2016 at 9:29

Bjornir

431 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pi guy · Accepted Answer · 2016-08-21 00:31:38Z

0

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.

answered Aug 21, 2016 at 0:31

pi guy

901 gold badge3 silver badges13 bronze badges

Collectives™ on Stack Overflow

Collision detection between circle and rectangle in Javascript game?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related