diff --git a/rock-paper-scissors-master/README.md b/rock-paper-scissors-master/README.md new file mode 100644 index 0000000..e3c6e33 --- /dev/null +++ b/rock-paper-scissors-master/README.md @@ -0,0 +1,75 @@ +# rock-paper-scissors + +These instructions were borrowed from [TheOdinProject](https://www.theodinproject.com/). + +## Updates +[Click here for Part 2](#part-2) - **due Wednesday, September 18 at 11:59 p.m.** + +## Introduction + +We're going to make a simple implementation of the grade-school classic "rock paper scissors". If you don't know what that is, check the [Wikipedia article](https://en.wikipedia.org/wiki/Rock%E2%80%93paper%E2%80%93scissors) or [this](https://www.wikihow.com/Play-Rock,-Paper,-Scissors) step-by-step. + +For the moment we're just going to play the game from the browser console. In the future, we'll look at adding a front-end! + +### Project files + +We'll use JavaScript in the browser for this assignment, so your workflow will be slightly different from how we've used JavaScript previously. + +* **index.html** + - Blank HTML file that includes an external JavaScript file, `game.js` + - If you want to learn more about including JavaScript to your page, check out [this link](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#How_do_you_add_JavaScript_to_your_page) + +* **game.js** + - Add all of your JavaScript code here! + +Your game is going to be played completely from the console, so don't worry about putting anything else in `index.html`. + +### Working with JavaScript in the browser + +Make changes to `game.js` and save them. I've just added a "Hello, world!" `console.log` statement. + +Open up `index.html` in a web browser and then open up the browser’s console by right-clicking on the blank webpage and selecting “Inspect” or “Inspect Element”. + +In the ‘Developer Tools’ pane find and select the ‘Console’ tab, where you should see the output of `game.js`. + +## Assignment instructions +1. Your game is going to play against the computer, so begin with a function called `computerPlay` that will randomly return either 'Rock', 'Paper' or 'Scissors'. We'll use this function in the game to make the computer's play. +2. Write a function that plays a single round of Rock Paper Scissors. The function should take two parameters - the `playerSelection` and `computerSelection` - and then return a string that declares the winner of the round like so: `"You Lose! Paper beats Rock"` + 1. Make your function case insensitive (so users can input `rock`, `ROCK`, `RocK` or any other variation) + + 2. __Important note:__ you want to `return` the results of this function call, _not_ `console.log()` them. To test this function console.log the results: + + ~~~javascript + function playRound(playerSelection, computerSelection) { + // your code here! + } + + const playerSelection = 'rock' + const computerSelection = computerPlay() + console.log(playRound(playerSelection, computerSelection)) + ~~~ + + ​ +3. Write a NEW function called `game()`. Use the previous function _inside_ of this one to play a 5 round game that keeps score and reports a winner or loser at the end. + 1. At this point you should still just be using `console.log()` to display the results of each round and the winner at the end. + 2. Use `prompt()` to get input from the user. [Read the docs here if you need to.](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) + 3. Feel free to re-work your previous functions if you need to. Specifically, you might want to change the return value to something more useful. + 4. Feel free to create more "helper" functions if you think it would be useful. + +## Part 2 +**Now with the DOM!** + +1. Create a new branch for part 2. Replace `` with the name of your branch. +``` +git checkout -b +``` +You will commit and push to this branch just like how you've been working previously. Creating a new branch means that you won't lose the work you did for part 1 (the work you did for part 1 will still exist on the branch you've been using before). + +2. For now, remove the logic that plays exactly five rounds. + +3. Create three buttons, one for each selection. Add an event listener to the buttons that calls your `playRound` function with the correct `playerSelection` every time a button is clicked. (you can keep the console.logs for this step) +4. Add a div for displaying results and change all of your console.logs into DOM methods. +5. Display the running score, and announce a winner of the game once one player reaches 5 points. +6. You will likely have to refactor (rework/rewrite) your original code to make it work for this. That’s OK! Reworking old code is an important part of the programmer’s life. +7. Update your CSS and add some style to your game. Have fun with it! +8. When you submit a pull request, make sure you use the branch that you worked on instead of `master` (the branch created in step 1). diff --git a/rock-paper-scissors-master/_DS_Store b/rock-paper-scissors-master/_DS_Store new file mode 100644 index 0000000..44f7028 Binary files /dev/null and b/rock-paper-scissors-master/_DS_Store differ diff --git a/rock-paper-scissors-master/game.js b/rock-paper-scissors-master/game.js new file mode 100644 index 0000000..a3ae46a --- /dev/null +++ b/rock-paper-scissors-master/game.js @@ -0,0 +1,99 @@ +let userScore = 0; +let computerScore = 0; +const userScore_span = document.getElementById("user-score"); +const computerScore_span = document.getElementById("computer-label"); +const scoreBoard_div = document.querySelector(".scoreboard"); +const result_p = document.querySelector(".result > p"); +const rock_div = documnet.getElementById("r"); +const paper_div = documnet.getElementById("p"); +const scissor_div = documnet.getElementById("s"); + +function getComputerChoice (){ + const choices = ['r', 'p', 's']; + const randomNumber = Math.floor(Math.random() * 3); + return choices[randomNumber]; +} + +function convertToWord (letter){ + if (letter === "r") return "RocK"; + if (letter === "p") return "paper"; + return "Scissors"; +} + + + +function win( userChoice, computerChoice){ + const smallUserWord = "user".fontsize(3).sub(); + const smallCompWorld = "comp".fontsize(3).sub(); + const userChoice_div = document.getElementById(userChoice); + userScore++; + userScore_span.innerhtml = userScore; + computerScore_span.innerHTML = computerScore + result_p.innerHTML = `${convertToWord(userChoice)}${smallUserWord} beats ${convertToWord(computerChoice)}${smallCompWorld}. You Win!≈`; + userChoice_div.classList.add('green-glow') + setTimeOut(() => userChoice_div.classList.remove('green-glow'), 1000) + } + + + + + + +//setTimeOut(function() {console.log("Hello")}, 3000) + +function lose(userChoice, computerChoice){ + const smallUserWord = "user".fontsize(3).sub(); + const smallCompWorld = "comp".fontsize(3).sub(); + const userChoice_div = document.getElementById(userChoice); + computerScore++; + userScore_span.innerhtml = userScore; + computerScore_span = computerScore; + computerScore_span.innerHTML = computerScore + result_p.innerHTML = `${convertToWord(userChoice)}${smallUserWord} looses to ${convertToWord(computerChoice)}${smallCompWorld}. You Lost!≈`; + userChoice_div.classList.add('red-glow') + setTimeOut(() => userChoice_div.classList.remove('red-glow'), 1000) + +} + +function draw(userChoice, computerChoice){ + const smallUserWord = "user".fontsize(3).sub(); + const smallCompWorld = "comp".fontsize(3).sub(); + const userChoice_div = document.getElementById(userChoice); + result_p.innerHTML = `${convertToWord(userChoice)}${smallUserWord} beats ${convertToWord(computerChoice)}${smallCompWorld}. it is a draw!`; + userChoice_div.classList.add('gray-glow') + setTimeOut(() => userChoice_div.classList.remove('gray-glow'), 1000) +} + +function game (userChoice) { +const computerChoice = getComputerChoice(); +switch (userChoice + computerChoice) { + case "rs": + case "pr": + case "sp": + win(userChoice + computerChoice); + break; + case "rp": + case "ps": + case "sr": + lose(userChoice + computerChoice); + break; + case "rr": + case "pp": + case "ss": + draw(userChoice + computerChoice); + break; + } +} + + +function main(){ + rock_div.addEventListener('click',() => game("r")); + + paper_div.addEventListener('click',() => game("p")); + + scissor_div.addEventListener('click',() => game("s")); + + +} + +main(); diff --git a/rock-paper-scissors-master/imgs/_DS_Store b/rock-paper-scissors-master/imgs/_DS_Store new file mode 100644 index 0000000..f94c42c Binary files /dev/null and b/rock-paper-scissors-master/imgs/_DS_Store differ diff --git a/rock-paper-scissors-master/imgs/paper.png b/rock-paper-scissors-master/imgs/paper.png new file mode 100644 index 0000000..3083555 Binary files /dev/null and b/rock-paper-scissors-master/imgs/paper.png differ diff --git a/rock-paper-scissors-master/imgs/rock.png b/rock-paper-scissors-master/imgs/rock.png new file mode 100644 index 0000000..f05d7fd Binary files /dev/null and b/rock-paper-scissors-master/imgs/rock.png differ diff --git a/rock-paper-scissors-master/imgs/scissor.png b/rock-paper-scissors-master/imgs/scissor.png new file mode 100644 index 0000000..44d7c79 Binary files /dev/null and b/rock-paper-scissors-master/imgs/scissor.png differ diff --git a/rock-paper-scissors-master/index.html b/rock-paper-scissors-master/index.html new file mode 100644 index 0000000..6dcc22d --- /dev/null +++ b/rock-paper-scissors-master/index.html @@ -0,0 +1,42 @@ + + + + + Rock, Paper, Scissors game! + + + + + +
+

