Herní komponenty
Přidejte červený čtverec na herní plochu:
Přidat komponentu
Vytvořte konstruktor komponent, který vám umožní přidávat komponenty do herní oblasti.
Konstruktor objektu se nazývá
componenta my vytvoříme naši první komponentu nazvanou myGamePiece:
Příklad
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);
}
Komponenty mají vlastnosti a metody pro ovládání jejich vzhledu a pohybu.
Rámečky
Aby byla hra připravena k akci, aktualizujeme displej 50krát za sekundu, což je hodně jako snímky ve filmu.
Nejprve vytvořte novou funkci s názvem updateGameArea().
V myGameAreaobjektu přidejte interval, který spustí updateGameArea()funkci každých 20 milisekund (50krát za sekundu). Přidejte také funkci s názvem clear(), která vymaže celé plátno.
V componentkonstruktoru přidejte funkci nazvanou
update(), která zpracuje výkres komponenty.
Funkce updateGameArea()volá metodu clear()a update().
Výsledkem je, že se komponenta kreslí a maže 50krát za sekundu:
Příklad
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();
}
Rozhýbejte se
Abychom dokázali, že se červený čtverec kreslí 50krát za sekundu, změníme polohu x (horizontální) o jeden pixel pokaždé, když aktualizujeme herní oblast:
Příklad
function updateGameArea() {
myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
Proč vymazat herní oblast?
Mohlo by se zdát zbytečné čistit herní oblast při každé aktualizaci. Pokud však
clear()metodu vynecháme, všechny pohyby komponenty zanechají stopu o tom, kde byla umístěna v posledním snímku:
Příklad
function updateGameArea() {
// myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
Změňte velikost
Můžete ovládat šířku a výšku komponenty:
Příklad
Vytvořte obdélník 10x140 pixelů:
function startGame() {
myGameArea.start();
myGamePiece = new component(140, 10, "red", 10, 120);
}
Změňte barvu
Můžete ovládat barvu součásti:
Příklad
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "blue", 10, 120);
}
Můžete také použít jiné hodnoty barev, jako je hex, rgb nebo rgba:
Příklad
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "rgba(0, 0, 255, 0.5)", 10, 120);
}
Změňte pozici
K umístění komponent na herní plochu používáme souřadnice x a y.
Levý horní roh plátna má souřadnice (0,0)
Umístěním myši na herní oblast níže zobrazíte její souřadnice x a y:
Komponenty můžete umístit kdekoli na herní ploše:
Příklad
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "red", 2, 2);
}
Mnoho komponent
Na herní plochu můžete umístit tolik komponent, kolik chcete:
Příklad
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();
}
Pohyblivé komponenty
Nechte všechny tři součásti pohybovat různými směry:
Příklad
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();
}