<body>
<header class="div-header">
<h1>Are you ready?</h1>
</header>
<main>
<div class="dice-container">
<div class="p1-die first-player">
<div class="number" id="p1-1"> <p> </p> </div>
<div class="number" id="p1-2"> <p> </p> </div>
<div class="number" id="p1-3"> <p> </p> </div>
<div class="number" id="p1-4"> <p> </p> </div>
<div class="number" id="p1-5"> <p> </p> </div>
<div class="number" id="p1-6"> <p> </p> </div>
<div class="number" id="p1-7"> <p> </p> </div>
<div class="number" id="p1-8"> <p> </p> </div>
<div class="number" id="p1-9"> <p> </p> </div>
</div>
<h2 class="player-1-text" id="player-1-text">Player 1</h2>
<div class="p1-die second-player">
<div class="number" id="p2-1"> <p> </p> </div>
<div class="number" id="p2-2"> <p> </p> </div>
<div class="number" id="p2-3"> <p> </p> </div>
<div class="number" id="p2-4"> <p> </p> </div>
<div class="number" id="p2-5"> <p> </p> </div>
<div class="number" id="p2-6"> <p> </p> </div>
<div class="number" id="p2-7"> <p> </p> </div>
<div class="number" id="p2-8"> <p> </p> </div>
<div class="number" id="p2-9"> <p> </p> </div>
</div>
<h2 class="player-2-text" id="player-2-text">Player 2</h2>
</div>
</div>
</main>
<div class="div-results">
<button class="roll-btn" onClick=newPlay()> Roll it! </button>
</div>
</body>/****Header****/
h1{
font-family: 'Permanent Marker', cursive;
font-size:4rem;
text-align:center;
}
h2{
font-family: 'Permanent Marker', cursive;
}
/********DICE******/
.dice-container{
display:grid;
margin-top: 25px;
grid-template-rows: 2fr 1fr;
grid-template-columns: 1fr 1fr;
grid-gap: 50px;
max-width: 500px;
margin: 25px auto;
place-items:center;
}
.p1-die{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
width: 150px;
height: 150px;
place-items:center;
border-style:solid;
border-radius:10px;
}
.p1-die p{
font-size: 3em;
margin:0;
}
.first-player{
background: linear-gradient(to right, gray 1%, white 10%, white 90%, gray);
border-color: gray;
}
.player-1-text{
grid-column: 1/2;
grid-row: 2/3;
}
.second-player{
background: linear-gradient(to right, gray 1%, #7FB285 10%, #7FB285 90%, gray);
border-color: gray;
}
.p2-die p{
font-size: 3em;
margin:0;
}
/********Div-results*****/
.div-results{
display:flex;
justify-content:center;
}
.roll-btn{
width:150px;
height:150px;
border-radius:50%;
background: radial-gradient(farthest-side at 80% 20%, #F4998D, #C91700);
font-family: 'Permanent Marker', cursive;
font-size: 2rem;
outline: none;
}
/*****Responsive****/
@media (max-width: 400px){
.dice-container{
display:grid;
place-items:center;
text-align:center;
grid-gap: 25px;
margin: 25px auto 0 auto;
grid-template-rows:1fr 1fr;
}
.p1-die{
width:100px;
height:100px;
}
h1{
font-size: 2rem;
}
}var p1Result = 0;
var p2Result = 0;
function newPlay() {
for (var i = 1; i < 10; i++) {
var idElement = "p1-" + i;
var idElement2 = "p2-" + i;
document.getElementById(idElement).innerHTML = "";
document.getElementById(idElement2).innerHTML = "";
}
p1Result = rollDice();
switch (p1Result) {
case 1:
document.getElementById("p1-5").innerHTML = "🔴";
break;
case 2:
document.getElementById("p1-3").innerHTML = "🔴";
document.getElementById("p1-7").innerHTML = "🔴";
break;
case 3:
document.getElementById("p1-3").innerHTML = "🔴";
document.getElementById("p1-5").innerHTML = "🔴";
document.getElementById("p1-7").innerHTML = "🔴";
break;
case 4:
document.getElementById("p1-1").innerHTML = "🔴";
document.getElementById("p1-3").innerHTML = "🔴";
document.getElementById("p1-7").innerHTML = "🔴";
document.getElementById("p1-9").innerHTML = "🔴";
break;
case 5:
document.getElementById("p1-1").innerHTML = "🔴";
document.getElementById("p1-3").innerHTML = "🔴";
document.getElementById("p1-5").innerHTML = "🔴";
document.getElementById("p1-7").innerHTML = "🔴";
document.getElementById("p1-9").innerHTML = "🔴" ;
break;
case 6:
document.getElementById("p1-1").innerHTML = "🔴";
document.getElementById("p1-3").innerHTML = "🔴";
document.getElementById("p1-4").innerHTML = "🔴";
document.getElementById("p1-6").innerHTML = "🔴";
document.getElementById("p1-7").innerHTML = "🔴";
document.getElementById("p1-9").innerHTML = "🔴";
break;
}
p2Result = rollDice();
switch (p2Result) {
case 1:
document.getElementById("p2-5").innerHTML = "🔴";
break;
case 2:
document.getElementById("p2-3").innerHTML = "🔴";
document.getElementById("p2-7").innerHTML = "🔴";
break;
case 3:
document.getElementById("p2-3").innerHTML = "🔴";
document.getElementById("p2-5").innerHTML = "🔴";
document.getElementById("p2-7").innerHTML = "🔴";
break;
case 4:
document.getElementById("p2-1").innerHTML = "🔴";
document.getElementById("p2-3").innerHTML = "🔴";
document.getElementById("p2-7").innerHTML = "🔴";
document.getElementById("p2-9").innerHTML = "🔴";
break;
case 5:
document.getElementById("p2-1").innerHTML = "🔴";
document.getElementById("p2-3").innerHTML = "🔴";
document.getElementById("p2-5").innerHTML = "🔴";
document.getElementById("p2-7").innerHTML = "🔴";
document.getElementById("p2-9").innerHTML = "🔴";
break;
case 6:
document.getElementById("p2-1").innerHTML = "🔴";
document.getElementById("p2-3").innerHTML = "🔴";
document.getElementById("p2-4").innerHTML = "🔴";
document.getElementById("p2-6").innerHTML = "🔴";
document.getElementById("p2-7").innerHTML = "🔴";
document.getElementById("p2-9").innerHTML = "🔴";
break;
}
var winner = whoWon();
}
function rollDice() {
result = math.floor(math.random() * 6 + 1);
return result;
}
function whoWon(){
if (p1Result == p2Result) {
document.getElementById("player-1-text").innerHTML = "It's a draw";
document.getElementById("player-2-text").innerHTML = "It's a draw";
} else if (p1Result < p2Result){
document.getElementById("player-2-text").innerHTML = "Player 2 Wins!";
document.getElementById("player-1-text").innerHTML = "Player 1 Loses!";
}
else {
document.getElementById("player-2-text").innerHTML = "Player 2 Loses!";
document.getElementById("player-1-text").innerHTML = "Player 1 Wins!";
}
}
External CSS
This Pen doesn't use any external CSS resources.