Rock, Paper, Scissors

+
+
+
user
+
comp
+ 0:0 +
+ +
+

Paper covers rock, You Win!

+
+ +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +

Make Your Move

+ + + diff --git a/rock-paper-scissors-master/styles.css b/rock-paper-scissors-master/styles.css new file mode 100644 index 0000000..15654e3 --- /dev/null +++ b/rock-paper-scissors-master/styles.css @@ -0,0 +1,118 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background-color: #25272E; + +} +header { + background: white; + padding: 20px; +} + +header > h1{ + color: #25272E; + text-align: center; + font-family: 'Nunito', sans-serif; +} + + +.score-board { + margin: 20px auto; + border: 3px solid white; + border-radius: 4px; + text-align: center; + width: 200px; + color: white; + font-size: 46px; + padding: 15px 20px; + font-family: 'Nunito', sans-serif; + position: relative; +} + + +.badge { + background: #E2584D; + color: white; + font-size: 16px; + padding: 2px 10px; + font-family: 'Nunito', sans-serif; +} + +#user-label { + position: absolute; + top: 30px; + left: -20px; + +} + +#computer-label { + position: absolute; + top: 30px; + right: -30px; + +} + + +.result{ + font-size: 40px; + color: white; + +} + +.result p { + text-align: center; + font-family: 'Nunito', sans-serif; + font-weight: bold; +} + + +.choices { + margin: 50px 0; + +} + +.choice { + border: 4px solid white; + border-radius: 50%; + margin: 0 20px; + padding: 20px; + display: inline-block; + transition: all 0.3s ease; +} + +.choice:img{ + text-align: right; +} + +.choice:hover{ + cursor: pointer; + background: blue; +} + +#action_message{ + text-align: center; + color: white; + font-family: 'Nunito', sans-serif; + font-weight: bold; + font-size: 20px; + margin-top: +} + +.green-glow{ + border: 4px solid #4dcc7d; + box-shadow: 0 0 10px #31b43a; +} + +.red-glow{ + border: 4px solid #fc121b; + box-shadow: 0 0 10px #d01115; + } + + .gray-glow{ + border: 4px solid #464647; + box-shadow: 0 0 10px #25292b; + }