Komponenty gry
Dodaj czerwony kwadrat do obszaru gry:
Dodaj komponent
Stwórz konstruktora komponentów, który pozwala dodawać komponenty do obszaru gry.
Konstruktor obiektu nazywa się
component, a my tworzymy nasz pierwszy komponent o nazwie myGamePiece:
Przykład
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 posiadają właściwości i metody kontrolowania ich wyglądu i ruchów.
Ramki
Aby gra była gotowa do akcji, będziemy aktualizować wyświetlacz 50 razy na sekundę, co przypomina klatki w filmie.
Najpierw utwórz nową funkcję o nazwie updateGameArea().
W myGameAreaobiekcie dodaj interwał, który będzie uruchamiał updateGameArea()funkcję co 20 milisekund (50 razy na sekundę). Dodaj również funkcję o nazwie clear(), która czyści całe płótno.
W componentkonstruktorze dodaj funkcję o nazwie
update(), aby obsłużyć rysowanie komponentu.
Funkcja updateGameArea()wywołuje metodę clear()i .update()
W rezultacie komponent jest rysowany i usuwany 50 razy na sekundę:
Przykład
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();
}
Niech to się rusza
Aby udowodnić, że czerwony kwadrat jest rysowany 50 razy na sekundę, zmieniamy pozycję x (w poziomie) o jeden piksel za każdym razem, gdy aktualizujemy obszar gry:
Przykład
function updateGameArea() {
myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
Po co czyścić obszar gry?
Wyczyszczenie obszaru gry przy każdej aktualizacji może wydawać się niepotrzebne. Jeśli jednak pominiemy tę
clear()metodę, wszystkie ruchy komponentu pozostawią ślad miejsca, w którym znajdował się w ostatniej klatce:
Przykład
function updateGameArea() {
// myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
Zmień rozmiar
Możesz kontrolować szerokość i wysokość komponentu:
Przykład
Utwórz prostokąt 10x140 pikseli:
function startGame() {
myGameArea.start();
myGamePiece = new component(140, 10, "red", 10, 120);
}
Zmień kolor
Możesz kontrolować kolor komponentu:
Przykład
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "blue", 10, 120);
}
Możesz także użyć innych wartości kolorów, takich jak hex, rgb lub rgba:
Przykład
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "rgba(0, 0, 255, 0.5)", 10, 120);
}
Zmień pozycję
Używamy współrzędnych x i y do umieszczania komponentów na obszarze gry.
Lewy górny róg płótna ma współrzędne (0,0)
Najedź myszą na obszar gry poniżej, aby zobaczyć jego współrzędne x i y:
Możesz umieścić komponenty w dowolnym miejscu na obszarze gry:
Przykład
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "red", 2, 2);
}
Wiele komponentów
Na obszarze gry możesz umieścić dowolną liczbę elementów:
Przykład
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();
}
Ruchome komponenty
Spraw, aby wszystkie trzy komponenty poruszały się w różnych kierunkach:
Przykład
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();
}