یونیکسیک

ساخت بازی انفجار

اکتبر 9, 2024

—

توسط

فرید کرمی

در فرانت اند

در این جا می خواهیم یکی از بازی های معروف سایت های شرط بندی را با هم پیاده سازی کنیم تا ببینید تنها با تغییرات ساده می توانند کاری کنند که شما همیشه بازنده باشید.

بخش HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Crash Gambling</title>
    <link rel="stylesheet" href="./style.css" />
</head>
<body>
    <div class="game-container">
        <h1>Explosion Game</h1>
        <div class="progress-bar">
            <div class="progress" id="progress"></div>
        </div>
        <div class="multiplier" id="multiplier">1.00x</div>
        <input type="number" id="bet-amount" placeholder="Enter Bet Amount">
        <button id="start-btn">Start</button>
        <button id="cashout-btn">Cash Out</button>
    </div>

    <script src="./script.js"></script>
</body>
</html>

بخش CSS

body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #282c34;
    color: white;
}
.game-container {
    margin: 50px auto;
    width: 300px;
    padding: 20px;
    background-color: #333;
    border-radius: 8px;
}
.progress-bar {
    width: 100%;
    height: 30px;
    background-color: #444;
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 20px;
}
.progress {
    height: 100%;
    width: 0%;
    background-color: #4caf50;
    border-radius: 15px;
}
.multiplier {
    font-size: 24px;
    margin-bottom: 10px;
}
button {
    padding: 10px 20px;
    background-color: #4caf50;
    border: none;
    color: white;
    cursor: pointer;
    margin: 5px;
    border-radius: 5px;
}
input {
    padding: 10px;
    width: 80%;
    margin-bottom: 10px;
    border-radius: 5px;
    border: none;
}

بخش JavaScript

let currentMultiplier = 1.0;
let interval;
let gameRunning = false;
let explosionTime = Math.random() * 10 + 1;

document.getElementById("start-btn").addEventListener("click", startGame);
document.getElementById("cashout-btn").addEventListener("click", cashOut);

function startGame() {
    if (gameRunning) return;
    gameRunning = true;
    currentMultiplier = 1.0;
    document.getElementById("multiplier").textContent = `${currentMultiplier.toFixed(2)}x`;
    
    interval = setInterval(() => {
        currentMultiplier += 0.01;
        document.getElementById("multiplier").textContent = `${currentMultiplier.toFixed(2)}x`;
        document.getElementById("progress").style.width = `${(currentMultiplier * 10)}%`;

        if (currentMultiplier >= explosionTime) {
            clearInterval(interval);
            gameRunning = false;
            alert("Boom! Game over.");
        }
    }, 100);
}

function cashOut() {
    if (!gameRunning) return;
    clearInterval(interval);
    gameRunning = false;
    let betAmount = parseFloat(document.getElementById("bet-amount").value);
    let winnings = betAmount * currentMultiplier;
    alert(`You cashed out with ${winnings.toFixed(2)}!`);
}

دیدگاه‌ها

دیدگاهتان را بنویسید لغو پاسخ