O‘yin canvas’i
HTML <canvas> elementi veb-sahifada to‘rtburchak obyekt sifatida ko‘rsatiladi:
HTML Canvas
<canvas> elementi HTML’da o‘yinlar yaratish uchun juda mos.
<canvas> elementi o‘yin yaratish uchun kerak bo‘ladigan barcha imkoniyatlarni taqdim etadi.
JavaScript yordamida
<canvas>’ga chizish, yozish, rasm joylashtirish va boshqa amallarni bajaring.
.getContext("2d")
<canvas> elementida chizish uchun metodlar va xususiyatlarga ega getContext("2d") deb ataladigan o‘rnatilgan obyekt bor.
<canvas> elementi va
getContext("2d") obyekti haqida Canvas darsligimizda batafsil bilib olishingiz mumkin.
Ishni boshlash
O‘yin yaratish uchun avval o‘yin maydonini yarating va uni chizishga tayyorlang:
Misol
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]);
}
}
O‘zingiz sinab ko‘ring »
Ushbu darslikning keyingi qismlarida myGameArea obyekti yana ko‘proq xususiyat va metodlarga ega bo‘ladi.
startGame() funksiyasi
myGameArea obyektining
start() metodini chaqiradi.
start() metodi <canvas> elementini yaratadi va uni <body> elementining birinchi ichki tuguni (childnode) sifatida joylashtiradi.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!