diff --git a/game.js b/game.js index 3d7e01b..ba278fb 100644 --- a/game.js +++ b/game.js @@ -1,3 +1,54 @@ -// Write all your code here -// Replace the contents of this file with your own code -console.log('Hello, world!'); + +const options = ['rock', 'paper', 'scissors']; + +document.getElementById('rock').addEventListener('click', function(e){ + let round = playRound('rock', computerPlay()); +}); +document.getElementById('paper').addEventListener('click', function(e){ + let round = playRound('paper', computerPlay()); +}); +document.getElementById('scissors').addEventListener('click', function(e){ + let round = playRound('scissors', computerPlay()); +}); + +//computer's choice +function computerPlay() { + return options[Math.floor(Math.random() * options.length)]; +} + +function addPointsToUser(){ + points += 1; + document.getElementById("userScore")[0].innerHTML = points; +} + +function addPointsToComp(){ + points += 1; + document.getElementById("pcScore")[1].innerHTML = points; +} + + +function playRound(playerSelection, computerSelection) { + +if (playerSelection === computerSelection) { + document.getElementById("p").innerHTML = "You made the same choice! Try Again"; + + } else if((playerSelection === 'paper' && computerSelection === 'rock') || + (playerSelection === 'rock' && computerSelection === 'scissors') || + (playerSelection === 'scissors' && computerSelection === 'paper')) { + document.getElementById("p").innerHTML = "You win! You chose:" + playerSelection; + addPointsToUser(); + } + else{ document.getElementById("p").innerHTML = "Computer win!"; + addPointsToComp(); + } +} + + /* function game() { + let rounds= 0; +while (rounds < 5) { +const result = playRound(playerSelection, computerPlay()); +const whoisthewinner = prompt(result); +rounds++; + } +} +game(); */ diff --git a/images/paper.png b/images/paper.png new file mode 100644 index 0000000..1fad4bf Binary files /dev/null and b/images/paper.png differ diff --git a/images/rock.png b/images/rock.png new file mode 100644 index 0000000..87e9285 Binary files /dev/null and b/images/rock.png differ diff --git a/images/scissors.png b/images/scissors.png new file mode 100644 index 0000000..18db5eb Binary files /dev/null and b/images/scissors.png differ diff --git a/index.html b/index.html index 947177f..00a139b 100644 --- a/index.html +++ b/index.html @@ -3,8 +3,49 @@ Rock, Paper, Scissors! + + +
+

Rock, Paper, Scissors!

+
+ +

MAKE YOUR MOVE!

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

+ +
+ +
+ rockpic +
+ +
+ paperpic +
+ +
+ scissorspic +
+ +
+ + + + + + +
+ diff --git a/style.css b/style.css new file mode 100644 index 0000000..9ce76ef --- /dev/null +++ b/style.css @@ -0,0 +1,70 @@ +@import url('https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap'); +@import url('https://fonts.googleapis.com/css?family=Alegreya|Cardo|Permanent+Marker&display=swap'); +@import url('https://fonts.googleapis.com/css?family=Bangers&display=swap'); +@import url('https://fonts.googleapis.com/css?family=Playfair+Display&display=swap'); + +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +#header { + background-color: rgb(179, 0, 0); + font-size: 100px; + margin: 10px; +} + +#do-it-message{ + font-size: 35px; + text-align: center; + color: rgb(0, 204, 204); + font-family: 'Permanent Marker', cursive; +} + +header > h1 { + color: black; + text-align: center; +font-family: 'Bangers', cursive; +} + +.scoreBoard { + margin: 22px auto; + border: 3px solid black; + text-align: center; + width: 300px; + color: rgb(0, 102, 102); + font-size: 30px; + padding: 15px 20px; + font-family:'Permanent Marker', cursive; +font-family: 'Alegreya', serif; +font-family: 'Cardo', serif; +} + +#p{ + text-align: center; + font-family: 'Playfair Display', serif; + font-size: 30px; + color: rgb(179, 0, 0); + +} +.choices{ + text-align: center; + margin: 50px 0; +} + +img { + width: 300px; +} + +.choice{ + border-radius: 50%; + margin: 0 20px; + padding: 10px; + display: inline-block; + transition: all 0.3s ease; +} +.choice:hover{ +curser: pointer; +background-color: rgb(179, 0, 0); +}