Kleiner JavaScript Kurs
Schachbrett (auf Canvas)
Für das Schachbrett benötigen wir zunächst auf der HTML - Seite (im body) ein quadratisches Canvas - Element
<body>
<canvas id="myCanvas" width="500" height="500" style="border:2px solid #000000;">
</canvas>
</body>
Die Vorbereitungen in unserem Script beinhalten u.a. die definition der Variablen:
<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;
var zeilen=8;
var spalten=8;
var farbe;
</script>
Jetzt können wir ein erstes ausgefülltes Rechteck zeichnen:
<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;
var zeilen=8;
var spalten=8;
var farbe;
</script>
farbe="yellow";
ctx.fillStyle = farbe;
ctx.fillRect(0, 0, breite/spalten, hoehe/zeilen);
Als nächstes zeichnen wir mit einer for - Schleife eine ganze Zeile. Dabei soll die Füllfarbe bei allen geraden Rechtecken (0, 2, 4, 6, 8) gelb (yellow) und bei allen ungeragen Rechtecken (1, 3, 5, 7) braun (brown) sein.
for(var i=0; i<spalten; i++){
if(i%2==0){farbe="yellow"}
else{farbe="brown"}
ctx.fillStyle = farbe;
ctx.fillRect(i*breite/spalten, 0, breite/spalten, hoehe/zeilen);
}Jetzt werden mit einer zweiten for - Schleife die Zeilen gezeichnet:
for(var i=0; i<spalten; i++){
for(var j=0; j<zeilen; j++){
if(i%2==0){farbe="yellow"}
else{farbe="brown"}
ctx.fillStyle = farbe;
ctx.fillRect(i*breite/spalten, j*hoehe/zeilen, breite/spalten, hoehe/zeilen);
}
}Jetzt fehlt nur noch das Austauschen der Farben bei jeder 2. Zeile
So könnte das fertige Schachbrett aussehen: Schachbrett
Hier die HTML-Seite mit dem kompletten Programm
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Schachbrett</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:2px solid #000000;"></canvas>
</body>
<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;
var zeilen=8;
var spalten=8;
var farbe;
for(var i=0; i<zeilen; i++){
for(var j=0; j<spalten; j++){
if(j%2==0){
if(i%2==0){farbe="yellow"}
else{farbe="brown"}
}
if(j%2==1){
if(i%2==0){farbe="brown"}
else{farbe="yellow"}
}
ctx.fillStyle = farbe;
ctx.fillRect(i*breite/spalten, j*hoehe/zeilen, breite/spalten, hoehe/zeilen);
}
}
</script>
</html>