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