Skip to content
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

Basics Beat That Submission: Elky #577

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

Basics Beat That Submission: Elky #577

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1b6c0fc
first commit
elkyli Feb 15, 2024
33db359
update html
elkyli Feb 15, 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
29 changes: 19 additions & 10 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>Coding Basics</title>
<title>Beat That!</title>
Copy link

Choose a reason for hiding this comment

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

Love that you changed the title here!

<style>
* {
box-sizing: border-box;
Expand All @@ -18,7 +18,7 @@
}

#container {
background-color: pink;
background-color: rgb(225, 251, 186);
margin: 40px auto;
max-width: 800px;
padding: 38px 31px;
Expand All @@ -40,7 +40,7 @@
}

#output-div {
background-color: lightgrey;
background-color: rgb(254, 255, 243);
Copy link

Choose a reason for hiding this comment

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

It's great that you're playing with rgb for the display! This adds a great deal of personal touch to your code!

margin: 20px auto;
padding: 20px;
width: 100%;
Expand All @@ -49,18 +49,27 @@
</head>

<body>
<h1 id="header">Basics: Beat That! 🚀</h1>
<h1 id="header">Welcome to Beat That 🎲</h1>
<div id="container">
<p>Input:</p>
<input id="input-field" />
<br />
<button id="submit-button">Submit</button>
<p>Output:</p>
<div id="output-div"></div>
<body>
Create a two-digit number by selecting the order of your dice rolls.
<br />
The player with the highest number wins!
</p>

👇 Click <b>submit</b> to start the game.
<p>Input:</p>
<input id="input-field" />
<br />
<button id="submit-button">Submit</button>
<p>Current state:</p>
<div id="output-div"></div>
</body>
Copy link

Choose a reason for hiding this comment

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

Generally, you shouldn't put a <body> tag within another <body> tag. a standard <p> tag or a <div> tag would suffice here.

</div>
<!-- Import program logic -->
<script src="script.js"></script>
<!-- Define button click functionality -->

<script>
var button = document.querySelector("#submit-button");
button.addEventListener("click", function () {
Expand Down
81 changes: 79 additions & 2 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,81 @@
// Create game states
var playerToRollDice = "rollDice";
var playerChooseDiceOrder = "chooseDiceOrder";

var player2ToRollDice = "rollDice2";
var player2ChooseDiceOrder = "chooseDiceOrder2";

var compareScores = "compareScores";

// Default game state
var currentGameMode = playerToRollDice;

var player1DiceRoll1, player1DiceRoll2;
var player2DiceRoll1, player2DiceRoll2;
Copy link

Choose a reason for hiding this comment

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

I'd probably explore the usage of an array here. Although this works, it gets harder to scale the game IF you decide to make a game with multiple dice like say, 5 dice, 6 dice.

you'd have to have the same number of variables with the dice. and it's not super ideal.


var player1DiceOrder, player2DiceOrder;
Copy link

Choose a reason for hiding this comment

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

while this method of declaring multiple variables work, I'd much prefer if you would just have them line by line as opposed to them being in one line. It's generally more readable that way.

var player1DiceOrder
var player2DiceOrder


var randomRollDice = function () {
var randomDecimal = Math.random() * 6;
var randomInteger = Math.floor(randomDecimal);
var diceNumber = randomInteger + 1;
return diceNumber;
};

var main = function (input) {
var myOutputValue = 'hello world';
return myOutputValue;
// player 1 roll dice
if (currentGameMode == playerToRollDice) {
player1DiceRoll1 = randomRollDice();
player1DiceRoll2 = randomRollDice();
currentGameMode = playerChooseDiceOrder;
return `Player 1, here's what you rolled! 🎲<br><br> Dice 1: ${player1DiceRoll1} <br> Dice 2: ${player1DiceRoll2} <br><br> Choose your dice order by entering '1' or '2' in the input field.`;
}

// player 1 choose dice order
if (currentGameMode == playerChooseDiceOrder) {
if (input == "1") {
player1DiceOrder = "" + player1DiceRoll1 + player1DiceRoll2;
} else {
player1DiceOrder = "" + player1DiceRoll2 + player1DiceRoll1;
}
Copy link

Choose a reason for hiding this comment

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

This is a novel way of combining the numbers! adding a string to a number would cast that number as a string as opposed to a number, hence why this works.

Also, it might be best to add an input validation somewhere here as this would mean that if you'd have an input other than 1 it will always default to the second choice. i.e. if let's say my input is 3 it'll go to the else block, even when my input should not be a valid input like say "what's up" it will still go to the else block.

currentGameMode = player2ToRollDice;
return `Player 1, your number is ${player1DiceOrder}. <br><br>Now it's Player 2's turn!`;
}

// player 2 roll dice
if (currentGameMode == player2ToRollDice) {
player2DiceRoll1 = randomRollDice();
player2DiceRoll2 = randomRollDice();
currentGameMode = player2ChooseDiceOrder;
return `Player 2, here's what you rolled! 🎲<br><br> Dice 1: ${player2DiceRoll1} <br> Dice 2: ${player2DiceRoll2} <br><br> Choose your dice order by entering '1' or '2' in the input field.`;
}

// player 2 choose dice order
if (currentGameMode == player2ChooseDiceOrder) {
if (input == "1") {
player2DiceOrder = "" + player2DiceRoll1 + player2DiceRoll2;
} else {
player2DiceOrder = "" + player2DiceRoll2 + player2DiceRoll1;
}
currentGameMode = compareScores;
return `Player 2, your number is ${player2DiceOrder}. <br><br>Let's see who wins!`;
}

// compare player 1 score with player 2 score and define winner
if (currentGameMode == compareScores) {
var player1Score = parseInt(player1DiceOrder);
var player2Score = parseInt(player2DiceOrder);
var resultMessage = "";

if (player1Score > player2Score) {
resultMessage = `🏆 Player 1 wins! 🎉 <br><br> Player 1: ${player1Score} <br>Player 2: ${player2Score} <br><br> Click on the button to play again!`;
} else if (player1Score < player2Score) {
resultMessage = `🏆 Player 2 wins! 🎉<br><br> Player 1: ${player1Score} <br>Player 2: ${player2Score} <br><br> Click on the button to play again!`;
} else {
resultMessage = `It's a tie! 🤝<br><br> Player 1: ${player1Score} <br>Player 2: ${player2Score} <br><br> Click on the button to play again!`;
}

currentGameMode = playerToRollDice;
return resultMessage;
}
};