Mario w JavaScript – Stwórz swoją grę krok po kroku!

Wielu z nas ma w pamięci niezapomniane chwile spędzone z grą Super Mario. Czy zastanawiałeś się kiedyś, jak stworzyć własną wersję tej kultowej gry w JavaScript? Zdecydowanie jest to możliwe, a stworzenie gry Mario to świetna okazja do nauki programowania w tym języku. W tym artykule pokażemy Ci, jak krok po kroku stworzyć podstawową wersję gry Mario w JavaScript. Dowiesz się, jak używać HTML, CSS i JavaScript, by ożywić kultowego hydraulika na Twojej stronie internetowej.

1. Dlaczego warto stworzyć grę Mario w JavaScript?

Tworzenie własnej gry to jedno z najbardziej ekscytujących wyzwań, które możesz podjąć jako programista. A jeśli chcesz poczuć się jak twórca klasycznych gier, projekt Mario w JavaScript będzie doskonałym wyborem. Dlaczego warto? Po pierwsze, jest to świetna okazja, by poznać podstawy programowania w JavaScript oraz zrozumieć, jak działa logika gry, animacje oraz interakcje z użytkownikiem. Po drugie, stworzysz coś zabawnego i interaktywnego, co może być naprawdę satysfakcjonujące.

Co zyskasz, tworząc grę Mario w JavaScript?:

• Praktyczna nauka programowania: Tworzenie gry to świetna okazja do nauki obsługi zdarzeń, animacji, wykrywania kolizji, a także manipulacji DOM w HTML.
• Zrozumienie podstaw gry: Zrozumiesz, jak działają fizyki w grze – jak postacie poruszają się w przestrzeni, jak reagują na przeszkody, jak implementować wrogów i przedmioty do zbierania.
• Satysfakcja z ukończenia projektu: Nic nie daje większej radości niż ukończenie własnej gry i podzielenie się nią z innymi!

2. Jakie technologie będziemy używać?

Do stworzenia gry Mario w JavaScript potrzebujemy trzech podstawowych technologii webowych: HTML, CSS i JavaScript. HTML będzie odpowiedzialny za strukturę strony, CSS za stylizację, a JavaScript za logikę gry. Warto także wspomnieć o elementach takich jak canvas, który pozwala na renderowanie grafiki 2D w czasie rzeczywistym. Dzięki temu będziemy mogli tworzyć wszystkie elementy gry – tła, postacie, przeszkody, platformy i inne obiekty, które pojawią się w grze.

3. Podstawy gry – Tworzenie ekranu gry

Przygotujmy początkowy szkielet gry. Na początek musimy utworzyć element canvas, który będzie miejscem, gdzie będziemy rysować wszystkie elementy gry, jak tło, postać Mario, platformy, wrogów i inne. Oto jak to zrobić:

Element canvas to nasze „płótno”, na którym będziemy rysować elementy gry. Następnie w JavaScript za pomocą funkcji getContext('2d') uzyskujemy dostęp do kontekstu 2D, który pozwala na rysowanie na tym płótnie. Oto jak rozpocząć naszą grę:

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

function startGame() {
  ctx.fillStyle = 'skyblue';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}

startGame();

W powyższym przykładzie ustawiamy kolor tła gry na niebieski, co daje efekt nieba. Funkcja startGame() rysuje tło na całym ekranie, wypełniając całe canvas.

4. Dodajemy Mario – Ruch postaci

Teraz przejdźmy do dodawania samego Mario! Stworzymy prostokątną postać, którą będziemy przesuwać na ekranie. Następnie będziemy musieli dodać logikę do poruszania postacią za pomocą klawiszy strzałek. Oto kod, który dodaje Mario i pozwala na jego ruch:

let mario = {
  x: 50,
  y: canvas.height - 100,
  width: 50,
  height: 50,
  speed: 5
};

function drawMario() {
  ctx.fillStyle = 'red';
  ctx.fillRect(mario.x, mario.y, mario.width, mario.height);
}

function moveMario() {
  if (keys.right && mario.x < canvas.width - mario.width) {
    mario.x += mario.speed;
  }
  if (keys.left && mario.x > 0) {
    mario.x -= mario.speed;
  }
}

const keys = {
  right: false,
  left: false
};

window.addEventListener('keydown', (event) => {
  if (event.key === 'ArrowRight') keys.right = true;
  if (event.key === 'ArrowLeft') keys.left = true;
});

window.addEventListener('keyup', (event) => {
  if (event.key === 'ArrowRight') keys.right = false;
  if (event.key === 'ArrowLeft') keys.left = false;
});

function update() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  startGame();
  moveMario();
  drawMario();
  requestAnimationFrame(update);
}

update();

W powyższym przykładzie tworzymy obiekt mario, który zawiera właściwości takie jak pozycja, rozmiar i prędkość postaci. Dodajemy także obsługę klawiszy strzałek (w lewo i w prawo), aby umożliwić poruszanie się Mario po ekranie. Funkcja update() jest wywoływana w pętli, aby stale aktualizować pozycję Mario i rysować go na ekranie.

5. Dodajemy przeszkody i platformy

Teraz czas na dodanie przeszkód oraz platform, po których Mario będzie mógł skakać. Aby to zrobić, stworzymy tablicę obiektów, które będą reprezentowały platformy. Poniżej znajdziesz kod, który dodaje platformy do gry:

let platforms = [
  { x: 100, y: 500, width: 200, height: 20 },
  { x: 400, y: 400, width: 200, height: 20 },
  { x: 700, y: 300, width: 200, height: 20 }
];

function drawPlatforms() {
  ctx.fillStyle = 'brown';
  platforms.forEach(platform => {
    ctx.fillRect(platform.x, platform.y, platform.width, platform.height);
  });
}

function checkCollision() {
  platforms.forEach(platform => {
    if (mario.y + mario.height <= platform.y && mario.y + mario.height + mario.speed >= platform.y &&
        mario.x + mario.width > platform.x && mario.x < platform.x + platform.width) {
      mario.y = platform.y - mario.height;
    }
  });
}

function update() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  startGame();
  moveMario();
  checkCollision();
  drawMario();
  drawPlatforms();
  requestAnimationFrame(update);
}

update();

W tym przypadku dodajemy platformy, które Mario może przeskakiwać, oraz funkcję checkCollision(), która sprawdza, czy Mario dotyka platformy. Jeśli tak, postać zostaje ustawiona na platformie, co umożliwia skakanie.

6. Podsumowanie i dalsze kroki

Stworzenie gry Mario w JavaScript to świetna zabawa i doskonała okazja do nauki programowania! W tym artykule pokazaliśmy, jak rozpocząć projekt, tworząc elementy takie jak tło, postać Mario, platformy i przeszkody. Dzięki tym podstawowym elementom możesz stworzyć własną wersję gry i rozwijać ją dalej. Możesz dodać wrogów, przedmioty do zbierania, tła, animacje i wiele innych!

Teraz, gdy masz podstawy, zachęcamy Cię do kontynuowania pracy nad grą i wprowadzania nowych funkcji. Możesz również spróbować zaimplementować bardziej zaawansowane mechanizmy gry, takie jak detekcja kolizji z wrogami czy system punktacji. W końcu, programowanie gier to proces twórczy, który daje mnóstwo satysfakcji!