Javascript Spiel und ein paar Fragen

03/16/2015 18:47 Skriptum#1

Moin,

ich programmiere gerade ein kleines Ping Pong spiel.
Hierbei soll eine Box welche zuf�llig auftaucht als Extra dienen.
Es funktioniert auch alles an sich gut.
Aber bei einer Sache komme ich irgendwie nicht weiter.
Die Kollision mit dem Ball klappt, aber ich wei� nicht wie ich die Box wieder verschwinden/l�schen kann.

Ich habe 2 Fragen:

- Wie kann ich bei einer Kollision die Boxen verschwinden lassen (Kollisionsmodell klappt bereits)
- Bis jetzt wird das Bild, dass auf die Box "gemalt" wird aus der Website entnommen.
Wie kriege ich das mit einer lokalen Bilddatei aus einem Ordner hin?

Code :::

Ich wei� der Code ist noch ziemlich gammelig, aber das ist bis jetzt nur zu Testzwecken.
Hier ein paar Auschnitte aus dem Code:

Code:

function Game() {
...
this.Bonusboxen = new Bonusboxen()
...
}

Game.prototype.draw = function() {
...
this.Bonusboxen.draw(this.context);
...  
};



function Bonusboxen(){
    this.x = Math.floor(Math.random() * (800 - 100 + 1)) +100;
    this.y = Math.floor(Math.random() * (200 - 100 + 1)) +100;
    this.width = 30;
    this.height = 30;
};

Bonusboxen.prototype.update = function()
{
    ..
};
 
Bonusboxen.prototype.draw = function(p)
{
    var c = document.getElementById("game");
	var ctx = c.getContext("2d");
	var img = document.getElementById("bbd");
	ctx.drawImage(img,this.x,this.y,this.width, this.height);

};

Schonmal danke f�r die Hilfe

03/16/2015 18:56 vinnce#2

Quote:

- Wie kann ich bei einer Kollision die Boxen verschwinden lassen (Kollisionsmodell klappt bereits)

Redest du von einem Programmiertechnischen Standpunkt oder von einem visuellen?
Kannst du wenn m�glich mal den kompletten Code posten? Dann kann man dir vielleicht besser helfen.

Quote:

- Bis jetzt wird das Bild, dass auf die Box "gemalt" wird aus der Website entnommen.
Wie kriege ich das mit einer lokalen Bilddatei aus einem Ordner hin?

Du musst jede Bilddatei vorladen bevor du sie innerhalb von Canvas verwenden kannst, und dannach
einfach das die Instanz von "Image" als ersten Parameter von drawImage verwenden.

Code:

var img = new Image();
img.src = './pfad/bild.png';
img.onload = function () {
  ctx.drawImage(img ...);
}

03/16/2015 19:02 Skriptum#3

Quote:
Originally Posted by vinnce
Redest du von einem Programmiertechnischen Standpunkt oder von einem visuellen?
Kannst du wenn m�glich mal den kompletten Code posten? Dann kann man dir vielleicht besser helfen.

Du musst jede Bilddatei vorladen bevor du sie innerhalb von Canvas verwenden kannst, und dannach
einfach das die Instanz von "Image" als ersten Parameter von drawImage verwenden.
Code:
var img = new Image();
img.src = './pfad/bild.png';
img.onload = function () {
  ctx.drawImage(img ...);
}

Ok, schonmal vielen Dank.

"Redest du von einem Programmiertechnischen Standpunkt oder von einem visuellen? " Sowohl als auch. Ich m�chte eigentlich nur dass die Box nach einer Kollision verschwindet und ich sie sp�ter wieder erscheinen lassen kann. Als Erkl�rung es ist eine Box die z.B. das Verhalten des Balles �ndern soll.

03/16/2015 19:47 vinnce#4

Deshalb hatte ich dich gebeten den kompletten Code zu posten weil es mich interessiert h�tte auf welche Art und wei�e du dein Spiel zeichnest. Die g�ngige Methode ist ja das man einen endlosen Loop hat welcher die aktuelle Szene bei jedem Tick neu zeichnet.

Wenn deine Bonusbox in zuf�lligen Intervallen auftauchen soll. w�rde ich das ungef�hr so l�sen:

Code:

function Game() {
  for (;;) this.draw();
}
 
