Scribd
Upload
7 views6 pages

Dasda

The document outlines a Gashapon Machine Game, consisting of HTML, CSS, and JavaScript components. It features a user interface for players to place bets on colored balls, manage their balance, and view potential earnings. The JavaScript logic handles game mechanics, including ball selection, winning conditions, and balance updates.

Uploaded by

mihayaylaci
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
7 views6 pages

Dasda

The document outlines a Gashapon Machine Game, consisting of HTML, CSS, and JavaScript components. It features a user interface for players to place bets on colored balls, manage their balance, and view potential earnings. The JavaScript logic handles game mechanics, including ball selection, winning conditions, and balance updates.

Uploaded by

mihayaylaci
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 6

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gashapon Machine Game</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="game-container">
<div class="machine">
<img src="https://i.postimg.cc/1gNjxFTF/gashpon-machine.png" alt="Gashapon
Machine" class="gashapon-image">
</div>

<div class="controls">
<h1 style="color: #ffcc00;">Gashapon Game</h1>
<div class="balance-display">Balance: $<span id="balance">1000.00</span></div>

<div>
<label style="color: #cc0000;">Red Balls:</label>
<input type="number" id="redCount" min="1" max="13" value="5">
</div>
<div>
<label style="color: #3366cc;">Blue Balls:</label>
<input type="number" id="blueCount" min="1" max="13" value="5">
</div>
<div>
<label style="color: #ffcc00;">Yellow Balls:</label>
<input type="number" id="yellowCount" min="1" max="13" value="5">
</div>

<div class="betting">
<p>Choose Your Bet:</p>
<input type="number" id="betAmount" value="100" step="10">
<select id="betColor">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>
</div>

<button id="startGame">Start Game</button>


<button id="continueGame" style="display: none;">Continue</button>
<button id="cashOut" style="display: none;">Cash Out</button>

<div class="info">
<p>Current Multiplier: <span id="multiplier">1.00</span>x</p>
<p>Potential Earnings: $<span id="potentialEarnings">0.00</span></p>
<p id="message"></p>
<p id="ballColor" style="font-size: 14px;"></p> <!-- Added ball color display
-->
</div>
</div>
</div>

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

css
* {
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}

body {
background-color: #3a3a3a; /* Matte grey background */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
color: #fff;
}

.game-container {
display: flex;
gap: 30px;
}

.machine {
width: 300px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}

.gashapon-image {
width: 100%;
height: auto;
}

.controls {
width: 300px;
padding: 20px;
background: rgba(0, 0, 0, 0.3);
border-radius: 10px;
}

button {
width: 100%;
padding: 10px;
margin: 10px 0;
border: none;
border-radius: 5px;
background-color: #28a745;
color: #fff;
font-size: 16px;
cursor: pointer;
}

button:disabled {
background-color: #6c757d;
cursor: not-allowed;
}

.info {
margin-top: 10px;
}

.balance-display {
font-size: 18px;
margin-bottom: 15px;
}

js
let balance = 1000;
let multiplier = 1;
let betAmount = 0;
let betColor = "";
let redCount = 5;
let blueCount = 5;
let yellowCount = 5;
let totalBalls = 15;
let remainingBalls = totalBalls;
let baseMultiplier = 1.5; // Base multiplier to adjust probabilities

const balanceDisplay = document.getElementById("balance");


const multiplierDisplay = document.getElementById("multiplier");
const potentialEarningsDisplay = document.getElementById("potentialEarnings");
const messageDisplay = document.getElementById("message");
const ballColorDisplay = document.getElementById("ballColor"); // New element for
ball color
const startGameButton = document.getElementById("startGame");
const continueGameButton = document.getElementById("continueGame");
const cashOutButton = document.getElementById("cashOut");

// Initial balance display


balanceDisplay.innerText = balance.toFixed(2);

// Event listeners for button actions


startGameButton.addEventListener("click", startGame);
continueGameButton.addEventListener("click", continueGame);
cashOutButton.addEventListener("click", cashOut);

