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äuft</button>
....<script>
var context = document.getElementById('canvas').getContext('2d');
var treffer=0;

//Funktion zur synchronen Bildausgabe
var reqAniFra = (function(){
..return window.requestAnimationFrame ||
....window.webkitRequestAnimationFrame ||
....window.mozRequestAnimationFrame ||
....window.oRequestAnimationFrame ||
....window.msRequestAnimationFrame ||
....function(callback){
......setTimeout(callback, 1000 / 60);
....}
})();

var malen=function()
{
....//Hintergrund löschen
.. context.clearRect(0, 0, 500, 500);

.. ballgelb.zeichnen();

.. meinSchlaeger.zeichnen();

.. kollision();

//Hier ruft sich die Funktion automatisch immer wieder auf.
reqAniFra(malen);
}

//zuerst von Hand aufrufen
reqAniFra(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ä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>