Najnowsze tutoriale tworzenie stron internetowych
 

HTML elementy do zabawy

❮ Poprzedni Następny Rozdział ❯

Dodaj czerwony kwadrat na polu gry:

Dodaj komponent

Bądź, konstruktora składnik, który pozwala dodawać komponenty na gamearea.

Konstruktor obiektu jest nazywany component i robimy nasz pierwszy składnik, zwany 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);
}

Spróbuj sam "

Te składniki mają właściwości i metody kontrolowania ich wygląd i ruchy.

Ramki

Aby gra była gotowa do działania, będziemy aktualizować wyświetlacza 50 razy na sekundę, co jest bardzo podobny do klatek w filmie.

Po pierwsze, należy utworzyć nową funkcję o nazwie updateGameArea() .

W myGameArea obiektu, dodać odstęp, który uruchomi updateGameArea() funkcję co 20 milisekund (50 times per second) . Również dodać funkcję zwaną clear() , która usuwa cały obszar roboczy.

W component konstruktora, dodać funkcję o nazwie update() , aby obsłużyć rysunek składnika.

updateGameArea() funkcja nazywa clear() , a update() metody.

Powoduje to, że składnik ten jest sporządzony i natychmiast 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();
}
Spróbuj sam "

Make it Move

Aby udowodnić, że czerwony kwadrat jest przygotowywana 50 razy na sekundę, będziemy zmieniać położenia x (horizontal) o jeden piksel za każdym razem możemy zaktualizować pole gry:

Przykład

function updateGameArea() {
    myGameArea.clear();
    myGamePiece.x += 1;
    myGamePiece.update();
}
Spróbuj sam "

Dlaczego niebo Gra Area?

To może wydawać się zbędne, aby wyczyścić pole gry przy każdej aktualizacji. Jeśli jednak pominąć clear() metodę, wszystkie ruchy komponentu pozostawi ślad, gdzie został umieszczony w ostatniej klatce:

Przykład

function updateGameArea() {
    //myGameArea.clear();
    myGamePiece.x += 1;
    myGamePiece.update();
}
Spróbuj sam "

Zmiana rozmiaru

Można kontrolować szerokość i wysokość składnika:

Przykład

Tworzenie 10x140 pikseli prostokąt:

function startGame() {
    myGameArea.start();
    myGamePiece = new component( 10 , 140 , "red" , 10, 120);
}
Spróbuj sam "

Zmień kolor

Można kontrolować kolor komponentu:

Przykład

function startGame() {
    myGameArea.start();
    myGamePiece = new component(30, 30, "blue" , 10, 120);
}
Spróbuj sam "

Można również korzystać z innych colorvalues ​​jak hex, RGB lub RGBA:

Przykład

function startGame() {
    myGameArea.start();
    myGamePiece = new component(30, 30, "rgba(0, 0, 255, 0.5)" , 10, 120);
}
Spróbuj sam "

Zmienić pozycję

Używamy X i Y współrzędnych, aby umieścić elementy na obszar gry.

Górnym lewym rogu płótna ma współrzędne (0,0)

Najedź obszaru gry poniżej, aby zobaczyć jego współrzędne x i y:

X
Y

Można ustawić elementy gdziekolwiek zechcesz na polu gry:

Przykład

function startGame() {
    myGameArea.start();
    myGamePiece = new component(30, 30, "red" , 2 , 2 );
}
Spróbuj sam "

wiele komponentów

Można umieścić dowolną liczbę komponentów, jak chcesz na polu gry:

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();
 }
Spróbuj sam "

Przenoszenie komponentów

Dodać wszystkie trzy elementy poruszają 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();
}
Spróbuj sam "

❮ Poprzedni Następny Rozdział ❯