Połącz się z nami

Internet Maker

Prosty sposób na stworzenie gry w HTML5

Opublikowane

dnia

W tym tutorialu będziemy tworzyć grę squash przy użyciu technologii HTML5 ? Canvas.

  

Pierwsze kroki

Zacznijmy od stworzenia dokumentu HTML z oficjalnym typem dokumentu HTML5.


Robimy to po to, aby poinformować przeglądarkę, iż jest to najnowsza wersja dokumentu HTML5 z obsługą elementów Canvas.

Następnie tworzymy element Canvas z identyfikatorem ?gameBoard?. Wysokość i szerokość ma być ustalona wewnątrz tego znacznika, tak jak w poniższym kodzie:


Kręgosłup gry

JavaScript jest podstawą gry. W naszym przypadku JavaScript składać się będzie ze zmiennych globalnych oraz trzech funkcji. Na wstępie omówmy te zmienne:

// zmienne Globalne.
var ballX = 150;
var ballY = 150;
var ballDX = 2;
var ballDY = 4;
var boardX = 300;
var boardY = 300;
var racquetX= 150;
var racquetH= 10;
var racquetD = boardY - racquetH;
var racquetW = 150;
var canvas;
var ctx;
var gameLoop;
var titleFontSize = "bold 24px Georgia";
var contentFontSize = "normal 12px Arial";
  • ballX i ballY to zmienne, które przetrzymują początkową pozycję piłki.
  • ballDX i ballDy używamy do określenia odległości zmian położenia piłki.
  • boardX i boardY określają wysokość i szerokość okienka z grą.
  • racquetX definiuje punkt, w którym początkowo znajduje się nasza belka w poziomie.
  • racquetH określa całkowitą wysokość belki.
  • racquetD określa początkową pozycję belki w pionie.
  • racquetW jest szerokością belki.
  • titleFontSize to rozmiar czcionki użyty w tytule gry.
  • contentFontSize określa rozmiar tekstu użytego wewnątrz gry (poza tytułem).
  • canvas, ctx, i gameLoop stworzono dla globalnego dostępu.

Tworzenie funkcji Canvas naszej gry

function drawGameCanvas() {
        canvas = document.getElementById("gameBoard");
 
        if (canvas.getContext) {
          ctx = canvas.getContext("2d");
 
          gameLoop = setInterval(drawBall, 16);
 
          window.addEventListener('keydown', whatKey, true);
 
        }
      }

Utworzenie zmiennej ?canvas? w funkcji drawGameCanva ma przechowywać obiekt canvas. Dzięki temu będziemy mieli do niego bardzo łatwy dostęp. Sprawdź, czy przeglądarki, których używają odwiedzający Twoją stronę obsługują technologię canvas. Jeśli tak, to zdefiniuj jej typ jako 2D. Stwórz również Interval, który uruchomi funkcję ?drawBall?. Będzie ona odpowiadać za rysowanie piłki co 16 milisekund. I na koniec stwórz zdarzenie nasłuchujące ?keydown?. Jest to niezbędne, aby użytkownicy mogli grać w grę używając klawiatury.

Funkcja rysująca piłkę

function drawBall() {
 
        // wyczyść okienko z gra
        ctx.clearRect(0, 0, boardX, boardY);
 
        // wypelnij okienko z gra
        ctx.fillStyle = "black";
        ctx.beginPath();
        ctx.rect(0, 0, boardX, boardY);
        ctx.closePath();
        ctx.fill();
 
        // rysuj pilke
        ctx.fillStyle = "yellow";
        ctx.beginPath();
        ctx.arc(ballX, ballY, 15, 0, Math.PI * 2, true);
        ctx.closePath();
        ctx.fill();
 
        // rysuj belke
        ctx.fillStyle = "yellow";
        ctx.beginPath();
        ctx.rect(racquetX, racquetD, racquetW, racquetH);
        ctx.closePath();
        ctx.fill();
 
        // zmiana pozycji pilki
        ballX += ballDX;
        ballY += ballDY;
 
        // odpijanie pilki od krawedzi prawej i lewej
        if (ballX + ballDX > boardX - 15 || ballX + ballDX < 15) ballDX = -ballDX;
 
        // Odbicie piłki od gory okna
        if (ballY + ballDY < 15) ballDY = -ballDY;
        // Gdy piłka uderza o dolna krawędz, sprawdz czy dotknela belki
        else if (ballY + ballDY > boardY - 15) {
          // gdy dotknela belki, odbij ja
          if (ballX > racquetX && ballX < racquetX + racquetW) ballDY = -ballDY;
          // inaczej gra jest skonczona
          else {
            clearInterval(gameLoop);
 
            ctx.font = titleFontSize;
            ctx.fillStyle = "white";
            ctx.fillText("Przegrales", 90, 130);
 
            ctx.font = contentFontSize;
            ctx.fillStyle = "white";
            ctx.fillText("Odswiez strone, by powtorzyc", 70, 150);
          }
        }
      }

