<div class="popuptext hiderules">
<h1>Pig Game</h1>
<ul>
<li>The game has 2 players, playing in rounds</li>
<li>In each turn, a player rolls a dice as many times as he wishes. Each result get added to his round score</li>
<li>BUT, if the player rolls a 1, all his round score gets lost. After that, it's the next player's turn</li>
<li>The player can choose to 'Hold', which means that his round score gets added to his global score. After that, it's the next player's turn</li>
<li>The first player to reach 20 points on global score wins the game</li>
</ul>
<button class="btn-close">I understand, let's play!</button>
</div>
<div class="top-buttons">
<button class="btn-rules">Rules</button>
<button class="btn-new">New game</button>
</div>
<div class="grid-container">
<div class="player-0-panel active">
<div class="player-name" id="name-0">Player 1</div>
<div class="player-score" id="score-0">0</div>
<div class="player-controls">
<button class="btn-roll"><i class="fas fa-dice"></i>Roll dice</button><br />
<button class="btn-hold"><i class="fas fa-hand-holding"></i>Hold</button>
</div>
<div class="player-current-box">
<div class="player-current-label">Current</div>
<div class="player-current-score" id="current-0">0</div>
</div>
</div>
<div class="player-1-panel">
<div class="player-name" id="name-1">Player 2</div>
<div class="player-score" id="score-1">0</div>
<div class="player-current-box">
<div class="player-current-label">Current</div>
<div class="player-current-score" id="current-1">0</div>
</div>
</div>
</div>
<div class="dice">
<div class="cube animation-1">
<div class="cube_face_1">•</div>
<div class="cube_face_2">•  •</div>
<div class="cube_face_3">  •<br>  •<br>•</div>
<div class="cube_face_4">•  •<br><br>•  •</div>
<div class="cube_face_5">•  •<br> •<br>•  •</div>
<div class="cube_face_6">•  •<br>•  •<br>•  •</div>
</div>
</div>/**********************************************
*** GENERAL
**********************************************/
body {
font-family: Lato;
font-weight: 300;
color: #555;
}
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
.top-buttons {
width: 223px;
position: relative;
left: 50%;
transform: translateX(-50%);
margin: 20px 0 20px 0;
}
button {
color: #555;
background: none;
border: none;
font-family: Lato;
font-size: 20px;
text-transform: uppercase;
cursor: pointer;
font-weight: 300;
}
button:focus {
outline: none;
}
.btn-rules, .btn-new, .btn-close {
border: 2px solid #73AD21;
border-radius: 25px;
}
.btn-rules:hover, .btn-new:hover, .btn-close:hover {
border: 2px solid #EB4D4D;
}
.btn-rules {
margin-right: 20px;
}
.hiderules {
display: none;
}
.showrules {
display: block;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
.popuptext {
width: 100%;
height: 100%;
position: absolute;
z-index: +10000;
background: #FFF;
}
.grid-container {
display:grid;
grid-template-columns: auto auto;
}
.displaynone {
display: none;
}
/**********************************************
*** PLAYERS
**********************************************/
.active {
border: 2px solid #73AD21;
border-radius: 25px;
}
.player-name {
font-size: 26px;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 300;
margin-top: 10px;
position: relative;
}
.player-name::after {
content: "\2022";
font-size: 47px;
color: #FFF;
position: relative;
top: 4px;
}
.active .player-name::after {
color: #EB4D4D;
}
.player-score {
text-align: center;
font-size: 80px;
font-weight: 100;
color: #EB4D4D;
margin-bottom: 122px;
}
.player-controls {
width: 100px;
position: absolute;
top: 220px;
margin-right: 10px;
}
.player-controls-right {
right: 0px;
}
.disable-controls {
z-index:-10000;
}
.grey {
color:#CCC;
}
i {
color: #EB4D4D;
display: inline-block;
margin-right: 15px;
font-size: 32px;
line-height: 1;
vertical-align: text-top;
margin-top: -4px;
transition: margin 0.3s;
}
button:hover i { margin-right: 20px; }
.player-current-box {
border-radius: 25px;
border: 1px solid #EB4D4D;
position: relative;
width: 30%;
left: 50%;
transform: translateX(-50%);
margin-bottom: 10px;
padding: 12px;
text-align: center;
display: none;
}
.player-current-label {
text-transform: uppercase;
margin-bottom: 10px;
font-size: 12px;
color: #222;
}
.player-current-score {
font-size: 30px;
}
.active .player-current-box {
display: block;
}
.winner .player-name { color: #EB4D4D; }
/**********************************************
*** DICE
**********************************************/
.dice {
width: 100px;
height: 100px;
position: absolute;
top: 212px;
left: 50%;
transform: translateX(-50%);
margin: 0;
box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.10);
}
@keyframes spin {
0% { transform: translateZ(-50px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
16% { transform: translateZ(-50px) rotateX(180deg) rotateY(180deg) rotateZ(0deg); }
33% { transform: translateZ(-50px) rotateX(360deg) rotateY(90deg) rotateZ(180deg); }
50% { transform: translateZ(-50px) rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
66% { transform: translateZ(-50px) rotateX(180deg) rotateY(360deg) rotateZ(270deg); }
83% { transform: translateZ(-50px) rotateX(270deg) rotateY(180deg) rotateZ(180deg); }
100% { transform: translateZ(-50px) rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}
.cube {
width: 100px;
height: 100px;
position: relative;
transform-style: preserve-3d;
transform: translateZ(-50px);
transition: transform 0.8s;
}
.animation-1 {animation: spin 50s infinite linear;}
.animation-2 {animation: spin 1.6s infinite linear;}
.cube.show-1 { transform: translateZ(-50px) rotateY(0deg);}
.cube.show-2 { transform: translateZ(-50px) rotateY(-90deg);}
.cube.show-3 { transform: translateZ(-50px) rotateY(-180deg);}
.cube.show-4 { transform: translateZ(-50px) rotateY(90deg);}
.cube.show-5 { transform: translateZ(-50px) rotateX(-90deg);}
.cube.show-6 { transform: translateZ(-50px) rotateX(90deg);}
*[class^='cube_face'] {
display: grid;
position: absolute;
place-items: center;
width: 100px;
height: 100px;
border: 1px solid #444;
font-size: 25px;
font-weight: bold;
color: #000;
background: #FFF;
box-shadow: inset 0 0 0 #ccc;
}
.cube_face_1 { transform: rotateY(0deg) translateZ(50px); }
.cube_face_2 { transform: rotateY(90deg) translateZ(50px); }
.cube_face_3 { transform: rotateY(180deg) translateZ(50px); }
.cube_face_4 { transform: rotateY(-90deg) translateZ(50px); }
.cube_face_5 { transform: rotateX(90deg) translateZ(50px); }
.cube_face_6 { transform: rotateX(-90deg) translateZ(50px); }var scores, roundScore, activePlayer, cube, currentClass;
init();
function changeSide() {
var dice = (Math.floor(Math.random()*6)+1);
var showClass = 'show-' + dice;
if (currentClass) {
cube.classList.remove(currentClass);
}
cube.classList.add(showClass);
currentClass = showClass;
function updateScore() {
document.querySelector('.player-controls').classList.remove('disable-controls');
document.querySelector('.fa-dice').classList.remove('grey');
document.querySelector('.fa-hand-holding').classList.remove('grey');
if (dice !==1) {
roundScore += dice;
document.querySelector('#current-' + activePlayer).textContent = roundScore;
} else {
nextPlayer();
}
}
setTimeout(updateScore, 2000);
}
document.querySelector('.btn-roll').addEventListener('click', function() {
cube.classList.remove('animation-1');
var counter = 0;
var loopCount = 30;
function spinCube() {
if (++counter >= loopCount) {
clearInterval(interval);
cube.classList.remove('animation-2');
} else {
cube.classList.add('animation-2');
document.querySelector('.player-controls').classList.add('disable-controls');
document.querySelector('.fa-dice').classList.add('grey');
document.querySelector('.fa-hand-holding').classList.add('grey');
}
}
var interval = setInterval(spinCube, 60);
changeSide();
});
document.querySelector('.btn-hold').addEventListener('click', function() {
scores[activePlayer] += roundScore;
document.querySelector('#score-' + activePlayer).textContent = scores[activePlayer];
if (scores[activePlayer] >= 20) {
document.querySelector('#name-' + activePlayer).textContent = 'Winner!';
document.querySelector('.player-' + activePlayer + '-panel').classList.add('winner');
document.querySelector('.player-' + activePlayer + '-panel').classList.remove('active');
document.querySelector('.dice').classList.add('displaynone');
document.querySelector('.player-controls').classList.add('displaynone');
} else {
nextPlayer();
}
});
function nextPlayer() {
activePlayer === 0 ? activePlayer = 1 : activePlayer = 0;
roundScore = 0;
document.getElementById('current-0').textContent = '0';
document.getElementById('current-1').textContent = '0';
document.querySelector('.player-0-panel').classList.toggle('active');
document.querySelector('.player-1-panel').classList.toggle('active');
document.querySelector('.player-controls').classList.toggle('player-controls-right');
document.querySelector('.fa-dice').classList.toggle('fa-flip-horizontal');
document.querySelector('.fa-hand-holding').classList.toggle('fa-flip-horizontal');
}
document.querySelector('.btn-new').addEventListener('click', init);
function init() {
scores = [0,0];
roundScore = 0;
activePlayer = 0;
cube = document.querySelector('.cube');
currentClass = '';
document.getElementById('score-0').textContent = '0';
document.getElementById('score-1').textContent = '0';
document.getElementById('current-0').textContent = '0';
document.getElementById('current-1').textContent = '0';
document.getElementById('name-0').textContent = 'Player1';
document.getElementById('name-1').textContent = 'Player2';
document.querySelector('.player-0-panel').classList.remove('winner');
document.querySelector('.player-1-panel').classList.remove('winner');
document.querySelector('.player-0-panel').classList.remove('active');
document.querySelector('.player-1-panel').classList.remove('active');
document.querySelector('.player-0-panel').classList.add('active');
document.querySelector('.player-controls').classList.remove('player-controls-right');
document.querySelector('.fa-dice').classList.remove('fa-flip-horizontal');
document.querySelector('.fa-hand-holding').classList.remove('fa-flip-horizontal');
document.querySelector('.dice').classList.remove('displaynone');
document.querySelector('.player-controls').classList.remove('displaynone');
cube.classList.add('animation-1');
}
document.querySelector('.btn-rules').addEventListener('click', function() {
document.querySelector('.popuptext').classList.remove('hiderules');
document.querySelector('.popuptext').classList.add('showrules');
});
document.querySelector('.btn-close').addEventListener('click', function() {
document.querySelector('.popuptext').classList.remove('showrules');
document.querySelector('.popuptext').classList.add('hiderules');
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.