Anstatt uns von irgendwelchen JS-Libraries zu bedienen, erstellen wir für die Kollision von Rechtecken, was die wichtigste Grundform für 2D Spiele ist, uns einfach selbst eine js - Datei, die diese Kollisionen berechnet.
<!DOCTYPE html>
<head>
</head>
<body>
<canvas id ="Game", width="800", height="600"></canvas>
<script>
var canvas = document.getElementById("Game");
var ctx = canvas.getContext("2d");
setInterval(update, 1000 / 60);
function update() {
ctx.fillStyle = "#000000";
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
</script>
</body>
</html>
Ok, dieser Code sollte euch bereits geläufig sein:
Er holt sich als erstes Zugriff auf das Canvas Element und dann auf den 2d Kontext, mit dem wir Objekte,
wie Rechtecke zeichnen können. Danach wird die Funktion update mit einer Framerate von 60 fps aufgerufen. Bei jedem neuen Frame wird der Bildschirm schwarz eingefärbt.
Als nächstes erstellen wir in einem externen Javascript Dokument ein Objekt, das ein Rechteck repräsentiert.
(Ich nenne die Datei Rectangle.js)
function Rectangle(x, y, width, height) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
}
Typischerweise wird ein Rechteck durch die Ecke oben links angegeben (x, y) und durch eine Höhe und Breite. Ich persönlich erstelle mir drei Funktionen:
- intersects: nimmt ein zweites Rechteck als Parameter und gibt als Boolean zurück, ob eine Kollision stattgefunden hat
- containsPoint: nimmt einen Punkt (angegeben durch x und y) und überprüft, ob dieser Punkt sich im Rechteck befindet (Beispiel: Ist die Maus gerade über einen Button)
- draw: nimmt als Parameter eine Farbe an und zeichnet das Rechteck entsprechend mithilfe des 2d-Kontext
Die ganze Klasse sieht dann folgendermaßen aus:
function Rectangle(x, y, w, h) {
this.x = x;
this.y = y;
this.w= w;
this.h= h;
this.containsPoint = function (px, py) {
return (px > this.x && px < (this.x + this.w)
&& py > this.y && py < (this.y + this.h));
};
this.intersects = function (r) {
return ((r.x + r.w) > this.x && (r.x < (this.x + this.w)) && ((r.y + r.h) > this.y) && (r.y < (this.y + this.h)));
};
this.draw = function (c) {
ctx.fillStyle = c;
ctx.fillRect(this.x, this.y, this.w, this.h);
};
}
Die Funktionen sind eigentlich selbsterklärend, da sie nur mit den < und > Operatoren arbeiten. Durch Überlegen und ein Blatt Papier kann man sich die Funktionsweise noch klar machen.
Zum Schluss werde ich noch die Einbindung und Anwendung zeigen.
<!DOCTYPE html>
<head>
</head>
<body>
<canvas id ="Game", width="800", height="600"></canvas>
<script src="Rectangle.js"></script>
<script>
var canvas = document.getElementById("Game");
var ctx = canvas.getContext("2d");
var rechteck1 = new Rectangle(0, 0, 20, 20);
var rechteck2 = new Rectangle(40, 0, 20, 20);
setInterval(update, 1000 / 60);
function update() {
ctx.fillStyle = "#000000";
ctx.fillRect(0, 0, canvas.width, canvas.height);
rechteck1.x++;
rechteck1.draw("#00ff00");
rechteck2.draw("#0000ff");
if (rechteck1.intersects(rechteck2)) {
ctx.fillStyle = "#ff0000";
ctx.fillText("Intersection", 400, 400);
}
}
</script>
</body>
</html>
Ok, ich hoffe ich konnte euch weiter helfen!
Das nächste mal mache ich mit Kreis-Kollision weiter ;D
Keine Kommentare:
Kommentar veröffentlichen