function startGame() {
betAmount = parseFloat(document.getElementById("betAmount").value);
betColor = document.getElementById("betColor").value;
redCount = parseInt(document.getElementById("redCount").value);
blueCount = parseInt(document.getElementById("blueCount").value);
yellowCount = parseInt(document.getElementById("yellowCount").value);
// Check if the total number of balls is 15
if (redCount + blueCount + yellowCount !== totalBalls) {
messageDisplay.innerText = "Total number of balls must be 15!";
return;
}

// Check if the player has enough balance


if (balance < betAmount) {
messageDisplay.innerText = "Insufficient balance!";
return;
}

// Subtract the bet amount from the balance


balance -= betAmount;
balanceDisplay.innerText = balance.toFixed(2);

// Disable input elements after starting the game


document.getElementById("redCount").disabled = true;
document.getElementById("blueCount").disabled = true;
document.getElementById("yellowCount").disabled = true;
document.getElementById("betAmount").disabled = true;
document.getElementById("betColor").disabled = true;
startGameButton.disabled = true;

// Calculate the multiplier based on the number of selected balls and probability
calculateMultiplier();

// Start the game with the selected bet color


let ball = getRandomBall();

// Check if the selected color matches the drawn ball


if (ball === betColor) {
messageDisplay.innerText = `You win! You got a ${ball} ball.`;
ballColorDisplay.innerText = `Ball Color: ${ball.charAt(0).toUpperCase() +
ball.slice(1)}`; // Show ball color
balance += betAmount * multiplier;
multiplier *= 1.1; // Increase multiplier after winning
remainingBalls -= 1;
updateUI();
showContinueAndCashOut();
} else {
messageDisplay.innerText = `You lose. You got a ${ball} ball.`;
ballColorDisplay.innerText = `Ball Color: ${ball.charAt(0).toUpperCase() +
ball.slice(1)}`; // Show ball color
remainingBalls -= 1;
updateUI();
resetGameControls(); // Reset controls if player loses
}
}

function continueGame() {
let ball = getRandomBall();

// Check if the selected color matches the drawn ball


if (ball === betColor) {
messageDisplay.innerText = `You win! You got a ${ball} ball.`;
ballColorDisplay.innerText = `Ball Color: ${ball.charAt(0).toUpperCase() +
ball.slice(1)}`; // Show ball color
balance += betAmount * multiplier;
multiplier *= 1.1; // Increase multiplier after winning
remainingBalls -= 1;
updateUI();
} else {
messageDisplay.innerText = `You lose. You got a ${ball} ball.`;
ballColorDisplay.innerText = `Ball Color: ${ball.charAt(0).toUpperCase() +
ball.slice(1)}`; // Show ball color
balance -= betAmount;
remainingBalls -= 1;
updateUI();
resetGameControls(); // Reset controls if player loses
}
}

function cashOut() {
messageDisplay.innerText = `You cashed out. You earned $${(betAmount *
multiplier).toFixed(2)}!`;
balance += betAmount * multiplier;
updateUI();
resetGameControls(); // Reset controls after cashing out
}

function getRandomBall() {
// Generate a random ball from the available balls
const balls = Array(redCount).fill("red")
.concat(Array(blueCount).fill("blue"))
.concat(Array(yellowCount).fill("yellow"));

const randomIndex = Math.floor(Math.random() * balls.length);


return balls[randomIndex];
}

function calculateMultiplier() {
// Calculate multiplier based on the probability of winning
let selectedBallsCount = 0;

if (betColor === "red") selectedBallsCount = redCount;


else if (betColor === "blue") selectedBallsCount = blueCount;
else if (betColor === "yellow") selectedBallsCount = yellowCount;

// Calculate the probability of winning and adjust multiplier


let probability = selectedBallsCount / totalBalls;
multiplier = (1 / probability) * baseMultiplier;

// Cap the multiplier to avoid excessively large values


if (multiplier > 10) multiplier = 10;
}

function updateUI() {
balanceDisplay.innerText = balance.toFixed(2);
multiplierDisplay.innerText = multiplier.toFixed(2);
potentialEarningsDisplay.innerText = (betAmount * multiplier).toFixed(2);
}

function resetGameControls() {
// Reset the game controls and state
messageDisplay.innerText = "Game Over. You lost!";
// Enable the controls for the next game
startGameButton.disabled = false;
document.getElementById("redCount").disabled = false;
document.getElementById("blueCount").disabled = false;
document.getElementById("yellowCount").disabled = false;
document.getElementById("betAmount").disabled = false;
document.getElementById("betColor").disabled = false;

// Reset the multiplier and remaining balls for the next game
multiplier = 1;
remainingBalls = totalBalls;

// Hide the continue and cash-out buttons


continueGameButton.style.display = "none";
cashOutButton.style.display = "none";
}

function showContinueAndCashOut() {
// Show the buttons to continue or cash out
continueGameButton.style.display = "inline-block";
cashOutButton.style.display = "inline-block";
}

You might also like