Skip to content

Commit 6fd9842

Browse files
ayeeerubenayeeeruben
committed
needs styling with cs but core game is done
1 parent 00894db commit 6fd9842

8 files changed

Lines changed: 222 additions & 0 deletions

File tree

‎.DS_Store‎

0 Bytes
Binary file not shown.

‎hw2/end.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Game Over!</title>
8+
<link href="style.css" rel="stylesheet">
9+
</head>
10+
<body>
11+
<h1 id="message"></h1>
12+
<p id="score"></p>
13+
14+
<label for="playAgain">
15+
<button id="playAgain">Play Again</button>
16+
</label>
17+
<label for="mainMenu">
18+
<button id="mainMenu">Main Menu</button>
19+
</label>
20+
21+
22+
<script src="endScript.js"></script>
23+
</body>
24+
</html>

‎hw2/endScript.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
const WINNER = sessionStorage.getItem("winner");
2+
const SCORE = sessionStorage.getItem("score");
3+
4+
let message = document.querySelector("#message");
5+
let score = document.querySelector("#score");
6+
let mainMenuBtn = document.querySelector("#mainMenu");
7+
let playAgainBtn = document.querySelector("#playAgain");
8+
9+
message.textContent = `${WINNER} Has Won The Game!`;
10+
11+
score.textContent = `Total Score: ${SCORE}`;
12+
13+
mainMenuBtn.addEventListener("click", function(){
14+
sessionStorage.removeItem("winner");
15+
sessionStorage.removeItem("score");
16+
window.location.href = "main.html";
17+
});
18+
19+
playAgainBtn.addEventListener("click", function(){
20+
sessionStorage.clear();
21+
window.location.href = "game.html";
22+
});

‎hw2/game.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>PIG</title>
8+
<link href="style.css" rel="stylesheet">
9+
</head>
10+
<body>
11+
<div>
12+
<p id="player1ScoreText"></p>
13+
<p id="currentPlayer1ScoreText"></p>
14+
</div>
15+
<p id="player1"></p>
16+
17+
<p id="dice"></p>
18+
19+
<button id="roll">Roll</button>
20+
<button id="passTurn">Pass Turn</button>
21+
22+
<p id="player2"></p>
23+
<div>
24+
<p id="player2ScoreText"></p>
25+
<p id="currentPlayer2ScoreText"></p>
26+
</div>
27+
<script src="script.js"></script>
28+
</body>
29+
</html>

‎hw2/main.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Game Menu</title>
8+
<link href="style.css" rel="stylesheet">
9+
</head>
10+
<body>
11+
<h1>Hello! Welcome to the dice game PIG! Before you begin, please type your Username!</h1>
12+
13+
<label for="username1">Player 1:
14+
<input id="username1">
15+
</label> Player 2:
16+
<label for="username2">
17+
<input id="username2">
18+
</label>
19+
<p id="error"></p>
20+
21+
22+
<button id="startBtn">Start Game!</button>
23+
24+
<script src="menuScript.js"></script>
25+
</body>
26+
</html>

‎hw2/menuScript.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
let startBtn = document.querySelector("#startBtn");
2+
let error = document.querySelector("#error");
3+
4+
5+
startBtn.addEventListener("click", function(){
6+
let username1 = document.querySelector("#username1").value;
7+
let username2 = document.querySelector("#username2").value;
8+
if(username1 && username2){
9+
sessionStorage.setItem("username1", username1);
10+
sessionStorage.setItem("username2", username2);
11+
12+
window.location.href = "game.html";
13+
}
14+
else {
15+
error.textContent = "Please enter a username!";
16+
error.style.color = "red";
17+
}
18+
});

‎hw2/script.js‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
const NAME1 = sessionStorage.getItem("username1");
2+
const NAME2 = sessionStorage.getItem("username2");
3+
4+
let player1 = document.querySelector("#player1");
5+
let player2 = document.querySelector("#player2");
6+
let dice = document.querySelector("#dice");
7+
let roll = document.querySelector("#roll");
8+
let passTurn = document.querySelector("#passTurn");
9+
10+
let player1ScoreText = document.querySelector("#player1ScoreText");
11+
let player2ScoreText = document.querySelector("#player2ScoreText");
12+
let currentPlayer1ScoreText = document.querySelector("#currentPlayer1ScoreText");
13+
let currentPlayer2ScoreText = document.querySelector("#currentPlayer2ScoreText");
14+
15+
let player1Score = 0;
16+
let currentPlayer1Score = 0;
17+
let player2Score = 0;
18+
let currentPlayer2Score = 0;
19+
20+
let isPlayerTurn = true;
21+
22+
23+
function updateUI() {
24+
player1ScoreText.textContent = `${NAME1}'s Score: ${player1Score}`;
25+
currentPlayer1ScoreText.textContent = `${NAME1}'s Turn: ${currentPlayer1Score}`;
26+
player2ScoreText.textContent = `${NAME2}'s Score: ${player2Score}`;
27+
currentPlayer2ScoreText.textContent = `${NAME2}'s Turn: ${currentPlayer2Score}`;
28+
}
29+
updateUI();
30+
31+
32+
const DIE = ["⚀", "⚁", "⚂", "⚃", "⚄", "⚅"];
33+
34+
dice.textContent = DIE[0];
35+
36+
if(NAME1 && NAME2){
37+
player1.textContent = `Player: ${NAME1}`;
38+
player2.textContent = `Player: ${NAME2}`;
39+
}
40+
41+
function rollDice(){
42+
return Math.floor(Math.random() * 6) + 1;
43+
}
44+
45+
function skipTurn(){
46+
if(isPlayerTurn){
47+
player1Score += currentPlayer1Score;
48+
if(checkWin()){
49+
return;
50+
}
51+
}
52+
else{
53+
player2Score += currentPlayer2Score;
54+
if(checkWin()){
55+
return;
56+
}
57+
}
58+
59+
isPlayerTurn = !isPlayerTurn;
60+
currentPlayer2Score = 0;
61+
currentPlayer1Score = 0;
62+
updateUI();
63+
}
64+
65+
roll.addEventListener("click", function(){
66+
67+
const value = rollDice();
68+
dice.textContent = DIE[value - 1];
69+
if(value === 1){
70+
if (isPlayerTurn) {
71+
currentPlayer1Score = 0;
72+
} else {
73+
currentPlayer2Score = 0;
74+
}
75+
isPlayerTurn = !isPlayerTurn;
76+
updateUI();
77+
return;
78+
}
79+
if (isPlayerTurn) {
80+
currentPlayer1Score += value;
81+
} else {
82+
currentPlayer2Score += value;
83+
}
84+
updateUI();
85+
86+
});
87+
passTurn.addEventListener("click", skipTurn);
88+
89+
function checkWin(){
90+
if(player1Score >= 100){
91+
sessionStorage.setItem("winner", NAME1);
92+
sessionStorage.setItem("score", player1Score);
93+
window.location.href = "end.html";
94+
return true;
95+
}
96+
else if(player2Score >= 100){
97+
sessionStorage.setItem("winner", NAME2);
98+
sessionStorage.setItem("score", player2Score);
99+
window.location.href = "end.html";
100+
return true;
101+
}
102+
return false;
103+
}

‎hw2/style.css‎

Whitespace-only changes.

0 commit comments

Comments
 (0)