Ta funkcja jest przywoływana przez funkcję drawGameCanvas co 16 milisekund.

  • Czyścimy okno z grą za każdym razem, gdy funkcja uruchamia się przy użyciu ctx.clearRect.
  • Określamy rozmiar, kolor oraz pozycję okna z grą, piłki i belki.
  • Animujemy piłkę dodając ballDX oraz ballDY, które zdefiniowaliśmy już wcześniej.
  • Jeśli piłka uderzy w prawą bądź lewą krawędź okna, wartość w ballDX zostaje odwrócona, co zapewni odpicie się piłki w przeciwnym kierunku.
  • Jeśli piłka uderzy w górę okna, to samo dzieje się z wartością ballDY.
  • Jeśli piłka uderzy w dolną część okna gry, sprawdzane jest, czy uderzyła w belkę. Jeśli tak, to piłka odbija się w przeciwnym kierunku, a jeśli nie, to gra jest zakończona.

Funkcja whatKey

function whatKey(evt) {
 
        switch (evt.keyCode) {
          // lewa strzałka
        case 37:
          racquetX = racquetX - 20;
          if (racquetX < 0) racquetX = 0;
          break;
 
          // prawa strzałka
        case 39:
          racquetX = racquetX + 20;
          if (racquetX > boardX - racquetW) racquetX = boardX - racquetW;
          break;
        }
      }

Funkcja ta nasłuchuje, czy wciskamy prawą, czy lewą strzałkę na klawiaturze, a następnie przesuwa belkę w odpowiednią stronę o 20 pikseli z każdym wciśnięciem.

Funkcja drawGameCanvas

Teraz pozostaje już tylko stworzenie funkcji drawGameCanvas wewnątrz znacznika body.


I to już wszystko. Teraz wystarczy zapisać dokument i uruchomić go w przeglądarce obsługującej Canvas.

Cały kod


 
  
  Squash przy użyciu HTML5- Canvas | MagazynT3.pl
  
    
  
 
  
  

Student Informatyki i Ekonometrii na Politechnice Gdańskiej, zapalony fotograf i multiinstrumentalista.

Kontynuuj czytanie
Reklama
1 komentarz

1 komentarz

  1. Zertin

    30/03/2019 o 17:04

    Jak zrobić aby zamiast piłki był jakiś obrazek? np z linku?

Zostaw komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Internet Maker

Pozycjonowanie strony internetowej a reklamy w Internecie – czym się różnią?

Nie masz cierpliwości do pozycjonowania? Skorzystaj z pomocy profesjonalistów!

Opublikowane

dnia

przez

Chcesz osiągnąć sukces w e-biznesie i zwiększyć widoczność swojej strony w sieci? Nie pozostaje Ci nic innego jak zająć się promocją witryny. Zacznij od inwestycji w pozycjonowanie, czyli zgodnej ze wskazówkami Google optymalizacji strony pod wyszukiwarkę internetową. Pamiętaj, że największa ilość wejść pochodzi właśnie z wyszukiwarek, dlatego zajmowanie wysokiej pozycji w rankingu Google szybko przełoży się na lepsze statystyki.

(więcej…)

Kontynuuj czytanie

Internet Maker

Jak szybko i łatwo stworzyć stronę mobilną

Opublikowane

dnia

W dzisiejszych czasach coraz bardziej popularne staje się przeglądanie stron internetowych na urządzeniach mobilnych. Ba! Samo surfowanie po sieci to w sumie już przeszłość – obecnie zakupy czy płatności mobilne to chleb powszedni dla polskich internautów. 

(więcej…)

Kontynuuj czytanie

Internet Maker

Strona na WordPressie? Grunt to dobry hosting

Opublikowane

dnia

WordPress jest powszechnie uważany za najlepszy system zarządzania treścią zarówno dla prostych blogów i stron, jak i większych serwisów internetowych oraz sklepów. Szacuje się, że już 23% witryn na świecie korzysta z WordPressa, a wśród nich takie marki jak BBC,  MTV czy Sony.

(więcej…)

Kontynuuj czytanie

Internet Maker

Jak zabezpieczyć swoje zdjęcia w chmurze

Opublikowane

dnia

Niedawny wyciek nagich zdjęć znanych osobistości wznowił dyskusje na temat bezpieczeństwa naszych prywatnych danych. Jako że część fotografii została wykradziona poprzez iCloud, prezentujemy dziś jak zabezpieczyć swoje dane w chmurze. (więcej…)

Kontynuuj czytanie

Internet Maker

Jak usunąć historię swojej aktywności z Facebooka?

Opublikowane

dnia

Usunięcie swojej aktywności z Facebooka nie jest takie proste, jakby się mogło wydawać. Portal społecznościowy daje możliwość zachowania kopii swoich postów oraz zamknięcia całego konta, jednak co w przypadku gdy chcemy usunąć tylko poszczególne wpisy? (więcej…)

Kontynuuj czytanie
Reklama

Popularne