یونیکسیک

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

اکتبر 9, 2024

—

توسط

فرید کرمی

در فرانت اند

در مقاله ساخت بازی انفجار توانستیم یک بازی ساده انفجار را بسازیم، در این قسمت قصد داریم با استفاده از کتابخانه Chart.js همان بازی را به شکلی جذاب تر بسازیم.

بخش 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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./style.css" />
</head>
<body>

<div class="container game-container">
    <h1>Crash Gambling</h1>
    <canvas id="multiplierChart" width="400" height="200"></canvas>
    
    <div class="bet-info mt-4">
        <input type="number" id="bet-amount" class="form-control" placeholder="Enter your bet amount" style="max-width: 200px; margin: 0 auto;">
        <button class="btn btn-warning mt-3" id="start-btn">Start Game</button>
        <button class="btn btn-danger mt-3" id="cashout-btn">Cash Out</button>
    </div>

    <div class="game-stats mt-5">
        <h3>Last Multiplier: <span id="last-multiplier">-</span></h3>
        <h3>Your Balance: $<span id="balance">1000.00</span></h3>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="./script.js"></script>
</body>
</html>

بخش CSS

body {
    background-color: #1a1a1a;
    color: white;
    font-family: Arial, sans-serif;
}
.game-container {
    margin-top: 50px;
    text-align: center;
}
canvas {
    background-color: #2c2c2c;
    margin: 0 auto;
    display: block;
}

بخش JavaScript

let currentMultiplier = 1.0;
let interval;
let gameRunning = false;
let explosionTime = Math.random() * 10 + 1;
let cashedOut = false;
let balance = 1000.0;
let lastMultiplier = 0;

const ctx = document.getElementById('multiplierChart').getContext('2d');
const chartData = {
    labels: [],
    datasets: [{
        label: 'Multiplier',
        data: [],
        fill: false,
        borderColor: 'rgb(255, 99, 132)',
        tension: 0.1
    }]
};

const multiplierChart = new Chart(ctx, {
    type: 'line',
    data: chartData,
    options: {
        scales: {
            x: {
                title: {
                    display: true,
                    text: 'Time'
                }
            },
            y: {
                title: {
                    display: true,
                    text: 'Multiplier (x)'
                },
                beginAtZero: true,
                min: 1
            }
        }
    }
});

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

function startGame() {
    if (gameRunning) return;

    let betAmount = parseFloat(document.getElementById("bet-amount").value);
    if (isNaN(betAmount) || betAmount <= 0 || betAmount > balance) {
        alert("Please enter a valid bet amount.");
        return;
    }

    balance -= betAmount;
    updateBalance();

    gameRunning = true;
    cashedOut = false;
    currentMultiplier = 1.0;
    explosionTime = Math.random() * 10 + 1;
    chartData.labels = [];
    chartData.datasets[0].data = [];
    multiplierChart.update();

    let time = 0;
    interval = setInterval(() => {
        currentMultiplier += 0.01;
        time += 0.1;

        chartData.labels.push(time.toFixed(1));
        chartData.datasets[0].data.push(currentMultiplier.toFixed(2));
        multiplierChart.update();

        if (currentMultiplier >= explosionTime) {
            clearInterval(interval);
            gameRunning = false;

            if (!cashedOut) {
                alert("Boom! You lost.");
                lastMultiplier = currentMultiplier.toFixed(2);
                updateStats();
            }
        }
    }, 100);
}

function cashOut() {
    if (!gameRunning || cashedOut) return;

    clearInterval(interval);
    gameRunning = false;
    cashedOut = true;

    let betAmount = parseFloat(document.getElementById("bet-amount").value);
    let winnings = betAmount * currentMultiplier;
    balance += winnings;
    lastMultiplier = currentMultiplier.toFixed(2);
    updateBalance();
    updateStats();

    alert(`You cashed out with ${winnings.toFixed(2)}!`);
}

function updateBalance() {
    document.getElementById("balance").textContent = balance.toFixed(2);
}

function updateStats() {
    document.getElementById("last-multiplier").textContent = lastMultiplier;
}

دیدگاه‌ها

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