ล่าสุดการพัฒนาเว็บบทเรียน
 

เกมคอมโพเนนต์ HTML

❮ก่อนหน้า ถัดไปบท❯

เพิ่มตารางสีแดงลงบนพื้นที่เกม:

เพิ่มคอมโพเนนต์

สร้างตัวสร้างองค์ประกอบซึ่งจะช่วยให้คุณเพิ่มส่วนประกอบบน gamearea

ตัวสร้างวัตถุที่เรียกว่า 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 times per second) นอกจากนี้ยังเพิ่มฟังก์ชั่นที่เรียกว่า clear() , ที่ล้างผ้าใบทั้งหมด

ใน component คอนสตรัคเพิ่มฟังก์ชั่นที่เรียกว่า update() เพื่อจัดการกับการวาดภาพของส่วนประกอบ

updateGameArea() ฟังก์ชั่นเรียก clear() และ update() วิธีการ

ผลที่ได้คือว่าองค์ประกอบที่จะถูกวาดและล้าง 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 (horizontal) โดยหนึ่งพิกเซลทุกครั้งที่เราปรับปรุงพื้นที่เกม:

ตัวอย่าง

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( 10 , 140 , "red" , 10, 120);
}
ลองตัวเอง»

เปลี่ยนสี

คุณสามารถควบคุมสีของส่วนประกอบ:

ตัวอย่าง

function startGame() {
    myGameArea.start();
    myGamePiece = new component(30, 30, "blue" , 10, 120);
}
ลองตัวเอง»

นอกจากนี้คุณยังสามารถใช้ colorvalues ​​อื่น ๆ เช่น 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 พิกัดของมัน

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();
}
ลองตัวเอง»

❮ก่อนหน้า ถัดไปบท❯