Game.prototype.lastBonusBox = null;
Game.prototype.nextBonusBox = null;
Game.prototype.hasActiveBonusBox = false;
Game.prototype.bonusbox = null;

Game.prototype.activateBonusBox = function () {
  this.lastBonusBox = +new Date;
  this.hasActiveBonusBox = true;
  
  this.bonusbox = new Bonusbox;
};

Game.prototype.disableBonusBox = function () {
  this.hasActiveBonusBox = false;
  
  this.lastBonusBox = +new Date;
  this.nextBonusBox = +new Date + Math.floor((Math.random() * 10) + 1);
};

Game.prototype.draw = function () {
  if (+new Date > this.nextBonusBox) 
    this.activateBonusBox();
    
  if (this.hasActiveBonusBox === true)
    gamectx.draw(this.bonusbox.draw() ...);

    
  if (kollision)
    this.disableBonusBox()
};

Der Gedanke dabei ist ganz einfach, das du �ber die Funktionen "activateBonusBox" und "disableBonusBox" innerhalb deines Scripts entscheiden kannst wann du eine Bonusbox aktivieren, und wann deaktivieren m�chtest. Sobald die Bonusbox �ber "disableBonusBox" deaktiviert wird, wird sie im draw-loop nichtmehr ber�cksichtigt und von daher beim Zeichenprozess schlicht ignoriert. Au�erdem wird ein neuer Zeitstempel generiert wann die n�chste Box auftauchen soll (momentaner Zeitstempel + 1-10 sekunden).

Da dein Kollisionsmodell ja funktioniert, kannst du ja bereits feststellen wenn und wann der Ball mit einer deiner Bonusboxen kollidiert, sobald das passiert rufst du wieder die Funktion "disableBonusBox" auf.

Logischerweise ist das Beispielcode, soll nur zur Veranschaulichung dienen.

03/16/2015 20:24 Crossside#5

Es ist etwas Doof das du grade den Code postest der ziemlich wenig aussagt^^
Wenn du den ganzen Code gepostet h�ttest w�rden wir dir mehr helfen k�nnen.

Folgendes gebe ich dir mal als Tipp: Schaue dir mal das Axis-Aligned Bounding Box Modell an. Damit kannst du Collision Detections mit Boxen machen, nun k�nntest du so eine Box um deinen Ball herum packen (bei pong d�rfte das nicht gro� was ausmachen wenn es kein 100%iges rundes boundary is) und um deine "Schl�ger".
Nun checkst du ob eine Kollision vorhanden ist, und falls ja, ob du sie "erlauben" m�chtest (also ob du die bonus box kollision haben m�chtest oder nicht - falls nicht tust du einfach nichts + zeichnest die bonusbox nicht). Wenn dann eine Kollision mit einer Bonusbox erkannt wird einfach die Kollisionsabfrage f�r die Box ausschalten + die Box aufh�ren zu zeichnen (oder vorher noch ne h�bsche Animation zeichnen wo sie vllt explodiert , zerbricht o.�).

gr��e

03/16/2015 20:52 Skriptum#6

Quote:

Originally Posted by Crossside

Es ist etwas Doof das du grade den Code postest der ziemlich wenig aussagt^^
Wenn du den ganzen Code gepostet h�ttest w�rden wir dir mehr helfen k�nnen.

Folgendes gebe ich dir mal als Tipp: Schaue dir mal das Axis-Aligned Bounding Box Modell an. Damit kannst du Collision Detections mit Boxen machen, nun k�nntest du so eine Box um deinen Ball herum packen (bei pong d�rfte das nicht gro� was ausmachen wenn es kein 100%iges rundes boundary is) und um deine "Schl�ger".
Nun checkst du ob eine Kollision vorhanden ist, und falls ja, ob du sie "erlauben" m�chtest (also ob du die bonus box kollision haben m�chtest oder nicht - falls nicht tust du einfach nichts + zeichnest die bonusbox nicht). Wenn dann eine Kollision mit einer Bonusbox erkannt wird einfach die Kollisionsabfrage f�r die Box ausschalten + die Box aufh�ren zu zeichnen (oder vorher noch ne h�bsche Animation zeichnen wo sie vllt explodiert , zerbricht o.�).

gr��e

Vielen Dank euch beiden. Ich denke damit d�rfte ich es hinbekommen.