Kleiner JavaScript Kurs

Autorennen

In diesem Beispiel sehen wir uns an, wie man Bilder (png, gif, jpg) auf einem Canvas abbildet und animiert (bewegt).
Zunächst benötigen wir wieder ein Canvas. Starten wollen wir das Spiel diesmal durch Klick auf den Canvas (onClick= ...)

<body>
	<canvas id="myCanvas" onClick="rennenStarten();" width="500" height="600"  
          style="border:2px solid #000000; background-color: lightgray;"></canvas><br>  
</body>

Im Script zunächst wieder die Vorbereitungen:
<script>
    //Canvas als Zeichenfläche festlegen (Variable canvas und ctx);
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var breite = canvas.width;
    var hoehe = canvas.height;
</script>
Um ein Bild (hier car0.png) auf einem Canvas anzuzeigen muß es erst geladen und einer Image()-Variablen zugewiesen werden. Sobald das letzte Bild geladen ist (onload), können die Bilder mit draeImage(image, x, y) angezeigt werden. 
var auto1 = new Image();
auto1.src = "images/car0.png";
var autoBreite=50;
var autoHoehe=100;
var y1;
auto1.onload = function() {
    y1=hoehe-autoHoehe
    ctx.drawImage(auto1, breite/2-autoBreite/2, y1);
}

Um das Auto nach oben zu bewegen, müssen wir in einer Schleife
  • das Canvas löschen (mit einem Rechteck ausfüllen)
  • den y-Wert immer kleiner machen
  • und bei y=0 die Scheife stoppen.
    • Hier zunächst der Block, der wiederholt werden soll:

function autos_bewegen(){
  ctx.fillStyle = "lightgray";
  ctx.fillRect(0, 0, breite, hoehe);
  y1=y1-Math.ceil(Math.random()*8+1);
  ctx.drawImage(auto1, breite/2-autoBreite/2, y1);
  if(y1<=0){
    //Spiel zu ende
  }
}

Um eine Funktion zu wiederholen gibt es in JavaScript den Befehl
setInterval(Funktion, Zeit in ms) 

var intervalID = window.setInterval(autos_bewegen, 25);

Die Funktion wird so lange wiederhaolt, bis das Interval mit
clearInterval(IntervalID)
gelöscht wird

if(y1<=0){
    //Spiel zu ende
    window.clearInterval(intervalID);
}

Ergänzt man noch 2 Autos könnte das Autorennen folgendermaßen aussehen: Autorennen

Hier die HTML-Seite mit dem kompletten Programm 


<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <title>Autorennen</title>                
    </head>
                        
    <body>
	<canvas id="myCanvas" onClick="rennenStarten();" width="500" height="600"  
          style="border:2px solid #000000; background-color: lightgray;"></canvas><br>  
    </body>
  	<script>
      function rennenStarten(){
	let auto1 = new Image();
	auto1.src = "images/car0.png";
        let auto2 = new Image();
	auto2.src = "images/car1.png";
        let auto3 = new Image();
	auto3.src = "images/car2.png";
        let autoBreite=50;
        let autoHoehe=100;
        let sieger="";
        auto3.onload = function() {
          let canvas = document.getElementById("myCanvas");
          let context = canvas.getContext("2d");
          let cBreite = canvas.width;
          let cHoehe = canvas.height;
          let y1 = cHoehe-autoHoehe;
          let y2 = cHoehe-autoHoehe;
          let y3 = cHoehe-autoHoehe;
          context.drawImage(auto1, cBreite/2-autoBreite/2, y1);
          context.drawImage(auto2, cBreite/4-autoBreite/2, y2);
          context.drawImage(auto3, cBreite/4*3-autoBreite/2, y3);
        
        function autos_bewegen(){
          context.beginPath();
          context.rect(0,0,cBreite,cHoehe);
          context.fillStyle = "lightgray";
          context.fill();
          context.closePath();
          y1=y1-Math.ceil(Math.random()*8+1);
          context.drawImage(auto1, cBreite/2-autoBreite/2, y1);
          if(y1<=0){sieger="rot"+y1;}
          y2=y2-Math.ceil(Math.random()*8+1);
          context.drawImage(auto2, cBreite/4-autoBreite/2, y2);
          if(y2<=0){sieger=sieger +"grau"+y2;}
          y3=y3-Math.ceil(Math.random()*8+1);
          context.drawImage(auto3, cBreite/4*3-autoBreite/2, y3);
          if(y3<=0){sieger=sieger + "grün"+y3;}
          if(y1<=0 || y2<=0 || y3<=0){
            window.clearInterval(intervalID);
            context.fillStyle="green";
            context.font = "30px Arial";
          	context.fillText(sieger, cBreite/4, cHoehe/2);
          }
        }  
      	var intervalID = window.setInterval(autos_bewegen, 25); 
        //autos_bewegen();
        //window.setTimeout(autos_bewegen, 250);
        }
        }
    </script>
</html>