Skip to content

27-3 Jia Hui #576

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sinsinex wants to merge 6 commits into
base: main
Choose a base branch
from
Open

27-3 Jia Hui #576

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
49d54f0
v2. as of 14 Feb
sinsinex Feb 14, 2024
854eff8
v3. dice roll, choose order, combine number
sinsinex Feb 14, 2024
bc4aa0e
complete game before tracking number of wins
sinsinex Feb 14, 2024
8c4db36
added game instructions
sinsinex Feb 14, 2024
4a3936c
final html
sinsinex Feb 14, 2024
5c5723a
final js
sinsinex Feb 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 32 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
}

#container {
background-color: pink;
background-color: rgb(235, 220, 252);
margin: 40px auto;
max-width: 800px;
padding: 38px 31px;
Expand Down Expand Up @@ -49,7 +49,7 @@
</head>

<body>
<h1 id="header">Basics: Beat That! 🚀</h1>
<h1 id="header">Basics: Beat That! 🎲</h1>
<div id="container">
<p>Input:</p>
<input id="input-field" />
Expand All @@ -58,6 +58,30 @@ <h1 id="header">Basics: Beat That! 🚀</h1>
<p>Output:</p>
<div id="output-div"></div>
</div>
<style>
.centered-text {
text-align: center;
}
.hidden-text {
display: none;
}
</style>
Copy link

@floatingtales floatingtales Feb 15, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

great that you've added style tags!

But this belong within the <header> header </header> as opposed to the <body> body </body>

<div id="gameInstructions" class="centered-text">
<p class="instruction-text">Hello! Welcome to Beat That! 🎲</p>
<p class="instruction-text">
Grab a friend because this is a two-player game.👥
</p>
<p class="instruction-text">
The rules are simple. Roll two dice, and create a two-digit number from
the numbers rolled.
</p>
<p class="instruction-text">
The player with the highest number wins! 🏆
</p>
<p class="instruction-text">
Ready to play? Player 1, click submit to start the game.
</p>
</div>
Copy link

@floatingtales floatingtales Feb 15, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great that you've added instructions here! Also great usage of classes and ids here!

Slight nitpick, id names usually have the same case styling as class names, they're in what we call kebab-case. So it might be better to name the id tag as game-instructions

<!-- Import program logic -->
<script src="script.js"></script>
<!-- Define button click functionality -->
Expand All @@ -74,6 +98,12 @@ <h1 id="header">Basics: Beat That! 🚀</h1>

// Reset input value
input.value = "";

// Hide game instructions text once the game starts
var instructions = document.querySelectorAll(".instruction-text");
instructions.forEach(function (instruction) {
instruction.classList.add("hidden-text");
});
Copy link

@floatingtales floatingtales Feb 15, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome job on doing this! You do know how to take in a tag with the querySelector and hide it! I don't particularly like the array.forEach() function because it's a bit finicky, but this works!

p.s. I'd like to use a for loop to iterate through this

for(var i = 0; i<instructions.length; i+=1){
  instructions[i].classList.add("hidden-text")
}

});
</script>
</body>
Expand Down
141 changes: 139 additions & 2 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,141 @@
//Game: Beat That!
//2 players, 2 dices
//2 game modes: Each player rolls once and player picks the order of the numbers rolled to get the biggest value
//Player with higher combined number wins
//Calculate number of wins

//2 players
var player1 = "Player 1";
var player2 = "Player 2";
var player1DiceRoll = [];
var player2DiceRoll = [];
var player1Number;
var player2Number;
var player1WinCount = 0;
var player2WinCount = 0;
var player1LoseCount = 0;
var player2LoseCount = 0;
var drawCount = 0;
Copy link

@floatingtales floatingtales Feb 15, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

great usage of global variables here!

But there are slightly redundant variables here. because player1WinCount will always be exactly the same as player2LoseCount, and vice versa.


//2 game modes, start with first player
var modeRollDice = "modeRollDice";
var modeChooseDiceOrder = "modeChooseDiceOrder";
var currentPlayer = "Player 1";

//Game starts with rolling of dice
var gameMode = modeRollDice;

var rollSingleDice = function () {
return Math.floor(Math.random() * 6) + 1;
Copy link

@floatingtales floatingtales Feb 15, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice way of making this a one-liner!

};

