Oyun Tuvali
HTML <canvas>öğesi, bir web sayfasında dikdörtgen bir nesne olarak görüntülenir:
HTML Kanvas
<canvas>Öğe, HTML'de oyun yapmak için mükemmeldir .
<canvas>Öğe, oyun yapmak için ihtiyacınız olan tüm işlevleri sunar .
üzerine çizim yapmak, yazmak, resim eklemek ve daha fazlasını yapmak için JavaScript'i kullanın
<canvas>.
.getContext("2d")
Öğenin , çizim için yöntemler ve özellikler içeren, nesne <canvas>adı verilen yerleşik bir nesnesi vardır .getContext("2d")
<canvas>Öğe ve
getContext("2d")nesne hakkında daha fazla bilgiyi Canvas Eğitimimizde bulabilirsiniz .
Başlamak
Bir oyun yapmak için bir oyun alanı oluşturarak başlayın ve çizime hazır hale getirin:
Ö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]);
}
}
Nesne myGameArea, bu öğreticide daha sonra daha fazla özellik ve yönteme sahip olacaktır.
İşlev , nesnenin startGame()yöntemini çağırır .
start()
myGameArea
Yöntem
start()bir <canvas>öğe oluşturur ve onu öğenin ilk alt düğümü olarak ekler <body>.