Skip to content

Addition of RiskyStakes (my entry) #156

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions entries.js
Original file line number Diff line number Diff line change
Expand Up @@ -609,4 +609,11 @@ const entries = [
author: "Rupesh Soni",
github: "rsoni124"
},
{
title: "RiskyStakes",
filename: "RiskyStakes.html",
description: "A game of careful financial risk and management, where an account you deposit money in randomly goes up and down each turn.",
author: "96",
github: "ma007rio"
},
];
211 changes: 211 additions & 0 deletions entries/RiskyStakes.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,211 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RiskyStakes - The Game</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 0;
}
header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 1em 0;
}
main {
max-width: 800px;
margin: 2em auto;
padding: 2em;
background: white;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.log {
background: #f9f9f9;
padding: 1em;
border-radius: 8px;
height: 200px;
overflow-y: auto;
margin-bottom: 1em;
border: 1px solid #ddd;
}
.actions {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 1em;
}
.action-group {
display: flex;
align-items: center;
gap: 0.5em;
margin-bottom: 1em;
}
button {
padding: 0.75em 1.5em;
font-size: 1em;
border-radius: 5px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
input {
padding: 0.5em;
font-size: 1em;
border: 1px solid #ccc;
border-radius: 5px;
width: 150px;
}
#game-over {
color: red;
font-weight: bold;
font-size: 1.5em;
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<header>
<h1>RiskyStakes - a game by 96</h1>
<p>Deposit, withdraw, and navigate random events to win!</p>
</header>
<main>
<div id="game-info">
<p id="turn-info">Turn #1: You have $100,000 in your wallet, $0 deposited in your account.</p>
</div>
<div class="log" id="event-log">
<p>Welcome to RiskyStakes! Your journey starts here.</p>
</div>
<div class="actions">
<div class="action-group">
<input type="number" id="amount-input" placeholder="Enter amount">
<button id="deposit-btn">Deposit</button>
<button id="withdraw-btn">Withdraw</button>
<button id="skip-btn">Skip</button>
</div>
</div>
<div id="game-over" style="display: none;">GAME OVER</div>
</main>
<script>
let playerMoney = 100000;
let depositedMoney = 0;
let turnNum = 1;

const turnInfo = document.getElementById('turn-info');
const eventLog = document.getElementById('event-log');
const depositBtn = document.getElementById('deposit-btn');
const withdrawBtn = document.getElementById('withdraw-btn');
const skipBtn = document.getElementById('skip-btn');
const amountInput = document.getElementById('amount-input');
const gameOverMsg = document.getElementById('game-over');

function logEvent(message) {
const p = document.createElement('p');
p.textContent = message;
eventLog.appendChild(p);
eventLog.scrollTop = eventLog.scrollHeight;
}

function updateTurnInfo() {
turnInfo.textContent = `Turn #${turnNum}: You have $${playerMoney.toLocaleString()} in your wallet, $${depositedMoney.toLocaleString()} deposited in your account.`;
}

function checkGameOver() {
if (playerMoney === 0 && depositedMoney === 0) {
gameOverMsg.style.display = 'block';
depositBtn.disabled = true;
withdrawBtn.disabled = true;
skipBtn.disabled = true;
}
}

function handleEvent() {
const eventNum = Math.floor(Math.random() * 6) + 1;
switch (eventNum) {
case 1:
depositedMoney *= 2;
logEvent('EVENT: Your account money doubled due to a thank-you from the bank!');
break;
case 2:
depositedMoney = Math.floor(depositedMoney / 2);
logEvent('EVENT: Bank robbery! Half of your account money is gone!');
break;
case 3:
depositedMoney = 0;
logEvent('EVENT: All your account money was automatically used to pay off a loan!');
break;
case 4:
depositedMoney += 5000;
logEvent('EVENT: You received a gift of $5,000 for your account!');
break;
case 5:
depositedMoney *= 100;
logEvent('EVENT: Your account money suddenly multiplied by a hundred???');
break;
case 6:
depositedMoney -= 5000;
logEvent('EVENT: $5,000 of your account money was automatically used to pay property taxes.');
break;
default:
logEvent('ERROR: Unknown event occurred.');
}

if (depositedMoney < 0) depositedMoney = 0;
}

depositBtn.addEventListener('click', () => {
const depositValue = parseInt(amountInput.value, 10);

if (depositValue > 0 && depositValue <= playerMoney) {
depositedMoney += depositValue;
playerMoney -= depositValue;
logEvent(`You deposited $${depositValue.toLocaleString()} into your account.`);
} else {
logEvent('Invalid deposit amount. Turn skipped.');
}

handleEvent();
turnNum++;
updateTurnInfo();
checkGameOver();
});

withdrawBtn.addEventListener('click', () => {
const withdrawValue = parseInt(amountInput.value, 10);

if (withdrawValue > 0 && withdrawValue <= depositedMoney) {
depositedMoney -= withdrawValue;
playerMoney += withdrawValue;
logEvent(`You withdrew $${withdrawValue.toLocaleString()} from your account.`);
} else {
logEvent('Invalid withdrawal amount. Turn skipped.');
}

handleEvent();
turnNum++;
updateTurnInfo();
checkGameOver();
});

skipBtn.addEventListener('click', () => {
logEvent('You chose to skip your turn.');
handleEvent();
turnNum++;
updateTurnInfo();
checkGameOver();
});

updateTurnInfo();
</script>
</body>
</html>