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>
.