xxxxxxxxxx1
<div class="wrapper clearfix">2
<div class="player-0-panel active">3
<div class="player-name" id="name-0">Player 1</div>4
<div class="player-score" id="score-0">43</div>5
<div class="player-current-box">6
<div class="player-current-label">Current</div>7
<div class="player-current-score" id="current-0">11</div>8
</div>9
</div>10
11
<div class="player-1-panel">12
<div class="player-name" id="name-1">Player 2</div>13
<div class="player-score" id="score-1">72</div>14
<div class="player-current-box">15
<div class="player-current-label">Current</div>16
<div class="player-current-score" id="current-1">0</div>17
</div>18
</div>19
20
<button class="btn-new"><i class="ion-ios-plus-outline"></i>New game</button>21
<button class="btn-roll"><i class="ion-ios-loop"></i>Roll dice</button>22
<button class="btn-hold"><i class="ion-ios-download-outline"></i>Hold</button>23
24
<img src="https://mdbootstrap.com/img/snippets/dice-5.png" alt="Dice" class="dice">25
</div>xxxxxxxxxx1
/**********************************************2
*** GENERAL3
**********************************************/4
5
* {6
margin: 0;7
padding: 0;8
box-sizing: border-box;9
10
}11
12
.clearfix::after {13
content: "";14
display: table;15
clear: both;16
}17
18
body {19
background-image: linear-gradient(rgba(62, 20, 20, 0.4), rgba(62, 20, 20, 0.4)), url(https://mdbootstrap.com/img/snippets/back.jpg);20
background-size: cover;21
background-position: center;22
font-family: Lato;23
font-weight: 300;24
position: relative;25
height: 100vh;26
color: #555;27
}28
29
.wrapper {30
width: 1000px;31
position: absolute;32
top: 50%;33
left: 50%;34
transform: translate(-50%, -50%);35
background-color: #fff;36
box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.3);37
overflow: hidden;38
}39
40
.player-0-panel,41
.player-1-panel {42
width: 50%;43
float: left;44
height: 600px;45
padding: 100px;46
}47
48
49
50
/**********************************************51
*** PLAYERS52
**********************************************/53
54
.player-name {55
font-size: 40px;56
text-align: center;57
text-transform: uppercase;58
letter-spacing: 2px;59
font-weight: 100;60
margin-top: 20px;61
margin-bottom: 10px;62
position: relative;63
}64
65
.player-score {66
text-align: center;67
font-size: 80px;68
font-weight: 100;69
color: #EB4D4D;70
margin-bottom: 130px;71
}72
73
.active { background-color: #f7f7f7; }74
.active .player-name { font-weight: 300; }75
76
.active .player-name::after {77
content: "\2022";78
font-size: 47px;79
position: absolute;80
color: #EB4D4D;81
top: -7px;82
right: 10px;83
84
}85
86
.player-current-box {87
background-color: #EB4D4D;88
color: #fff;89
width: 40%;90
margin: 0 auto;91
padding: 12px;92
text-align: center;93
}94
95
.player-current-label {96
text-transform: uppercase;97
margin-bottom: 10px;98
font-size: 12px;99
color: #222;100
}101
102
.player-current-score {103
font-size: 30px;104
}105
106
button {107
position: absolute;108
width: 200px;109
left: 50%;110
transform: translateX(-50%);111
color: #555;112
background: none;113
border: none;114
font-family: Lato;115
font-size: 20px;116
text-transform: uppercase;117
cursor: pointer;118
font-weight: 300;119
transition: background-color 0.3s, color 0.3s;120
}121
122
button:hover { font-weight: 600; }123
button:hover i { margin-right: 20px; }124
125
button:focus {126
outline: none;127
}128
129
i {130
color: #EB4D4D;131
display: inline-block;132
margin-right: 15px;133
font-size: 32px;134
line-height: 1;135
vertical-align: text-top;136
margin-top: -4px;137
transition: margin 0.3s;138
}139
140
.btn-new { top: 45px;}141
.btn-roll { top: 403px;}142
.btn-hold { top: 467px;}143
144
.dice {145
position: absolute;146
left: 50%;147
top: 178px;148
transform: translateX(-50%);149
height: 100px;150
box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.10);151
}152
153
.winner { background-color: #f7f7f7; }154
.winner .player-name { font-weight: 300; color: #EB4D4D; }xxxxxxxxxx1
/*2
GAME RULES:3
4
- The game has 2 players, playing in rounds5
- In each turn, a player rolls a dice as many times as he whishes. Each result get added to his ROUND score6
- BUT, if the player rolls a 1, all his ROUND score gets lost. After that, it's the next player's turn7
- The player can choose to 'Hold', which means that his ROUND score gets added to his GLBAL score. After that, it's the next player's turn8
- The first player to reach 100 points on GLOBAL score wins the game9
10
*/11
12
var scores, roundScore, activePlayer, dice, gamePlaying;13
14
init();15
16
document.querySelector('.btn-roll').addEventListener('click', function() {17
18
if(gamePlaying) {19
// 1. Random number20
var dice = Math.floor(Math.random() * 6) + 1;21
22
// 2. Display the result23
var diceDOM = document.querySelector('.dice');24
diceDOM.style.display = 'block';25
diceDOM.src = 'https://mdbootstrap.com/img/snippets/dice-' + dice + '.png';26
27
// 3. Update the round score IF the rolled number was NOT a 128
if(dice !== 1) {29
// Add score30
roundScore += dice;31
document.querySelector('#current-' + activePlayer).textContent = roundScore;32
} else {33
// Next Player34
nextPlayer();35
}36
}37
38
});39
40
document.querySelector('.btn-hold').addEventListener('click', function() {41
42
if(gamePlaying) {43
// Add current score to global score44
scores[activePlayer] += roundScore;45
46
// Update the UI47
document.querySelector('#score-' + activePlayer).textContent = scores[activePlayer];48
49
// Check if player won the game50
if (scores[activePlayer] >= 50) {51
document.querySelector('#name-' + activePlayer).textContent = 'Winner!';52
document.querySelector('.dice').style.display = 'none';53
document.querySelector('.player-' + activePlayer + '-panel').classList.add('winner');54
document.querySelector('.player-' + activePlayer + '-panel').classList.remove('active');55
gamePlaying = false;56
} else {57
// Next player58
nextPlayer();59
}60
}61
62
});63
64
function nextPlayer() {65
// Next player66
activePlayer === 0 ? activePlayer = 1 : activePlayer = 0;67
roundScore = 0;68
69
document.getElementById('current-0').textContent = '0';70
document.getElementById('current-1').textContent = '0';71
72
document.querySelector('.player-0-panel').classList.toggle('active');73
document.querySelector('.player-1-panel').classList.toggle('active');74
75
document.querySelector('.dice').style.display = 'none';76
}77
78
document.querySelector('.btn-new').addEventListener('click', init);79
80
function init() {81
scores = [0, 0];82
roundScore = 0;83
activePlayer = 0;84
gamePlaying = true;85
86
document.querySelector('.dice').style.display = 'none';87
88
document.getElementById('score-0').textContent = '0';89
document.getElementById('score-1').textContent = '0';90
document.getElementById('current-0').textContent = '0';91
document.getElementById('current-1').textContent = '0';92
document.getElementById('name-0').textContent = 'Player 1';93
document.getElementById('name-1').textContent = 'Player 2';94
document.querySelector('.player-0-panel').classList.remove('winner');95
document.querySelector('.player-1-panel').classList.remove('winner');96
document.querySelector('.player-0-panel').classList.remove('active');97
document.querySelector('.player-1-panel').classList.remove('active');98
document.querySelector('.player-0-panel').classList.add('active');99
} Console errors: 0