ส่วนประกอบของเกม
เพิ่มสี่เหลี่ยมสีแดงลงในพื้นที่เกม:
เพิ่มส่วนประกอบ
สร้างตัวสร้างส่วนประกอบ ซึ่งช่วยให้คุณสามารถเพิ่มส่วนประกอบลงในพื้นที่เกมได้
ตัวสร้างวัตถุถูกเรียก
componentและเราสร้างองค์ประกอบแรกของเราที่เรียกว่าmyGamePiece:
ตัวอย่าง
var myGamePiece;
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "red", 10, 120);
}
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.x = x;
this.y = y;
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
ส่วนประกอบมีคุณสมบัติและวิธีการควบคุมลักษณะที่ปรากฏและการเคลื่อนไหว
เฟรม
เพื่อให้เกมพร้อมสำหรับการดำเนินการ เราจะอัปเดตการแสดงผล 50 ครั้งต่อวินาที ซึ่งเหมือนกับเฟรมในภาพยนตร์
ขั้นแรก สร้างฟังก์ชันใหม่ที่เรียกว่าupdateGameArea().
ในmyGameAreaวัตถุ ให้เพิ่มช่วงเวลาที่จะเรียกใช้updateGameArea()ฟังก์ชันทุกๆ 20 มิลลิวินาที (50 ครั้งต่อวินาที) เพิ่มฟังก์ชันที่เรียกว่าclear()ซึ่งล้างพื้นที่ทั้งหมด
ในcomponentConstructor ให้เพิ่มฟังก์ชันที่เรียกว่า
update(), เพื่อจัดการการวาดองค์ประกอบ
ฟังก์ชันupdateGameArea()เรียก the clear()และupdate()method
ผลที่ได้คือส่วนประกอบถูกวาดและล้าง 50 ครั้งต่อวินาที:
ตัวอย่าง
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]);
this.interval = setInterval(updateGameArea, 20);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.update = function(){
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.update();
}
ทำให้มันเคลื่อนไหว
เพื่อพิสูจน์ว่าสี่เหลี่ยมสีแดงถูกดึงออกมา 50 ครั้งต่อวินาที เราจะเปลี่ยนตำแหน่ง x (แนวนอน) ทีละหนึ่งพิกเซลทุกครั้งที่เราอัปเดตพื้นที่เกม:
ตัวอย่าง
function updateGameArea() {
myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
ทำไมต้องเคลียร์พื้นที่เกม?
อาจดูเหมือนไม่จำเป็นต้องล้างพื้นที่เกมทุกครั้งที่อัปเดต อย่างไรก็ตาม หากเราไม่ใช้
clear()วิธีนี้ การเคลื่อนไหวทั้งหมดของส่วนประกอบจะทิ้งร่องรอยของตำแหน่งที่อยู่ในเฟรมสุดท้าย:
ตัวอย่าง
function updateGameArea() {
// myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
เปลี่ยนขนาด
คุณสามารถควบคุมความกว้างและความสูงของส่วนประกอบได้:
ตัวอย่าง
สร้างสี่เหลี่ยมผืนผ้า 10x140 พิกเซล:
function startGame() {
myGameArea.start();
myGamePiece = new component(140, 10, "red", 10, 120);
}
เปลี่ยนสี
คุณสามารถควบคุมสีของส่วนประกอบได้:
ตัวอย่าง
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "blue", 10, 120);
}
คุณยังสามารถใช้ค่าสีอื่นๆ เช่น hex, rgb หรือ rgba:
ตัวอย่าง
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "rgba(0, 0, 255, 0.5)", 10, 120);
}
เปลี่ยนตำแหน่ง
เราใช้พิกัด x และ y เพื่อจัดตำแหน่งส่วนประกอบบนพื้นที่เกม
มุมบนซ้ายของผืนผ้าใบมีพิกัด (0,0)
วางเมาส์เหนือพื้นที่เกมด้านล่างเพื่อดูพิกัด x และ y:
คุณสามารถจัดตำแหน่งส่วนประกอบได้ทุกที่ที่คุณต้องการในพื้นที่เกม:
ตัวอย่าง
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "red", 2, 2);
}
ส่วนประกอบมากมาย
คุณสามารถใส่ส่วนประกอบได้มากเท่าที่คุณต้องการในพื้นที่เกม:
ตัวอย่าง
var redGamePiece, blueGamePiece, yellowGamePiece;
function startGame() {
redGamePiece = new component(75, 75, "red", 10, 10);
yellowGamePiece = new component(75, 75, "yellow", 50, 60);
blueGamePiece = new component(75, 75, "blue", 10, 110);
myGameArea.start();
}
function updateGameArea() {
myGameArea.clear();
redGamePiece.update();
yellowGamePiece.update();
blueGamePiece.update();
}
ส่วนประกอบในการเคลื่อนย้าย
ทำให้ส่วนประกอบทั้งสามเคลื่อนที่ไปในทิศทางที่ต่างกัน:
ตัวอย่าง
function updateGameArea() {
myGameArea.clear();
redGamePiece.x += 1;
yellowGamePiece.x += 1;
yellowGamePiece.y += 1;
blueGamePiece.x += 1;
blueGamePiece.y -= 1;
redGamePiece.update();
yellowGamePiece.update();
blueGamePiece.update();
}