Kako stvoriti igru s kovanicom koristeći JavaScript?

U svijetu programiranja i web razvoja, JavaScript je jedan od najpopularnijih jezika koji omogućuje stvaranje interaktivnih i dinamičnih web stranica. Jedna od zanimljivih i jednostavnih igara koju možemo izraditi je igra s kovanicom, poznata kao ‘spin and coin’ igra. Ova igra može biti odličan način za učenje osnova JavaScript-a, kao i za zabavu i opuštanje. U ovom članku istražit ćemo kako možemo implementirati ovu igru koristeći HTML, CSS i JavaScript.

Prije nego što započnemo s kodiranjem, važno je razumjeti osnovne koncepte igre. U igri s kovanicom, igrač može ‘spin’ ili okrenuti kovanicu koja će završiti u jednom od dva stanja: ‘glava’ ili ‘pismo’. Ova jednostavna igra može se dodatno proširiti dodavanjem različitih opcija, poput bodovanja ili vremenskih ograničenja. Naša verzija igre bit će jednostavna i usredotočit ćemo se na osnovnu funkcionalnost.

Prvo, trebamo izraditi HTML strukturu naše igre. Stvorit ćemo div element koji će sadržavati kovanicu i gumb za okretanje. Na primjer:

<!DOCTYPE html>
<html lang="hr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Igra s kovanicom</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="coin" class="coin"></div>
<button id="spinButton">Okreni kovanicu</button>
<div id="result"></div>
<script src="script.js"></script>
</body>
</html>

Nakon što smo izradili osnovnu HTML strukturu, sljedeći korak je stilizirati našu igru koristeći CSS. Stiliziranje kovanice i gumba može učiniti igru privlačnijom. U našem style.css datoteci, možemo dodati sljedeći kod:

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-family: Arial, sans-serif;
}

.coin {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: gold;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
}

#spinButton {
    padding: 10px 20px;
    font-size: 16px;
}

#result {
    margin-top: 20px;
    font-size: 20px;
}

Sada kada imamo HTML i CSS, možemo preći na JavaScript. U script.js datoteci, dodajmo funkcionalnost koja će omogućiti igraču da okrene kovanicu. Kada se gumb pritisne, kovanica će se nasumično odabrati da bude ili ‘glava’ ili ‘pismo’. Evo kako možemo to implementirati:

const spinButton = document.getElementById('spinButton');
const resultDiv = document.getElementById('result');

spinButton.addEventListener('click', () => {
    const result = Math.random() > 0.5 ? 'Glava' : 'Pismo';
    resultDiv.innerText = `Rezultat: ${result}`;
});

Ovaj jednostavan JavaScript kod generira nasumični broj između 0 i 1. Ako je broj veći od 0.5, ispisuje ‘Glava’, inače ispisuje ‘Pismo’. Kada igrač pritisne gumb, rezultat će se prikazati na ekranu.

Naša igra s kovanicom je sada završena! Ova jednostavna aplikacija može se dodatno proširiti dodavanjem animacija, više opcija ili čak bodovanja. Igra s kovanicom može biti zabavna ne samo kao igra, već i kao edukativni alat za učenje osnovnih koncepata programiranja. Ovaj projekt može poslužiti kao odlična osnova za daljnje istraživanje JavaScript-a i web razvoja.

U zaključku, igra s kovanicom je jednostavan, ali učinkovit način za učenje osnova JavaScript-a. Možete proširiti ovu igru dodavanjem novih značajki ili pokušati izraditi složenije projekte. Uživajte u programiranju i istraživanju svijeta JavaScript-a!

Was this article helpful?

Yes No

Related Articles

Leave a Comment Cancel