Kanvas Permainan

Elemen <canvas> HTML ditampilkan di halaman web sebagai objek persegi:

Canvas HTML

method <canvas> yang mencipta Elemen ini sangat cocok untuk mengembangkan permainan di HTML.

method <canvas> yang mencipta elemen menyediakan semua fungsi yang dibutuhkan untuk membuat permainan.

Gunakan JavaScript di method <canvas> yang mencipta menggambar, menulis teks, memasukkan gambar, dan sebagainya.

.getContext("2d")

method <canvas> yang mencipta Elemen memiliki objek bawaan yang disebut getContext("2d") objek, yang menyediakan metode dan atribut untuk penggambaran.

Anda dapat menemukan di Tutorial Canvas pelajari tentang method <canvas> yang mencipta element dan getContext("2d") pengetahuan lebih lanjut tentang objek.

Lalu, mulai

Untuk membuat permainan, pertama-tama buat area permainan dan siapkan 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]);
  }
}

coba sendiri

Di bagian belakang tutorial ini, objek myGameArea akan mendapatkan lebih banyak atribut dan metode.

fungsi startGame() panggil myGameArea 对象的 method. objek

method. method start() method <canvas> yang mencipta elemen, dan disisipkan sebagai anak pertama ke dalam elemen <body> di dalam elemen.