Objektkollisionen1

Diese Beispiel verwendet die Objektkollision um festzustellen ob sich 2 Kreise berühren. Dazu werden umschließende Rechtecke verwendet die auch eingezeichnet werden.

 DEMO

 

<!DOCTYPE html>
<p>
    <canvas id="canvas" width="500" height="250" style="border:1px solid black"></canvas>
    <div id="trefferdiv"></div>
    <button id="mover" onclick="umschalten()">Ball l&auml;uft</button>
    <script>
var context = document.getElementById('canvas').getContext('2d');
var treffer=0;
 
 
 var malen=function()
{
    //Hintergrund löschen
   context.clearRect(0, 0, 500, 500);
 
   ballgelb.zeichnen();
 
   meinSchlaeger.zeichnen();
 
   kollision();
 
 window.requestAnimationFrame(malen);
}
 
window.requestAnimationFrame(malen);
 
 
 function urball(r,c,s)
 {
      //Selbstrefenzierung
      this.x=200;
      this.y=120;
      this.radius=r;
      this.steps=s;
      this.xrichtung="rechts";
      this.yrichtung = "unten";
      this.aktiv = true;
 
      //Klassenmethode
      this.zeichnen = function()
        {
           context.beginPath();
           context.fillStyle=c;
           context.arc(this.x,this.y,this.radius,0,400);
           context.fill();
           context.closePath();
          //Zur Verdeutlichung wird hier das umschließende Rechteck gezeichnet.
           context.strokeRect(this.x - r, this.y - r, r * 2, r * 2);
 
 
           if(this.x>500)this.xrichtung="links";
           if(this.x<0)this.xrichtung="rechts";
 
           if(this.y>250)this.yrichtung="oben";
           if(this.y<0)this.yrichtung="unten";
 
           if (this.aktiv)
           {
               if (this.xrichtung == "rechts") this.x += this.steps;
               else this.x -= this.steps;
 
               if (this.yrichtung == "unten") this.y += this.steps;
               else this.y -= this.steps;
           }
        }
 }
 
//Objektinstanziierung
var ballgelb=new urball(10,"#00f",5);
 
 
function schlaeger() {
    this.x = 20;
    this.y = 20;
    this.radius = 12;
 
    this.zeichnen = function () {
        this.x = mausx;
        this.y = mausy;
        context.beginPath();
        context.fillStyle = "#000";
        context.arc(this.x, this.y, this.radius, 0, 400);
        context.fill();
        context.closePath();
        //Zur Verdeutlichung wird hier das umschließende Rechteck gezeichnet.
        context.strokeRect(this.x - this.radius , this.y - this.radius , this.radius*2, this.radius*2);
    }
}
 
var meinSchlaeger=new schlaeger();
var mausx,mausy;
 
 
function kollision()
{
    //Weil der Kreis die x,y-Koordinate im Mittelpunkt hat werden diese hier verschoben.
    if (kollisionsErkennung(meinSchlaeger.x - meinSchlaeger.radius, meinSchlaeger.y - meinSchlaeger.radius, meinSchlaeger.radius * 2, meinSchlaeger.radius*2, ballgelb.x - 10, ballgelb.y - 10, 20, 20))
    {
            treffer++;
        document.getElementById("trefferdiv").innerHTML = "Treffer: " + treffer;
        if (ballgelb.xrichtung == "rechts") ballgelb.xrichtung = "links";
        else ballgelb.xrichtung = "rechts";
    }
}
 
function kollisionsErkennung(x1, y1, w1, h1, x2, y2, w2, h2) {
    var r = false;
   /* Wenn eine Kollision vorliegt müssen folgende Bedingungen erfüllt sein:
 
    Der untere Rand von ObjA muss größer oder gleich dem oberen Rand von ObjB sein
    Der obere Rand von ObjA muss kleiner oder gleich dem unteren Rand von ObjB sein
    Der linke Rand von ObjA muss kleiner oder gleich dem rechten Rand von ObjB sein
    Der rechte Rand von ObjA muss größer oder gleich dem linken Rand von ObjB sein
    */
     if (y1 + h1 >= y2 && y1 <= y2 + h2 && x1 <= x2 + w2 && x1 + w1 >= x2) r = true;
 
    return r;
}
 
 
function umschalten()
{
    if(ballgelb.aktiv==true)
    {
        mover.innerHTML = "Ball gestoppt";
        ballgelb.aktiv = false;
    }
    else
    {
        mover.innerHTML = "Ball l&auml;uft";
        ballgelb.aktiv = true;
    }
}
 
 
 
 
canvas.addEventListener('mousemove', function(evt){
        var mousePos = getMousePos(canvas, evt);
        mausx=mousePos.x;
        mausy=mousePos.y;
 
  }, false);
 
 
/* ~~~~~~~~~~~~~~~~~~~ Hauptteil ~~~~~~~~~~~~~~~~~~~~~ */
function getMousePos(canvas, evt){
    // get canvas position
    var obj = canvas;
    var top = 0;
    var left = 0;
    while (obj.tagName != 'BODY') {
        top += obj.offsetTop;
        left += obj.offsetLeft;
        obj = obj.offsetParent;
    }
 
    // return relative mouse position
    var mouseX = evt.clientX - left + window.pageXOffset;
    var mouseY = evt.clientY - top + window.pageYOffset;
    return {
        x: mouseX,
        y: mouseY
    };
}
    </script>