Kleiner JavaScript Kurs

Spiel "Vogel Foto"

Ziel des Spiels ist es, vorbeifliegende Vögel zu fotografieren (mit der Maus anklicken) und nicht nur den Himmel oder die Landschaft auf dem Bild zu haben.
Vogelfoto Sreenshot
Für das Spiel benötigen wir eine html - Seite mit einem Canvas Element: 

<!DOCTYPE html>
<html lang="de">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>
	<body>
		<canvas id="myCanvas" width="800" height="600" style="border:2px solid #000000;">
		</canvas>
		<script>
			// hier programmieren wir
		</script>
	</body>
</html>

Im Programm (Script) legen wir zunächst das Objekt für die Canvas (Zeichenfläche: var canvas) an und erzeugen dann einen "Zeichenstift" (var ctx). Außerdem holen wir uns die Breite und Höhe des Canvas Elements in die Variablen "breite" und "hoehe".

<script>
    //Canvas als Zeichenfläche festlegen (Variable canvas und ctx);
     var canvas = document.getElementById("myCanvas");
     var ctx = canvas.getContext("2d");
     //Breite der Zeichenfläche;
     var breite = canvas.width;
     //Höhe der Zeichenfläche;
     var hoehe = canvas.height;
</script>

Im nächsten Schritt zeigen wir die Bilder für den Hintergrund und den Vogel (2 Bilder für eine spätere "Animation") im Canvas an:

 var vogel1 = new Image();
 vogel1.src = "images/huhn_0.gif";
 var vogel2 = new Image();
 vogel2.src = "images/huhn_1.gif";
 var hintergrund = new Image();
 hintergrund.src = "images/winter.jpg";
 hintergrund.onload = function() {
      ctx.drawImage(hintergrund, 0, 0);
      ctx.drawImage(vogel1, 200, 100)
  }

Zunächst werden die 3 Image Objekte angelegt ( = new Image() ) und dann die Bilder geladen. Nach dem Laden des größten Bildes (hintergrund.onload = ) werden die Bilder ins Canvas gezeichnet ( ctx.drawImage() )
Noch ist das alles sehr statisch. Damit der Vogel sich bewegt, müssen wir in kurzen Zeitabständen
  • die Canvas löschen (mit einem Rechteck füllen) 
    ctx.rect(0,0,breite,hoehe);
  • das Hintergrundbild zeichnen
    ctx.drawImage(hintergrund, 0, 0);
  • den Vogel zeichnen (an die Position x,y, die sich dann für das nächste Zeichnen verändern muss)
    ctx.drawImage(vogel1, x, y);
    x = x + 5;
    y = y + Math.floor(Math.random()*10) - 10/2;
    Achtung: die Variablen x und y müssen im Programmkopf auf eine Anfangsprosition gesetzt werden z.B. var x = 0; var y = 150;
Wir schreiben die o.a. Programmzeilen in eine Funktion gameLoop() ("Spielschleife"), die wir mit window.setInterval(gameLoop, 100); alle 100ms starten.
So sieht unser Script jetzt aus:

<script>
    //Canvas als Zeichenfläche festlegen (Variable canvas und ctx);
     var canvas = document.getElementById("myCanvas");
     canvas.addEventListener("click", onMausClick);
     var ctx = canvas.getContext("2d");
     //Breite der Zeichenfläche;
     var breite = canvas.width;
     //Höhe der Zeichenfläche;
     var hoehe = canvas.height;
     var vogel1 = new Image();
     vogel1.src = "images/huhn_0.gif";
     var vogel2 = new Image();
     vogel2.src = "images/huhn_1.gif";
     var x = 0;
     var y = 150;
     var hintergrund = new Image();
     hintergrund.src = "images/winter.jpg";
     hintergrund.onload = function() {
          myInterval = window.setInterval(gameLoop, 100);
      }
     function gameLoop(){
        ctx.rect(0,0,breite,hoehe);
        ctx.drawImage(hintergrund, 0, 0);
        ctx.drawImage(vogel1, x, y)
        x = x + 5;
        y = y + Math.floor(Math.random()*10) - 10/2;  
     }
</script>

Um die Animation des Vogels schöner zu machen, kann man abwechselnd vogel1 und vogel2 anzeigen


Als nächstes wollen wir den Vogel mit der Maus fotografieren (anklicken). Dazu richten wir ein "click - Event" ein.

canvas.addEventListener("click", onMausClick);
function onMausClick(e){
  xm = e.offsetX;
  ym = e.offsetY;
  alert("x=" + xm + " y=" + ym);

Immer, wenn mit der Maus auf die Canvas geklickt wird, wird die Funktion "onMausClick" gestartet und das Event "e" übergeben. Mit e.offsetX und e.offsetY kann man die x und y Position der angeklickten Stelle bekommen und darauf reagieren. Wir geben zum Testen x und y mit alert aus. In der Funktion onMausClick kann man alles programmieren, was passieren soll, wenn beim Klick der Vogel getroffen wird (1 Punkt) und was passiert, wenn wir danebenklicken (z.B. Punkt-Abzug).
Zum Anzeigen von Text und Zahlen auf dem Canvas (Punktestand, Level, ...) verwendet man die Funktion
ctx.fillText(text, xPos, yPos);

Schriftart und Schriftgröße stellt man (einmalig am Anfang des Scripts) ein:
ctx.font = "30px Arial";


Ein schöner Effekt ist es auch, wenn man den Mauscursor (normalerweise ein Pfeil) ändert. Da funktioniert mit einem css - Style - Element: 
<style>
  canvas {
    cursor: crosshair; 
  }  
</style>

Die eingebauten Cursor findest du hier: mdn web docs
Noch ein Beispiel (mit einem Bild): 
<style>
  canvas {
    cursor: url("images/camera_black.png") 16 16, crosshair; 
  }  
</style>


Mit Soundeffekten wird das Spiel noch interessanter. Auf meinem Internetserver liegen die Sounddateien im Ordner sound. Folgende Sounds könnt ihr verwenden:
  • bird.wav, cat.wav, dog.wav, frog.wav
  • click.wav, explode.wav, laser.wav, treffer.wav, peng.wav, ping.wav
  • flute.wav, oboe.wav, boing.wav
// Sounddatei laden;
const click = new Audio("sound/click.wav");
// an der entsprechenden Stelle abspielen;
click.play();

So könnte es aussehen: Vogel Fotos