Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 774d7f6

Browse files
src: Add code for Project 1: Pig Game
1 parent d571bde commit 774d7f6

File tree

10 files changed

+334
-0
lines changed

10 files changed

+334
-0
lines changed
Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
// -----------------------------------------------------------------------------
2+
// Coding Challenge 5
3+
// -----------------------------------------------------------------------------
4+
// See Section 4: JavaScript in the Browser: DOM Manipulation and Events
5+
// Lesson 47: Project Setup and Details
6+
7+
/*
8+
GAME RULES:
9+
10+
The game has 2 players, playing in rounds
11+
12+
In each turn, a player rolls a dice as many times as he whishes. Each result gets
13+
added to his ROUND score. BUT, if the player rolls a 1, all his ROUND score gets lost.
14+
The player can choose to 'Hold', which means that his ROUND score gets added to his
15+
GLOBAL score.
16+
17+
After that, it's the next player's turn.
18+
19+
The first player to reach 100 points on GLOBAL score wins the game.
20+
*/
21+
22+
var player1, player2;
23+
var activePlayer;
24+
var isThereAWinner;
25+
26+
initGame();
27+
28+
function initGame() {
29+
player1 = {
30+
id: 1,
31+
roundScore: 0,
32+
globalScore: 0,
33+
}
34+
player2 = {
35+
id: 2,
36+
roundScore: 0,
37+
globalScore: 0,
38+
}
39+
activePlayer = player1;
40+
isThereAWinner = false;
41+
42+
document.querySelector(".dice").style.display = "none";
43+
44+
document.getElementById("score-1").textContent = 0;
45+
document.getElementById("score-2").textContent = 0;
46+
47+
document.getElementById("current-1").textContent = 0;
48+
document.getElementById("current-2").textContent = 0;
49+
50+
let player1Panel = document.querySelector(".player-1-panel");
51+
player1Panel.classList.remove("active", "winner");
52+
player1Panel.classList.add("active");
53+
54+
let player2Panel = document.querySelector(".player-2-panel");
55+
player2Panel.classList.remove("active", "winner");
56+
57+
document.getElementById("name-1").textContent = "Player 1";
58+
document.getElementById("name-2").textContent = "Player 2";
59+
}
60+
61+
function switchPlayer() {
62+
document.querySelector(`.player-${activePlayer.id}-panel`).classList.toggle("active");
63+
activePlayer = activePlayer.id == player1.id ? player2 : player1;
64+
document.querySelector(`.player-${activePlayer.id}-panel`).classList.toggle("active");
65+
}
66+
67+
function declareWinner() {
68+
isThereAWinner = true;
69+
70+
document.querySelector(`.player-${activePlayer.id}-panel`).classList.remove("active");
71+
document.querySelector(`.player-${activePlayer.id}-panel`).classList.add("winner");
72+
document.getElementById(`name-${activePlayer.id}`).textContent = "WINNER!";
73+
}
74+
75+
document.querySelector(".btn-roll")
76+
.addEventListener("click", function() {
77+
if (isThereAWinner) {
78+
return;
79+
}
80+
81+
// Generate a random number
82+
let diceVal = Math.floor(Math.random() * 6) + 1;
83+
84+
// Display the result
85+
let diceImg = document.querySelector(".dice");
86+
diceImg.style.display = "block";
87+
diceImg.src = `dice-${diceVal}.png`;
88+
89+
// If user rolled 1, zero out the round score and pass to the other player.
90+
// If user rolled 2-6, update the round score
91+
let roundScoreTxtId = `current-${activePlayer.id}`;
92+
let roundScoreTxt = document.getElementById(roundScoreTxtId);
93+
if (diceVal > 1) {
94+
activePlayer.roundScore += diceVal;
95+
96+
roundScoreTxt.textContent = activePlayer.roundScore;
97+
} else {
98+
activePlayer.roundScore = 0;
99+
100+
roundScoreTxt.textContent = 0;
101+
102+
switchPlayer();
103+
}
104+
105+
// console.dir(activePlayer);
106+
// console.dir(player1);
107+
// console.dir(player2);
108+
});
109+
110+
document.querySelector(".btn-hold")
111+
.addEventListener("click", function() {
112+
if (isThereAWinner) {
113+
return;
114+
}
115+
116+
// Add the round score to the global score
117+
// And reset the round score
118+
activePlayer.globalScore += activePlayer.roundScore;
119+
activePlayer.roundScore = 0;
120+
121+
// Update the UI
122+
let globalScoreTxtId = `score-${activePlayer.id}`;
123+
let globalScoreTxt = document.getElementById(globalScoreTxtId);
124+
globalScoreTxt.textContent = activePlayer.globalScore;
125+
let roundScoreTxtId = `current-${activePlayer.id}`;
126+
let roundScoreTxt = document.getElementById(roundScoreTxtId);
127+
roundScoreTxt.textContent = activePlayer.roundScore;
128+
129+
// Check if player already won the game
130+
// If the player did not win yet, pass to the other player
131+
if (activePlayer.globalScore >= 100) {
132+
declareWinner();
133+
} else {
134+
switchPlayer();
135+
}
136+
});
137+
138+
document.querySelector(".btn-new")
139+
.addEventListener("click", initGame);
1.51 MB
Loading[フレーム]
3.46 KB
Loading[フレーム]
4.22 KB
Loading[フレーム]
4.89 KB
Loading[フレーム]
4.47 KB
Loading[フレーム]
5.14 KB
Loading[フレーム]
5.23 KB
Loading[フレーム]
Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,600" rel="stylesheet" type="text/css">
6+
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
7+
<link type="text/css" rel="stylesheet" href="style.css">
8+
9+
<title>Pig Game</title>
10+
</head>
11+
12+
<body>
13+
<div class="wrapper clearfix">
14+
<div class="player-1-panel">
15+
<div class="player-name" id="name-1">Player 1</div>
16+
<div class="player-score" id="score-1">43</div>
17+
<div class="player-current-box">
18+
<div class="player-current-label">Current</div>
19+
<div class="player-current-score" id="current-1">11</div>
20+
</div>
21+
</div>
22+
23+
<div class="player-2-panel">
24+
<div class="player-name" id="name-2">Player 2</div>
25+
<div class="player-score" id="score-2">72</div>
26+
<div class="player-current-box">
27+
<div class="player-current-label">Current</div>
28+
<div class="player-current-score" id="current-2">0</div>
29+
</div>
30+
</div>
31+
32+
<button class="btn-new"><i class="ion-ios-plus-outline"></i>New game</button>
33+
<button class="btn-roll"><i class="ion-ios-loop"></i>Roll dice</button>
34+
<button class="btn-hold"><i class="ion-ios-download-outline"></i>Hold</button>
35+
36+
<img src="dice-5.png" alt="Dice" class="dice">
37+
</div>
38+
39+
<script src="app.js"></script>
40+
</body>
41+
</html>
Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
/**********************************************
2+
*** GENERAL
3+
**********************************************/
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(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-1-panel,
41+
.player-2-panel {
42+
width: 50%;
43+
float: left;
44+
height: 600px;
45+
padding: 100px;
46+
}
47+
48+
49+
50+
/**********************************************
51+
*** PLAYERS
52+
**********************************************/
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: #d1e6e6; }
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: #9de99d; }
154+
.winner .player-name { font-weight: 300; color: #EB4D4D; }

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /