Spielfeld von Snake transparent darstellen

[Maddyy]

Hallo, ich arbeite gerade an einem Projekt für mein Studium.
HTML, CSS und JavaScript sind für mich noch relativ Neuland, aber da ich bereits in C++ und Java programmiert habe, kein großes Hinderniss meine Ideen auch in anderen Sprachen umzusetzen.

Bisher hatte ich noch keine so großen Probleme, dass ich sie nicht alle und/oder mittels Google lösen konnte.
Aber wie jeder Anfänger bin ich nun doch an einen Punkt angekommen, wo ich einfach nicht weiter komme.

Ich programmiere Snake. Hierzu habe ich mir ein Tutorial (Youtube) angesehen und anhand der Informationen dort den Code geschrieben. Den habe ich nun immer mehr an meine Anforderungen angepasst.
Da mein Programm für mein Unternehmen ist, darf ich den Code so an sich nicht rausgeben, da die Modifikationen nichts an der Funktionsweise des Spiels/Codes ändern, habe ich mal den Link zum Code geschickt, der von dem Youtuber stammt:

https://github.com/maxwihlborg/youtube-tutorials/blob/master/snake/index.html

Wenn ich das richtig verstanden habe, habe ich ein Canvas-Element, das ich in kleinere Quadrate unterteile, die jeweils eine ID bekommen, je nachdem, ob es das Spielfeld, das Futterelement oder ein Teil der Schlange ist.
Bitte korrigieren, wenn ich das falsch verstanden haben sollte.

Ich habe ein Hintergrundbild verwendet und möchte nun, dass nur der Rahmen des Spielfelds sichtbar ist und das Spielfeld "transparent" dargestellt wird, so dass man den Hintergrund während des Spielens immer sehen kann.
Leider kann ich nicht schreiben:

case EMPTY:
ctx.fillStyle = "Code für transparent";

Gibt es denn sonst eine Möglichkeit, wie ich das realisieren kann?

Würde mich sehr freuen, wenn mir da jemand hilft.

Viele Grüße Maddyy

[henman]

Servus Maddyy,

Gibt es denn sonst eine Möglichkeit, wie ich das realisieren kann?

Es gibt die Methode ctx.clearRect(), mit der du eine rechteckige Fläche im Canvas leeren kannst.

ciao

[Maddyy]

Vielen Dank für die schnelle Antwort henman.

Das Spielfeld wird jetzt zwar transparent angezeigt, aber ich sehe nicht das Futterelement und auch nicht die Schlange.
Oder wende ich es falsch an?

for (var x=0; x < grid.width; x++) {  
for (var y=0; y < grid.height; y++) {  
switch (grid.get(x, y)) {  
case EMPTY: //Leere Zellen  
ctx.clearRect();  
break;  
case SNAKE: //Schlangenteile  
ctx.fillStyle = "#0ff";  
break;  
case FRUIT: //Futter  
ctx.fillStyle = "#f00";  
break;  
}  
ctx.fillRect(x*tw, y*th, tw, th); //Zeichnet ein Rechteck  
}  
}  

[henman]

Servus Maddyy,

Das Spielfeld wird jetzt zwar transparent angezeigt, aber ich sehe nicht das Futterelement und auch nicht die Schlange.
Oder wende ich es falsch an?

Ich selbst benutze diese Methode, um am "Anfang des Frames" das komplette Canvas zu leeren. Danach werden alle Elemente neu gezeichnet. Prüfe doch, ob bei dir die Leerung erfolgt, bevor oder nachdem Schlange und Futter gezeichnet sind.

ciao

[Maddyy]

Aaaah, jetzt verstehe ich es schon besser, wie das gemeint ist. Es klappt auch schon halbwegs.

Vielen Dank! :)

[JürgenB]

Hallo,

for (var x=0; x < grid.width; x++) {  
for (var y=0; y < grid.height; y++) {  
switch (grid.get(x, y)) {  
case EMPTY: //Leere Zellen  
ctx.clearRect(); 

wird hier alles gelöscht?

break;  
case SNAKE: //Schlangenteile  
ctx.fillStyle = "#0ff";  
break;  
case FRUIT: //Futter  
ctx.fillStyle = "#f00";  
break;  
}  
ctx.fillRect(x*tw, y*th, tw, th); //Zeichnet ein Rechteck  

welcher fillStyle wird genommen, wenn weder SNAKE noch FRUIT?

}  
}  

Nur eine Idee: erst alles löschen, und dann nur da zeichnen, wo auch was ist, also

ctx.clearRect();  
for (var x=0; x < grid.width; x++) {  
  for (var y=0; y < grid.height; y++) {  
    switch (grid.get(x, y)) {  
      case SNAKE: //Schlangenteile  
        ctx.fillStyle = "#0ff";  
        ctx.fillRect(x*tw, y*th, tw, th); //Zeichnet ein Rechteck  
      break;  
      case FRUIT: //Futter  
        ctx.fillStyle = "#f00";  
        ctx.fillRect(x*tw, y*th, tw, th); //Zeichnet ein Rechteck  
      break;  
    }  
  }  
}  

Gruß Jürgen

[Maddyy]

Hallo Jürgen,

ich dachte, der Lösungsvorschlag von henman wäre so gemeint gewesen. Hatte es aber nur falsch verstanden.

Es gibt nur SNAKE, FRUIT und EMPTY. EMPTY zeichnet praktisch das Spielfeld. In meinem Fall soll es schwarz sein. Und nur die Stellen, an denen das Futterelement oder die Schlange sich befindet, sind anders gefärbt. Andere Zustände gibt es nicht.

Stimmt. Das könnte auch eine Möglichkeit sein. Und auch noch so ein einfacher Gedanke... Immer muss ich so kompliziert denken... -.-

Ich werde auf jeden Fall mal beide Lösungen nach gehen, also die von dir und die von henman. Dürfte eine gute Übung für mich sein. :)

Habe vielen Dank! :)

[Jörg Reinholz]

Moin!

Leider kann ich nicht schreiben:

case EMPTY:
ctx.fillStyle = "Code für transparent";

Gibt es denn sonst eine Möglichkeit, wie ich das realisieren kann?

http://stackoverflow.com/questions/2359537/how-to-change-the-opacity-alpha-transparency-of-an-element-in-a-canvas-elemen

also etwas wie

ctx.style.opacity = .4;
ctx.globalAlpha = 0.4;

oder, im css:

#deinCanvas {
 opacity = .4;
}

sollte "tun".

Jörg Reinholz

[Maddyy]

Hallo Jörg, diesen Ansatz hatte Google mir bereits ausgespunkt, allerdings habe ich Schwierigkeiten das in meinen Fall einzusetzen.

Dennoch vielen Dank für deine Hilfe! :)