array-in-a-matrix/arrayinamatrix.xyz
array-in-a-matrix/arrayinamatrix.xyz
1
0
Fork 0
Code Issues 3 Pull requests Projects Releases Activity

rock paper scissors game

Browse source
This commit is contained in:
array-in-a-matrix 2021-06-09 17:53:37 -04:00
parent d38ee342af
commit 3c49cf49a2
3 changed files with 118 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
index.html
View file

@ -18,7 +18,6 @@
<h1 class="project-name">Array in a Matrix</h1> <h1 class="project-name">Array in a Matrix</h1>
<h2 class="project-tagline">Welcome!</h2> <h2 class="project-tagline">Welcome!</h2>
<nav> <nav>
<button class="btn" onclick="darkmode()">Darkmode</button>
<a href="https://github.com/array-in-a-matrix" class="btn" <a href="https://github.com/array-in-a-matrix" class="btn"
><i class="fa fa-github"></i> GitHub</a ><i class="fa fa-github"></i> GitHub</a
> >
@ -26,6 +25,10 @@
><i class="fa fa-instagram"></i> Instagram</a ><i class="fa fa-instagram"></i> Instagram</a
> >
</nav> </nav>
<nav>
<button class="btn" onclick="darkmode()">Darkmode</button>
<a href="index/RPS.html" class="btn">Rock Paper Scissors</a>
</nav>
</header> </header>
<main class="main-content"> <main class="main-content">
<h1>Welcome to my page</h1> <h1>Welcome to my page</h1>

46
index/RPS.html Normal file
View 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
View 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()
}