I made a simple rock paper scissors game using HTML JavaScript & CSS & RandoJs For Random Picks But i am having Some Logic Issues
var rock = document.getElementById("rock"); // Getting User pickable Rock Element
var paper = document.getElementById("paper"); // Getting User Pickable Paper Element
var scissor = document.getElementById("scissor"); // Getting User Pickable Scissor Element
let robotPick = ["rock", "paper", "scissor"]; // What Robot Can Pick
// Getting Human Score Element For Changing Scores
var humanScore = document.getElementById("humanScore");
var robotScore = document.getElementById("robotScore");
var message = document.getElementById("message"); // Getting message Element
// Adding Event Listeners To Pickable Elements
window.addEventListener("load", function(e) {
rock.addEventListener("click", function(e) { checkWin("rock"); });
paper.addEventListener("click", function(e) { checkWin("paper"); });
scissor.addEventListener("click", function(e) { checkWin("scissor"); });
});
function checkWin(pick) {
let humanPick = pick;
let picks = rando(robotPick).index; // What Robot Will Pick is Generated Randomly using RandoJS
let whoWon; // This Will Contain Who Won
// Main Logic
if (humanPick === "rock" || robotPick[picks] === "rock") whoWon = "tie";
if (humanPick === "rock" || robotPick[picks] === "paper") whoWon = "robot";
if (humanPick === "rock" || robotPick[picks] === "scissor") whoWon = "human";
if (humanPick === "paper" || robotPick[picks] === "paper") whoWon = "tie";
if (humanPick === "paper" || robotPick[picks] === "scissor") whoWon = "robot";
if (humanPick === "paper" || robotPick[picks] === "rock") whoWon = "human";
if (humanPick === "scissor" || robotPick[picks] === "scissor") whoWon = "tie";
if (humanPick === "scissor" || robotPick[picks] === "rock") whoWon = "robot";
if (humanPick === "scissor" || robotPick[picks] === "paper") whoWon = "human";
// Checking Who Won!
if (whoWon === "human") {
let x = parseInt(humanScore.innerHTML);
message.innerHTML = "Robot Chose " + robotPick[picks];
x++; humanScore.innerHTML = x;
}
if (whoWon === "robot") {
let x = parseInt(robotScore.innerHTML);
message.innerHTML = "Robot Chose " + robotPick[picks];
x++; robotScore.innerHTML = x;
}
if (whoWon === "tie") {
let x = parseInt(robotScore.innerHTML);
message.innerHTML = "Robot Chose " + robotPick[picks];
x++; robotScore.innerHTML = x;
}
}<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rock, Paper & Scissors</title>
<style>*{transition:all 0.2s ease;-webkit-transition:all 0.2s ease}body{position:absolute;font-family:sans-serif;transform:translate(-50%, -50%);background:#252525;left:50%;top:50%;user-select:none}.body i{font-size:4em;margin:5px}.score{font-size:1.5em;text-align:center;margin-top:2em}p{margin:20px 0;padding:0;color:#ffd900;font-size:0.9em}#hands{text-align:center}#hands i{margin:10px;font-size:3em;color:#ffd900;cursor:pointer}#hands i:hover{transform:scale(1.3)}.humanScore{color:#48ff00}.robotScore{color:#00ccff}</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<div id="hands">
<i id="rock" class="fas fa-hand-rock"></i>
<i id="paper" class="fas fa-hand-paper"></i>
<i id="scissor" class="fas fa-hand-peace"></i>
</div>
<div class="score">
<span class="humanScore"><i class="fas fa-user-alt"></i> <span id="humanScore">0</span></span>
<span class="robotScore"><i class="fas fa-robot"></i> <span id="robotScore">0</span></span>
<p id="message">Choose First</p>
</div>
<script src="https://randojs.com/2.0.0.js"></script>When there is a Tie it is not working, and I am using RandoJs for randomly picking robot's Pick Is there any other way to do so ?
I have specified what i have done inside of the code using comments
And Also i am using Font Awesome 5 For Icons!
Aucun commentaire:
Enregistrer un commentaire