I've implemented the game of Pig in JavaScript. My implementation has the following rules:
- Two players take turns playing in rounds.
- In a round, the player rolls a single die as many times as they wish, with the sum of their results becoming their score for that round.
- If the player rolls a 1, then their score for that round goes to 0 and the other player takes a turn.
- At any point in time, the current play may choose to hold, which adds their round score to their total score, and play passes to the other player.
- The first player whose total score reaches 100 wins the game.
For my assignment, I had to add the following additional rules:
- A player loses his entire score when he rolls two 6 in a row. After that, it's the next player's turn. (Hint: Always save the previous dice roll in a separate variable)
- Add an input field to the HTML where players can set the winning score, so that they can change the predefined score of 100. (Hint: you can read that value with the
.value
property in JavaScript. This is a good opportunity to use Google to figure this out :)- Add another die to the game, so that there are two dice now. The player loses his current score when one of them is a 1. (Hint: you will need CSS to position the second die, so take a look at the CSS code for the first one.)
/*
YOUR 3 CHALLENGES
Change the game to follow these rules:
1. A player looses his ENTIRE score when he rolls two 6 in a row. After that, it's the next player's turn.
(Hint: Always save the previous dice roll in a separate variable)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2. Add an input field to the HTML where players can set the winning score, so that they can change the predefined score of 100.
(Hint: you can read that value with the .value property in JavaScript. This is a good oportunity to use google to figure this out :)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
3. Add another dice to the game, so that there are two dices now. The player looses his current score when one of them is a 1.
(Hint: you will need CSS to position the second dice, so take a look at the CSS code for the first one.)
*/
var scores , roundScore , activePlayer , gamePlaying , i , array , changeScore ;
init();
document.querySelector('.btn-roll').addEventListener( 'click' , function () {
if (gamePlaying) {
var dice = Math.floor(Math.random()*6)+1;
var diceTwo = (Math.floor(Math.random()*6)+1);
var diceDOM= document.querySelector('.dice');
diceDOM.style.display = 'block';
document.querySelector('.dice-two').style.display = 'block';
diceDOM.src = 'dice-' + dice +'.png';
document.querySelector('.dice-two').src = 'dice-' + diceTwo +'.png';
if (dice !== 1 && diceTwo !== 1) {
roundScore =roundScore + dice + diceTwo;
document.getElementById('current-'+ activePlayer).textContent = roundScore;
array[i]=dice;
i = i +1 ;
if (dice == 6 && array[i-2] == 6 ) {
nextPlayer();
}
} else {
nextPlayer();
}
}
})
document.querySelector('.btn-hold').addEventListener( 'click' , function () {
if (gamePlaying) {
scores[activePlayer] += roundScore;
document.querySelector('#score-'+ activePlayer).textContent = scores[activePlayer];
if (scores[activePlayer] >= changeScore ) {
document.getElementById('name-'+ activePlayer).textContent = "Winner!";
document.querySelector('.dice').style.display = 'none';
document.querySelector('.player-' + activePlayer +'-panel').classList.add('winner');
document.querySelector('.player-' + activePlayer +'-panel').classList.remove('active');
gamePlaying = false ;
} else {
nextPlayer();
}
}
})
function nextPlayer () {
activePlayer === 1 ? activePlayer = 0 : activePlayer = 1;
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('.dice').style.display = 'none';
document.querySelector('.dice-two').style.display = 'none';
array = [];
}
document.querySelector('.btn-new').addEventListener( 'click' , init);
document.getElementById('changeScore-btn').addEventListener( 'click' , function(){
changeScore = document.getElementById("changeScore-input").value;
alert("to win you need "+changeScore+" score points ");
});
function init() {
scores = [0,0];
roundScore = 0;
activePlayer = 0;
gamePlaying = true;
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.querySelector('.dice').style.display = 'none';
document.querySelector('.dice-two').style.display = 'none';
document.getElementById('name-0').textContent = "Player 1!";
document.getElementById('name-1').textContent = "Player 2!";
document.querySelector('.player-0-panel').classList.remove('active');
document.querySelector('.player-1-panel').classList.remove('active');
document.querySelector('.player-0-panel').classList.add('active');
i = 0;
array = [];
changeScore = 20;
}
/**********************************************
*** GENERAL
**********************************************/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
body {
background-image: linear-gradient(rgba(62, 20, 20, 0.4), rgba(62, 20, 20, 0.4)), url(back.jpg);
background-size: cover;
background-position: center;
font-family: Lato;
font-weight: 300;
position: relative;
height: 100vh;
color: #555;
}
.wrapper {
width: 1000px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.player-0-panel,
.player-1-panel {
width: 50%;
float: left;
height: 600px;
padding: 100px;
}
/**********************************************
*** PLAYERS
**********************************************/
.player-name {
font-size: 40px;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 100;
margin-top: 20px;
margin-bottom: 10px;
position: relative;
}
.player-score {
text-align: center;
font-size: 80px;
font-weight: 100;
color: #EB4D4D;
margin-bottom: 130px;
}
.active { background-color: #f7f7f7; }
.active .player-name { font-weight: 300; }
.active .player-name::after {
content: "\2022";
font-size: 47px;
position: absolute;
color: #EB4D4D;
top: -7px;
right: 10px;
}
.player-current-box {
background-color: #EB4D4D;
color: #fff;
width: 40%;
margin: 0 auto;
padding: 12px;
text-align: center;
}
.player-current-label {
text-transform: uppercase;
margin-bottom: 10px;
font-size: 12px;
color: #222;
}
.player-current-score {
font-size: 30px;
}
button {
position: absolute;
width: 200px;
left: 50%;
transform: translateX(-50%);
color: #555;
background: none;
border: none;
font-family: Lato;
font-size: 20px;
text-transform: uppercase;
cursor: pointer;
font-weight: 300;
transition: background-color 0.3s, color 0.3s;
}
button:hover { font-weight: 600; }
button:hover i { margin-right: 20px; }
button:focus {
outline: none;
}
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;
}
.btn-new { top: 45px;}
.btn-roll { top: 403px;}
.btn-hold { top: 467px;}
.dice {
position: absolute;
left: 50%;
top: 178px;
transform: translateX(-50%);
height: 100px;
box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.10);
}
.dice-two {
position: absolute;
left: 50%;
top: 287px;
transform: translateX(-50%);
height: 100px;
box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.10);
}
.winner { background-color: #f7f7f7; }
.winner .player-name { font-weight: 300; color: #EB4D4D; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,600" rel="stylesheet" type="text/css">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
<link type="text/css" rel="stylesheet" href="style.css">
<title>Pig Game</title>
</head>
<body>
<div class="wrapper clearfix">
<div class="player-0-panel active">
<div class="player-name" id="name-0">Player 1</div>
<div class="player-score" id="score-0">43</div>
<div class="player-current-box">
<div class="player-current-label">Current</div>
<div class="player-current-score" id="current-0">11</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">72</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>
<button class="btn-new"><i class="ion-ios-plus-outline"></i>New game</button>
<button class="btn-roll"><i class="ion-ios-loop"></i>Roll dice</button>
<button class="btn-hold"><i class="ion-ios-download-outline"></i>Hold</button>
<img src="dice-5.png" alt="Dice" class="dice">
<img src="dice-5.png" alt="Dice" class="dice-two">
</div>
<input type="text" id="changeScore-input" >
<button id="changeScore-btn">change score</button>
<script src="app.js"></script>
</body>
</html>