HTML 5 : Membuat Papan Catur dengan HTML5

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 :

Screenshot from 2014-05-11 12:28:28

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

[code language=”java”]
if (x % 2 != 0 && y % 2 == 0) {
ukr.fillStyle=’black’;
ukr.fillRect(startX,startY,60,60);
}
[/code]

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.

[code language=”java”]
if (x % 2 == 0 && y % 2 != 0) {
ukr.fillStyle=’black’;
ukr.fillRect(startX,startY,60,60);
}
[/code]

Kode lengkapnya tampak seperti berikut :

[code language=”html”]

<!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>

[/code]

Contohnya dapat dilihat di : http://nl02.rumahilmu.or.id/contoh/html5/catur.html

About Reza Ervani 425 Articles
Adalah pendiri programming.rezaervani.com -

Be the first to comment

Leave a Reply

Your email address will not be published.


*


This site uses Akismet to reduce spam. Learn how your comment data is processed.