Skip to content

Instantly share code, notes, and snippets.

@pengjunp

pengjunp/index.html

Created June 8, 2016 18:04
Show Gist options
  • Save pengjunp/82c75f5b2cf9b64c5e0e52059e4584dc to your computer and use it in GitHub Desktop.
Save pengjunp/82c75f5b2cf9b64c5e0e52059e4584dc to your computer and use it in GitHub Desktop.
Download ZIP
JS betting game
Raw
index.html
<!doctype html>
<head>
<title>JS Betting Game</title>
<script src="jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<canvas id="let-it-rain" style="width:100%; height:100%; display:none;"></canvas>
<h1>JS Betting Game</h1>
<div id="holy-shit-this-is-a-div">
<div>
<p>Your bankroll: $<span id="bank" data-bank="100">100</span></p>
</div>
<div>
<label>Your guess</label>
<input type="text" name="guess">
&nbsp;
<label>Your bet</label>
<input type="text" name="bet">
<button id="bet-btn">Bet!</button>
</div>
</div>
</body>
</html>
Raw
script.js
$(document).ready(function(){
$('#bet-btn').click(function(){
var bankroll = parseInt($('#bank').data('bank'));
var guess = parseInt($('input[name=guess]').val().trim());
var bet = parseInt($('input[name=bet]').val().trim());
var random = Math.floor((Math.random() * 10) + 1);
if (bet > bankroll ) {
alert('You don\'t have enough cash homie!');
}
else if (isNaN(guess) || isNaN(bet)) {
alert('Fill in your guess and bet dude...');
}
else if (bet > 10 || bet < 5) {
alert('Your bet has to be $5 to $10.');
}
else {
game();
}
function game() {
if (guess == random) {
update(+bet);
}
else if (bet == random + 1 || bet == random - 1) {
alert('Close! The number is ' + random);
}
else {
update(-bet);
}
}
function update(bet) {
// update the bankroll
bankroll += bet
// prompt user the answer
if (bet > 0) {
$('#let-it-rain').fadeIn().delay(3000).fadeOut(400, 'swing', function(){ alert('Bingo! The number is ' + random); });
// alert('Bingo! The number is ' + random);
} else {
alert('Not even close! The number is ' + random);
}
// check if the game is over
if (bankroll <= 0) {
var restart = confirm('Game Over! Restart?');
if (restart == true) {
$('#bank').html(100).data('bank', 100);
} else {
$('#bank').html(0).data('bank', 0);
// $('#bet-btn').attr( "disabled", true);
}
} else {
$('#bank').html(bankroll).data('bank', bankroll);
}
}
});
var ctx;
var imgDrops;
var x = 0;
var y = 0;
var noOfDrops = 300;
var fallingDrops = [];
var width = $(window).width();
var height = $(window).height();
function setup() {
// var canvas = $('#let-it-rain');
canvas = document.getElementById("let-it-rain");
if (canvas.getContext) {
ctx = canvas.getContext('2d');
setInterval(draw, 36);
for (var i = 0; i < noOfDrops; i++) {
var fallingDr = new Object();
fallingDr["image"] = new Image();
fallingDr.image.src = 'http://www.igameordie.com/coinsm.png';
fallingDr["x"] = Math.random() * width;
fallingDr["y"] = Math.random() * 5;
fallingDr["speed"] = 3 + Math.random() * 5;
fallingDrops.push(fallingDr);
}
}
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i=0; i< noOfDrops; i++)
{
ctx.drawImage (fallingDrops[i].image, fallingDrops[i].x, fallingDrops[i].y, 20, 20); //The rain drop
fallingDrops[i].y += fallingDrops[i].speed; //Set the falling speed
if (fallingDrops[i].y > height) { //Repeat the raindrop when it falls out of view
fallingDrops[i].y = -50; //Account for the image size
fallingDrops[i].x = Math.random() * width; //Make it appear randomly along the width
}
}
}
setup();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment