遊戲元件
在遊戲區域新增一個紅色方塊
新增元件
建立一個元件建構函式，用於將元件新增到遊戲區域。
物件建構函式名為 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 物件中，新增一個間隔，每 20 毫秒（每秒 50 次）執行一次 updateGameArea() 函式。同時新增一個名為 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 位置（水平）更改一個畫素。
示例
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);
}
自己動手試一試 »
您還可以使用其他顏色值，如十六進位制、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();
}
自己動手試一試 »
