Skip to content

Commit 00bcbac

Browse files
Josie-NJosie-N
committed
Add game setup and HTML / CSS structure
1 parent 47dd2ae commit 00bcbac

File tree

25 files changed

+684
-0
lines changed

25 files changed

+684
-0
lines changed

‎.DS_Store‎

6 KB
Binary file not shown.

‎JS_Basic_Challenges/.DS_Store‎

6 KB
Binary file not shown.

‎JS_Basic_Challenges/4-DOM-pig-game/.DS_Store‎

6 KB
Binary file not shown.

‎JS_Basic_Challenges/4-DOM-pig-game/final/.DS_Store‎

6 KB
Binary file not shown.

‎JS_Basic_Challenges/4-DOM-pig-game/final/app.js‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
/*
2+
GAME RULES:
3+
4+
- The game has 2 players, playing in rounds
5+
- In each turn, a player rolls a dice as many times as he whishes. Each result get added to his ROUND score
6+
- BUT, if the player rolls a 1, all his ROUND score gets lost. After that, it's the next player's turn
7+
- 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 turn
8+
- The first player to reach 100 points on GLOBAL score wins the game
9+
10+
*/
11+
12+
var scores, roundScore, activePlayer, gamePlaying;
13+
14+
init();
15+
16+
17+
document.querySelector('.btn-roll').addEventListener('click', function() {
18+
if(gamePlaying) {
19+
// 1. Random number
20+
var dice = Math.floor(Math.random() * 6) + 1;
21+
22+
//2. Display the result
23+
var diceDOM = document.querySelector('.dice');
24+
diceDOM.style.display = 'block';
25+
diceDOM.src = 'dice-' + dice + '.png';
26+
27+
28+
//3. Update the round score IF the rolled number was NOT a 1
29+
if (dice !== 1) {
30+
//Add score
31+
roundScore += dice;
32+
document.querySelector('#current-' + activePlayer).textContent = roundScore;
33+
} else {
34+
//Next player
35+
nextPlayer();
36+
}
37+
}
38+
});
39+
40+
41+
document.querySelector('.btn-hold').addEventListener('click', function() {
42+
if (gamePlaying) {
43+
// Add CURRENT score to GLOBAL score
44+
scores[activePlayer] += roundScore;
45+
46+
// Update the UI
47+
document.querySelector('#score-' + activePlayer).textContent = scores[activePlayer];
48+
49+
// Check if player won the game
50+
if (scores[activePlayer] >= 100) {
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 player
58+
nextPlayer();
59+
}
60+
}
61+
});
62+
63+
64+
function nextPlayer() {
65+
//Next player
66+
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('.player-0-panel').classList.remove('active');
76+
//document.querySelector('.player-1-panel').classList.add('active');
77+
78+
document.querySelector('.dice').style.display = 'none';
79+
}
80+
81+
document.querySelector('.btn-new').addEventListener('click', init);
82+
83+
function init() {
84+
scores = [0, 0];
85+
activePlayer = 0;
86+
roundScore = 0;
87+
gamePlaying = true;
88+
89+
document.querySelector('.dice').style.display = 'none';
90+
91+
document.getElementById('score-0').textContent = '0';
92+
document.getElementById('score-1').textContent = '0';
93+
document.getElementById('current-0').textContent = '0';
94+
document.getElementById('current-1').textContent = '0';
95+
document.getElementById('name-0').textContent = 'Player 1';
96+
document.getElementById('name-1').textContent = 'Player 2';
97+
document.querySelector('.player-0-panel').classList.remove('winner');
98+
document.querySelector('.player-1-panel').classList.remove('winner');
99+
document.querySelector('.player-0-panel').classList.remove('active');
100+
document.querySelector('.player-1-panel').classList.remove('active');
101+
document.querySelector('.player-0-panel').classList.add('active');
102+
}
103+
104+
//document.querySelector('#current-' + activePlayer).textContent = dice;
105+
//document.querySelector('#current-' + activePlayer).innerHTML = '<em>' + dice + '</em>';
106+
//var x = document.querySelector('#score-0').textContent;
107+
108+
109+
110+
111+
112+
113+
114+
115+
/*
116+
YOUR 3 CHALLENGES
117+
Change the game to follow these rules:
118+
119+
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)
120+
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 :)
121+
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.)
122+
*/

‎JS_Basic_Challenges/4-DOM-pig-game/final/back.jpg‎

1.51 MB
Loading

