Learn to Code via Tutorials on Repl.it!

← Back to all posts
How to make a risk game with HTML
h
InvisibleOne (2974)

How to build a simple risk game!

First, create an HTML/JS/CSS repl. Then, in the HTML, make a <div></div> to hold what we are going to make. create a tag to display the score and give it an ID so we can change the value it holds later

<p id=’score’>Cash: 0</p>

Now, we’ll create some buttons for the user to click on

<button onclick=’one()’>100</button>
<button onclick=’two()’>200</button>
<button onclick=’three()’>300</button>
<button onclick=’four()’>400</button>
<button onclick=’five()’>500</button>

Now we should be finished with the HTML
In the JS, let’s first make a variable to hold the score:

let cash = 0;

Then, let’s make a function to get a random number:

function random_item(items) {
  return items[Math.floor(Math.random()*items.length)];    
}

Next, we’ll make a function that happens when the button is clicked:

function one() {
    let list = [1,1,1,1,2,1]; //we’ll pick a random number from this list to see if they get the money
    let win = random_item(list);
    if (win == 1) { //we’ll check if win is equal to one of the winning numbers
        cash += 100; // if it is we’ll award the player 100 points
    } else { //and if it isn’t we’ll take away all their points
        cash = 0;
    }
    document.getElementById('score').innerHTML = "Cash: " + cash; /then we’ll display the data using the id that we put in the <p> tag
}

Then make more of these functions for each one of the buttons we made.
Check to see if everything works, if it does, then great, if it doesn’t, make sure that ‘onclick’ in the button tag is set to the right function, and that all the variables in the JS are spelled correctly.
Now the game is done, however it doesn’t look so great so we can style it in the CSS

body {
    text-align: center; /*Align everything to the center*/
    font-family: Courier New; /*set the font and size*/
    font-size: 20px;
}
button { /*make the buttons look nice by adding some padding, a cool font, different background color and border*/
    padding: 15px;
    font-family: impact;
    background-color: white;
    border: solid 3px rgb(0, 225, 255);
    border-radius: 5px;
}
button:hover { /*A cool animations for fun*/
    animation: pulse 1s infinite;
}
div { /*A box shadow to make it look better*/
    border-radius: 15px;
    box-shadow: 3px 3px  5px grey;
    padding: 80px 20px;
}
@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(227, 226, 226, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(103, 103, 103, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(216, 215, 215, 0);
    }
}

And then you are done!

Comments
hotnewtop
DynamicSquid (4912)

Instead of an array of numbers, can't you just generate a random number?

InvisibleOne (2974)

But that would be being an actual smart person! @DynamicSquid