เกมแคนวาส
องค์ประกอบ HTML <canvas>จะแสดงเป็นวัตถุสี่เหลี่ยมบนหน้าเว็บ:
HTML Canvas
องค์ประกอบ<canvas>นี้สมบูรณ์แบบสำหรับการสร้างเกมใน HTML
องค์ประกอบ<canvas>นี้มีฟังก์ชันทั้งหมดที่คุณต้องการสำหรับการสร้างเกม
ใช้ JavaScript เพื่อวาด เขียน แทรกรูปภาพ และอื่นๆ ลงในไฟล์
<canvas>.
.getContext("2d")
องค์ประกอบ<canvas>นี้มีอ็อบเจ็กต์ในตัว เรียกว่าgetContext("2d")อ็อบเจ็กต์ พร้อมเมธอดและคุณสมบัติสำหรับการวาดภาพ
คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ<canvas>องค์ประกอบและ
getContext("2d")วัตถุได้ใน บทช่วย สอน Canvasของ เรา
เริ่ม
ในการสร้างเกม ให้เริ่มต้นด้วยการสร้างพื้นที่เล่นเกม และเตรียมให้พร้อมสำหรับการวาดภาพ:
ตัวอย่าง
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]);
}
}
ออบเจ็กต์myGameAreaจะมีคุณสมบัติและวิธีการเพิ่มเติมในภายหลังในบทช่วยสอนนี้
ฟังก์ชันstartGame()เรียกใช้เมธอด
start()ของ
myGameAreaอ็อบเจ็กต์
วิธี การ
start()สร้าง<canvas>องค์ประกอบและแทรกเป็นโหนดย่อยแรกของ<body>องค์ประกอบ