var rollDiceAndAssign = function () {
var getDiceNumber = [rollSingleDice(), rollSingleDice()];
Copy link

@floatingtales floatingtales Feb 15, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This works for a 2 dice game. It might be a bit challenging if you want to expand this into having variable amount of dice tho!


if (currentPlayer === "Player 1") {
Copy link

@floatingtales floatingtales Feb 15, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ahh yes! A === strict equality operator!

It actually is a more recommended way of doing as opposed to a == equality operator.

the only difference being the === checks the data type as well as the value. as opposed to a ==.
i.e.

1=="1" //true
1==="1" //false

player1DiceRoll = getDiceNumber;
} else {
player2DiceRoll = getDiceNumber;
}
return getDiceNumber;
};

//Player picks the order of the numbers rolled (1 for first number first, 2 for second number first)
//orderChosen is the user input (1 or 2)

var getPlayerNumber = function (orderChosen) {
var diceArray;
if (currentPlayer === "Player 1") {
diceArray = player1DiceRoll;
} else {
diceArray = player2DiceRoll;
}

if (orderChosen === 1) {
playerNumber = Number(String(diceArray[0]) + String(diceArray[1]));
} else {
playerNumber = Number(String(diceArray[1]) + String(diceArray[0]));
}

if (currentPlayer === "Player 1") {
player1Number = playerNumber;
} else {
player2Number = playerNumber;
}
return playerNumber;
};

//determine winner
var determineWinner = function () {
if (player1Number > player2Number) {
return "Player 1";
} else if (player2Number > player1Number) {
return "Player 2";
} else {
return "Draw";
}
};

//yay, we are into the main function!

var main = function (input) {
var myOutputValue = 'hello world';
return myOutputValue;
//Roll dice first
if (gameMode === modeRollDice) {
var getDiceNumber = rollDiceAndAssign();

gameMode = modeChooseDiceOrder;
var diceRollMessage = `Welcome ${currentPlayer}! <br>
Your dice numbers are: <br>
Dice 1: ${getDiceNumber[0]} <br>
Dice 2: ${getDiceNumber[1]} <br>
Indicate your choice of order by entering 1 or 2 to assume the first value of the combined number.`;
return diceRollMessage;
}

//Combine numbers based on chosen order and show user combined number
if (gameMode === modeChooseDiceOrder) {
var orderChosen = Number(input);
Copy link

@floatingtales floatingtales Feb 15, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is why you need to cast the string into a number, because of the strict equality!

However the way that you chose to do it might have a weird edge case that should be considered:

try inputting a Hex-value string like say 0x000001

It will still run!

if (isNaN(orderChosen) || (orderChosen !== 1 && orderChosen !== 2)) {
var returnErrorMessage =
"Please enter either 1 or 2 to indicate your preferred order.";
return returnErrorMessage;
}
}
var playerNumber = getPlayerNumber(orderChosen);
var combinedNumberMessage = `${currentPlayer}, you chose Dice ${orderChosen} as your first value. <br>
Your number is therefore ${playerNumber}.<br>`;
if (currentPlayer === "Player 1") {
currentPlayer = "Player 2";
gameMode = modeRollDice;
return (
combinedNumberMessage +
"It is now Player 2's turn. Press submit to roll your dice."
);
}

//Determine winner and reset game
if (currentPlayer === "Player 2") {
var winningPlayer = determineWinner();
if (winningPlayer === "Player 1") {
player1WinCount += 1;
player2LoseCount += 1;
var winningMessage = `${winningPlayer} has won this round. 👻`;
} else if (winningPlayer === "Player 2") {
player1LoseCount += 1;
player2WinCount += 1;
var winningMessage = `${winningPlayer} has won this round. 🥷`;
} else {
drawCount += 1;
var winningMessage = "No one won this round. It's a draw. 🤝";
}
currentPlayer = "Player 1";
gameMode = modeRollDice;
var tallyWinMessage =
winningMessage +
`<br>Player 1's number is ${player1Number} while Player 2's number is ${player2Number}. <br>
Player 1 - Wins: ${player1WinCount} || Losses ${player1LoseCount} <br>
Player 2 - Wins: ${player2WinCount} || Losses ${player2LoseCount} <br>
Press submit to play again.`;
return tallyWinMessage;
}
};