Skip to content

Instantly share code, notes, and snippets.

@pengjunp

pengjunp/index.html

Created June 8, 2016 18:04
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save pengjunp/82c75f5b2cf9b64c5e0e52059e4584dc to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save pengjunp/82c75f5b2cf9b64c5e0e52059e4584dc to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. pengjunp created this gist Jun 8, 2016.
    25 changes: 25 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@
    <!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>
    105 changes: 105 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,105 @@
    $(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();
    });