Oyun Kanvası
- Önceki Sayfa Oyun Özeti
- Sonraki Sayfa Oyun Bileşenleri
HTML <canvas> öğesi, web sayfasında düzgün bir dikdörtgen nesnesi olarak görüntülenir:
HTML Canvas
<canvas> öğesi, HTML'de oyun geliştirmek için mükemmel bir seçimdir.
<canvas> öğesi, oyun yapım için gerekli tüm işlevleri sağlar.
JavaScript kullanarak <canvas> çizim, metin yazma, resim ekleme vb. için kullanılır.
.getContext("2d")
<canvas> öğesi, adlandırılan bir iç nesneye sahiptir, getContext("2d") nesne, çizim için yöntemler ve özellikler sağlar.
Sitemizde Canvas Eğitim Kılavuzu ile ilgili <canvas> öğeleri ve getContext("2d") nesne hakkında daha fazla bilgi edinin.
O zaman, başlayın
Oyun yapmak için, öncelikle bir oyun alanı oluşturun ve çizim için hazırlanın:
örnek
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]);
}
}
Bu eğitim kılavuzunun daha ileriki bölümlerinde, nesne myGameArea daha fazla özellik ve yöntem kazanacaktır.
fonksiyon startGame() çağrı myGameArea nesnesinin start() methodu oluşturur.
start() methodu, bir <canvas> elementi, ve ilk alt element olarak eklenmiştir <body> elemeninde.
- Önceki Sayfa Oyun Özeti
- Sonraki Sayfa Oyun Bileşenleri