‎JS_Basic_Challenges/4-DOM-pig-game/final/challenges.js‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
/*
2+
YOUR 3 CHALLENGES
3+
Change the game to follow these rules:
4+
5+
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)
6+
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 :)
7+
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.)
8+
*/
9+
10+
var scores, roundScore, activePlayer, gamePlaying;
11+
12+
init();
13+
14+
var lastDice;
15+
16+
document.querySelector('.btn-roll').addEventListener('click', function() {
17+
if(gamePlaying) {
18+
// 1. Random number
19+
var dice1 = Math.floor(Math.random() * 6) + 1;
20+
var dice2 = Math.floor(Math.random() * 6) + 1;
21+
22+
//2. Display the result
23+
document.getElementById('dice-1').style.display = 'block';
24+
document.getElementById('dice-2').style.display = 'block';
25+
document.getElementById('dice-1').src = 'dice-' + dice1 + '.png';
26+
document.getElementById('dice-2').src = 'dice-' + dice2 + '.png';
27+
28+
//3. Update the round score IF the rolled number was NOT a 1
29+
if (dice1 !== 1 && dice2 !== 1) {
30+
//Add score
31+
roundScore += dice1 + dice2;
32+
document.querySelector('#current-' + activePlayer).textContent = roundScore;
33+
} else {
34+
//Next player
35+
nextPlayer();
36+
}
37+
38+
/*
39+
if (dice === 6 && lastDice === 6) {
40+
//Player looses score
41+
scores[activePlayer] = 0;
42+
document.querySelector('#score-' + activePlayer).textContent = '0';
43+
nextPlayer();
44+
} else if (dice !== 1) {
45+
//Add score
46+
roundScore += dice;
47+
document.querySelector('#current-' + activePlayer).textContent = roundScore;
48+
} else {
49+
//Next player
50+
nextPlayer();
51+
}
52+
lastDice = dice;
53+
*/
54+
}
55+
});
56+
57+
58+
document.querySelector('.btn-hold').addEventListener('click', function() {
59+
if (gamePlaying) {
60+
// Add CURRENT score to GLOBAL score
61+
scores[activePlayer] += roundScore;
62+
63+
// Update the UI
64+
document.querySelector('#score-' + activePlayer).textContent = scores[activePlayer];
65+
66+
var input = document.querySelector('.final-score').value;
67+
var winningScore;
68+
69+
// Undefined, 0, null or "" are COERCED to false
70+
// Anything else is COERCED to true
71+
if(input) {
72+
winningScore = input;
73+
} else {
74+
winningScore = 100;
75+
}
76+
77+
// Check if player won the game
78+
if (scores[activePlayer] >= winningScore) {
79+
document.querySelector('#name-' + activePlayer).textContent = 'Winner!';
80+
document.getElementById('dice-1').style.display = 'none';
81+
document.getElementById('dice-2').style.display = 'none';
82+
document.querySelector('.player-' + activePlayer + '-panel').classList.add('winner');
83+
document.querySelector('.player-' + activePlayer + '-panel').classList.remove('active');
84+
gamePlaying = false;
85+
} else {
86+
//Next player
87+
nextPlayer();
88+
}
89+
}
90+
});
91+
92+
93+
function nextPlayer() {
94+
//Next player
95+
activePlayer === 0 ? activePlayer = 1 : activePlayer = 0;
96+
roundScore = 0;
97+
98+
document.getElementById('current-0').textContent = '0';
99+
document.getElementById('current-1').textContent = '0';
100+
101+
document.querySelector('.player-0-panel').classList.toggle('active');
102+
document.querySelector('.player-1-panel').classList.toggle('active');
103+
104+
//document.querySelector('.player-0-panel').classList.remove('active');
105+
//document.querySelector('.player-1-panel').classList.add('active');
106+
107+
document.getElementById('dice-1').style.display = 'none';
108+
document.getElementById('dice-2').style.display = 'none';
109+
}
110+
111+
document.querySelector('.btn-new').addEventListener('click', init);
112+
113+
function init() {
114+
scores = [0, 0];
115+
activePlayer = 0;
116+
roundScore = 0;
117+
gamePlaying = true;
118+
119+
document.getElementById('dice-1').style.display = 'none';
120+
document.getElementById('dice-2').style.display = 'none';
121+
122+
document.getElementById('score-0').textContent = '0';
123+
document.getElementById('score-1').textContent = '0';
124+
document.getElementById('current-0').textContent = '0';
125+
document.getElementById('current-1').textContent = '0';
126+
document.getElementById('name-0').textContent = 'Player 1';
127+
document.getElementById('name-1').textContent = 'Player 2';
128+
document.querySelector('.player-0-panel').classList.remove('winner');
129+
document.querySelector('.player-1-panel').classList.remove('winner');
130+
document.querySelector('.player-0-panel').classList.remove('active');
131+
document.querySelector('.player-1-panel').classList.remove('active');
132+
document.querySelector('.player-0-panel').classList.add('active');
133+
}

‎JS_Basic_Challenges/4-DOM-pig-game/final/dice-1.png‎

3.46 KB
Loading

‎JS_Basic_Challenges/4-DOM-pig-game/final/dice-2.png‎

4.22 KB
Loading

‎JS_Basic_Challenges/4-DOM-pig-game/final/dice-3.png‎

4.89 KB
Loading

0 commit comments

Comments
 (0)