Skip to content
Sign upLog in
← Back to Community

How to make a risk game with HTML

Profile icon
InvisibleOneHacker

How to build a simple risk game!

First, create an HTML/JS/CSS repl. Then, in the HTML, make a

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!

Voters
Profile icon
Ethan-PaulPaul
Profile icon
sherget15
Profile icon
theodenB
Profile icon
techde
Profile icon
InvisibleOne
Comments
hotnewtop
Profile icon
BethanyImlay

Thanks

Profile icon
techde

rlly good tut!

Profile icon
InvisibleOne

Thanks

@techde

Profile icon
DynamicSquid

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

Profile icon
InvisibleOne

But that would be being an actual smart person!

@DynamicSquid