rock paper scissors game
This commit is contained in:
parent
d38ee342af
commit
3c49cf49a2
3 changed files with 118 additions and 1 deletions
|
@ -18,7 +18,6 @@
|
|||
<h1 class="project-name">Array in a Matrix</h1>
|
||||
<h2 class="project-tagline">Welcome!</h2>
|
||||
<nav>
|
||||
<button class="btn" onclick="darkmode()">Darkmode</button>
|
||||
<a href="https://github.com/array-in-a-matrix" class="btn"
|
||||
><i class="fa fa-github"></i> GitHub</a
|
||||
>
|
||||
|
@ -26,6 +25,10 @@
|
|||
><i class="fa fa-instagram"></i> Instagram</a
|
||||
>
|
||||
</nav>
|
||||
<nav>
|
||||
<button class="btn" onclick="darkmode()">Darkmode</button>
|
||||
<a href="index/RPS.html" class="btn">Rock Paper Scissors</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="main-content">
|
||||
<h1>Welcome to my page</h1>
|
||||
|
|
46
index/RPS.html
Normal file
46
index/RPS.html
Normal file
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="../style.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<title>Array in a Matrix</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#157878" />
|
||||
<script src="../script.js" defer></script>
|
||||
</head>
|
||||
|
||||
<body data-new-gr-c-s-check-loaded="8.872.0" data-gr-ext-installed>
|
||||
<header class="page-header">
|
||||
<h1 class="project-name">Array in a Matrix</h1>
|
||||
<h2 class="project-tagline">Welcome!</h2>
|
||||
<nav>
|
||||
<button class="btn" onclick="darkmode()">Darkmode</button>
|
||||
<a href="../index.html" class="btn"> Home</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="main-content">
|
||||
<h1>Simple rock paper scissors game</h1>
|
||||
<p>made with Javascript</p>
|
||||
<section class="page-header">
|
||||
<script src="RPS.js"></script>
|
||||
<button class="btn" onclick="play('rock')">ROCK</button>
|
||||
<button class="btn" onclick="play('paper')">PAPER</button>
|
||||
<button class="btn" onclick="play('scissors')">SCISSORS</button>
|
||||
<!-- <button class="btn" onclick="play('bomb')">BOMB</button> -->
|
||||
<div id="game">
|
||||
<div id="score">
|
||||
<p id="text"></p>
|
||||
<strong id="winner"></strong>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="site-footer">
|
||||
<span class="site-footer-credits">This page is work-in-progress.</span>
|
||||
</footer>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
68
index/RPS.js
Normal file
68
index/RPS.js
Normal file
|
@ -0,0 +1,68 @@
|
|||
let userChoice = ""
|
||||
|
||||
const getUserChoice = (userInput) => {
|
||||
userChoice = userInput
|
||||
};
|
||||
|
||||
function getComputerChoice() {
|
||||
let cpuChoice = Math.floor(Math.random() * 3);
|
||||
if (cpuChoice === 0) {
|
||||
return "rock";
|
||||
} else if (cpuChoice === 1) {
|
||||
return "paper";
|
||||
} else if (cpuChoice === 2) {
|
||||
return "scissors";
|
||||
}
|
||||
}
|
||||
|
||||
function determineWinner(userChoice, computerChoice) {
|
||||
if (userChoice === computerChoice) {
|
||||
return "Tie game!";
|
||||
}
|
||||
if (userChoice === "rock") {
|
||||
if (computerChoice === "paper") {
|
||||
return "Computer won!";
|
||||
} else {
|
||||
return "You won!";
|
||||
}
|
||||
}
|
||||
if (userChoice === "paper") {
|
||||
if (computerChoice === "scissors") {
|
||||
return "Computer won!";
|
||||
} else {
|
||||
return "You won!";
|
||||
}
|
||||
}
|
||||
if (userChoice === "scissors") {
|
||||
if (computerChoice === "rock") {
|
||||
return "Computer won!";
|
||||
} else {
|
||||
return "You won!";
|
||||
}
|
||||
}
|
||||
if (userChoice === "bomb") {
|
||||
return "You won with cheats!";
|
||||
}
|
||||
}
|
||||
|
||||
function playGame() {
|
||||
var computerChoice = getComputerChoice();
|
||||
console.log("Player: " + userChoice);
|
||||
console.log("CPU: " + computerChoice);
|
||||
console.log(determineWinner(userChoice, computerChoice));
|
||||
|
||||
var div = document.getElementById('score')
|
||||
var p = document.getElementById("text");
|
||||
var strong = document.getElementById("winner");
|
||||
|
||||
p.textContent = `You: ${userChoice}`
|
||||
p.textContent += ` CPU: ${computerChoice}`
|
||||
strong.textContent = determineWinner(userChoice, computerChoice);
|
||||
document.getElementById("game").appendChild(div).appendChild(p)
|
||||
document.getElementById("game").appendChild(div).appendChild(strong)
|
||||
}
|
||||
|
||||
function play(input){
|
||||
getUserChoice(input)
|
||||
playGame()
|
||||
}
|
Loading…
Add table
Reference in a new issue