Introduction
Every programming language you learn these days make you build something with a random number generator, so here's mine.
Its a simple game with two die, the one to roll the higher value wins.
So lets start.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="./styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower|Lobster&_cacheOverride=1714409135959" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Refresh Me</h1>
<div class="player">
<p>Player 1</p>
<img class="dice1 dice" src="./images/dice6.png" >
</div>
<div class="player">
<p>Player 2</p>
<img class="dice2 dice" src="./images/dice6.png" >
</div>
</div>
<footer>Manmohan P M</footer>
<script src="./index.js"></script>
</body>
</html>
This fairly simple HTML with two divs for each player which are inside a container div.
An h1 tag to show the winner, which by default shows refresh me, which is outside the player divs.
Each player div contains the title for the player and the image of the dice.
At the end there is a footer with my name.
The images are gonna be set to dice 6 by default and will be changed later using Javascript.
External Javascript and CSS and linked in the HTML.
CSS
*{
background-color: #393E46;
}
.container{
text-align: center;
}
h1{
margin: 30px;
font-family: 'Lobster', cursive;
text-shadow: 5px 0 #232931;
font-size: 8rem;
color: #4ECCA3;
}
.player{
display: inline-block;
}
p{
color: #4ECCA3;
font-size: 2rem;
font-family: 'Indie Flower', cursive;
}
footer{
text-align: center;
font-family: 'Indie Flower', cursive;
color: #EEEEEE;
margin-top: 5%;
}
.dice{
margin-left : 20px;
margin-right: 20px;
}
First I set the background colour to a blueish grey.
The h1 is set to have : -
A margin of 30px
cursive font with a shadow
8 rem size and bluish teal color
All text in the container is centered
Each player div is set to inline block so that they can fit on the same line
The p tags used to display player is the same color as the heading, cursive font and a size of 2 rem.
For the footer , the text is center aligned font is cursive color is white and a top margin of 5%.
The dice images have a margin of 20px from the right and left.
JavaScript
var randomNumber1 = Math.floor(Math.random()*6)+1; //1-6
var randomNumber2 = Math.floor(Math.random()*6)+1; //1-6
images=document.querySelectorAll(".dice"); //select dice images
images[0].setAttribute("src","./images/dice"+randomNumber1+".png"); //change the image source
images[1].setAttribute("src","./images/dice"+randomNumber2+".png");
//Who wins
if(randomNumber1>randomNumber2){
document.querySelector("h1").innerText="Player 1 wins!"
}
else if(randomNumber2>randomNumber1){
document.querySelector("h1").innerText="Player 2 wins!"
}
else{
document.querySelector("h1").innerText="Draw"
}
Now lets make the magic happen.
First w make two random numbers one for player 1 and one for player 2.
Then we retrieve all the image tags with the dice class.
We then use the setAttribute method to set the src attribute of the image tag to
./image/dice(random number).png where the random number is concatenated inside.
We can do this as the images are well lablled.
We do this twice for the two players.
Now if the first random number was bigger we change the inner text of the h1 tag to "player 1 wins!".
If the second random number was bigger we change it to "player 2 wins!".
If neither are true we set it to "Draw".
Conclusion
This a simple project that helped me learn random number generators and changing attributes using javascript.
It also helped me learn about retrieving and selecting certain HTML elements.
In the end this changes almost nothing still have a lot to learn and experience.
