Kollisionserkennung zwischen Kreis und Rechteck in Javascript Spiel?

Question

Ich erstelle ein Javascript-Spiel, wo ich eine Kollision zwischen dem Ball und dem Rechteck brauche, um einen Reset des Spiels auszulösen. Momentan habe ich nur eine Warnung für Testzwecke. Ich habe Probleme mit der Kollisionserkennung.

Das ist, was ich so weit gekommen, aber es funktioniert nicht

  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(); 
     } 
     } 

Das Spiel hier http://alexhollingsworth.co.uk/game.php

Answer 1

Sie Ihre Methode collideWith Namen gefunden werden kann, aber Sie nennen es crashWith in die Aktualisierungsmethode Außerdem erkennt dies nur die Kollision auf der Y-Achse, aber ich nehme an, dies ist beabsichtigt.

Answer 2

ich eine gemacht if-Anweisung, die Kollisionen in JavaScript erkennen kann, hier ist es:

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 { 

Dies funktioniert durch die Kugel in einer ‚imaginären Box‘ setzen, spürt dann, wenn eine der Kanten des ' imaginäre Box 'in Kontakt mit einer der Kanten des Rechtecks ​​kommen. Ich hoffe, das hat geholfen.