Dice Game
html>
<head>
<title>JavaScript</title>
<style>
#player1,#player2 {
display: inline-block;
width:200px;
height: 140px;
border: 1px solid black;
padding: 5px;
margin: 25px;
text-align: center;
font-size: 7em;
}
#output{
width:550px;
text-align: center;
font-size: 2em;
}
button{
padding:10px;
text-align: center;
width: 550px;
}
</style>
</head>
<body>
<div class="gameArea"></div>
<div id="output"></div>
<div id="player1"></div>
<div id="player2"></div>
<button type="button">Roll</button>
<script>
const button = document.querySelector('button');
const player1 = document.querySelector('#player1');
const player2 = document.querySelector('#player2');
const output = document.querySelector('#output')
button.addEventListener('click',function(){
console.log('works')
let rolls = [roll(6),roll(6)];
let temp;
if(rolls[0]===rolls[1]){
temp ="It is a draw"
}
else if(rolls[0]>rolls[1]){
temp ="Player 1 Wins"
}
else {
temp = 'Player 2 Wins'
}
output.innerHTML = temp;
console.log(rolls)
player1.innerHTML = rolls[0];
player2.innerHTML = rolls[1];
})
function roll(num) {
let rNumber = Math.floor(Math.random() * num) +1
return rNumber;
}
</script>
</html>
This problem might seem a bit longer maybe scarier than my rest of interview questions but it is very very simple.
We start with creating few fields gameArea, output and for player one player two. so we have this parts div fields for the gameArea , for output and for player1 and player2; We can see that we provide class to gameArea; id to player 1 , to player 2, output; But soon you will see how everything goes together.
In this part we create placeholders divs and button; And inside this placeholders have classes and ID’s I know you might think we dont have anythink in our page just
We create variable button and use the document.querySelector(‘button’) we also created player1 = document.querySelector(‘./’) we also created player2 = document.querySelector(‘./’) we also created output = document.querySelector(‘./’)
Now we go to the main topic of this algorithm
So we use button to document.querySelectorAll(‘button’)
We use button. and add addEventListener with arument (click , function()){ click is what kind the button will do. in most cases you will use click; second argument is anonymous without name.
In this part of the problem is statements.
we create variable let rolls to hold [roll(6),roll(6)]
we create a temp => let temp;
Now we have couple of statements. so lets explain; if(rolls[0]===rolls[1]){ temp =”It is a draw” }
First if statement checks if rolls equal my paring to each other
else if(rolls[0]>rolls[1]){
temp ="Player 1 Wins"
}
Second else if statement checks if rolls(0)>rolls(1)
if true => temp(Player 1 Wins)
else {
temp = 'Player 2 Wins'
if false => temp(Player 2 Wins)
}
output.innerHTML = temp;
console.log(rolls)
player1.innerHTML = rolls[0];
player2.innerHTML = rolls[1];
})
function roll(num) {
let rNumber = Math.floor(Math.random() * num) +1
return rNumber;
}
button.addEventListener('click',function(){
let rolls = [roll(6), roll(6)]
We create variavle rolls to hold roll
We aso create temp variable temp
}