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
0 comments