Kanvas HTML
The <canvas>unsur adalah sempurna untuk membuat game
di HTML.
The <canvas>elemen menawarkan semua fungsi yang Anda
butuhkan untuk membuat game.
Gunakan JavaScript untuk
menggambar, menulis, menyisipkan gambar, dan banyak lagi ke <canvas>.
.getContext
("2d")
The <canvas>elemen memiliki built-in objek, yang
disebut getContext("2d")objek, dengan metode dan properti untuk menggambar. getConten disini lebih jelasnya untuk
menentukan gambar / animasi untuk dijadikan object pada gamae
Anda bisa belajar lebih
banyak tentang <canvas>elemen, dan getContext("2d")objeknya, di Tutorial Kanvas kami .
Memulai
Untuk membuat permainan,
mulailah dengan membuat area permainan, area permainan adalah tempat untuk kita
bermain dalam java script untuk membuat area permainan yaitu dengan tag
<Camvas>, dan buatlah siap untuk menggambar
:
Contoh
function startGame() {
myGameArea.start();
}
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
}
}
myGameArea.start();
}
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
}
}
Lihat dalam sintak di
atas baris 6 disana kita melihat variable myGameArea, Untuk apa variable myGameArea ? yaitu untuk menentukan lapangan untuk
kita membuat permainan. Objek myGameArea akan memiliki lebih banyak properti dan
metode nantinya dalam tutorial ini.
Liaht syntak dalam baris
Fungsi pertama yaitu fungsi startGame() kegunaan
dari fungsi tersebut yaitu untuk memanggil
metode start() dari
objek myGameArea.
Mhetod atau syntax .start() yaitu untuk menciptakan elemen <canvas> dan memasukkan sebagai childnode (apa childnode
? ialah Properti childNodes mengembalikan kumpulan nodus
anak node, sebagai objek NodeList. Jika kurang paham anda bisa
kunjungi https://www.w3schools.com/jsref/prop_node_childnodes.asp
) pertama dari <body>elemen.
sumber :https://www.w3schools.com/graphics/game_intro.asp