Javascript Spiel und ein paar Fragen

[Skriptum]

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:

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

[vinnce]

- 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.

- 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.

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

[Skriptum]

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.

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.

[vinnce]

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:

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.

[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

[Skriptum]

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.