Oleh : Reza Ervani
بسم الله الرحمن الرحيم
Kita akan mencoba membuat papan catur dengan HTML5 untuk melihat bagaimana looping menggunakan for bekerja juga di HTML5 via JavaScript.
Tampilan akhirnya akan tampak seperti ini :
Ide dasarnya sederhana :
Koordinat Rectangle dalam format (x, y) dan panjang sisi kotak adalah 60 :
Baris 1 : (0*60, 0) = (0, 0) : putih (1*60, 0) = (60, 0) : hitam (2*60, 0) = (120, 0) : putih (3*60, 0) = (180, 0) : hitam dan seterusnya ... Baris 2 (0*60, 60) = (0, 60) : hitam (1*60, 60) = (60, 60) : putih (2*60, 60) = (120, 60) : hitam (3*60, 60) = (180, 60) : putih dan seterusnya ... masing-masing berulang sebanyak 4 kali, sehingga total ada 8 baris dan 8 kolom
Untuk baris 0, 2, 4 dan 6 kita akan membuat kotak hitam di kolom 1, 3, 5 dan 7, ini berarti jika koordinat x ganjil dan y genap maka buat kita akan membuat kotak berwarna hitam
if (x % 2 != 0 && y % 2 == 0) {
ukr.fillStyle='black';
ukr.fillRect(startX,startY,60,60);
}
Untuk baris 1, 3, 5 dan 7 kita akan membuat kotak hitam di kolom 0, 2, 4 dan 6, ini berarti jika koordinat x genap dan y ganjil maka kita akan membuat berwarna hitam.
if (x % 2 == 0 && y % 2 != 0) {
ukr.fillStyle='black';
ukr.fillRect(startX,startY,60,60);
}
Kode lengkapnya tampak seperti berikut :
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function gambarKotak() {
var kanvas = document.getElementById('kanvasgue');
if (kanvas.getContext) {
var ukr = kanvas.getContext('2d');
for (var x=0;x<8;x++) {
for (var y=0;y<8;y++) {
startX = x * 60;
startY = y * 60;
if (x % 2 != 0 && y % 2 == 0) {
ukr.fillStyle='black';
ukr.fillRect(startX,startY,60,60);
}
if (x % 2 == 0 && y % 2 != 0) {
ukr.fillStyle='black';
ukr.fillRect(startX,startY,60,60);
}
}
}
} else {
alert('Browser anda tidak support');
}
</script>
</head>
<body onload="gambarKotak();">
<canvas id="kanvasgue" width=1000" height="1000"></canvas>
</body>
</html>
Contohnya dapat dilihat di : http://nl02.rumahilmu.or.id/contoh/html5/catur.html
Leave a Reply