HEEL Rock Paper Scissors

Developer
Joe Warren
Size
5,433 Kb
Views
50,600
  1. HEEL Rock Paper Scissors Previews
  2. HEEL Rock Paper Scissors HTML Codes
  3. HEEL Rock Paper Scissors CSS Codes
  4. HEEL Rock Paper Scissors JS Codes

How do I make an heel rock paper scissors?

What is a heel rock paper scissors? How do you make a heel rock paper scissors? This script and codes were developed by Joe Warren on 04 July 2022, Monday.

HEEL Rock Paper Scissors Previews
IQ Test

HEEL Rock Paper Scissors - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>HEEL Rock Paper Scissors</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<head>	<title>HEEL Rock Paper Scissors</title>	<link rel="stylesheet" type="text/css" href="styles.css"> <link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Lobster|Noto+Serif:400,700" rel="stylesheet">
</head>
<body> <header class="header"> <div class="container"> <h1><span class="rock">HEEL Rock</span>, <span class="paper">paper</span>, <span class="scissors">scissors<span class="jabroni"> JABRONI!</span></h1> </div> </header> <div class="main"> <div class="container"> <section class="content"> <button class="play rock" type="button" onclick="play('rock')"></button> <button class="play paper" type="button" onclick="play('paper')"></button> <button class="play scissors" type="button" onclick="play('scissors')"></button> <div style="clear:both;"></div> <p><span id="player"></span> <span id="opponent"></span></p> <h2 id="results"></h2> </section> <aside class="aside"> <div class="scorebox"> <h2>Score</h2> <div class="score-num"><span id="wins">0</span> <br />wins</div> <div class="score-divider"><span>-</span></div> <div class="score-num"><span id="loses">0</span> <br />loses</div> </div> <button type="reset" id="reset" onclick="reset()">reset scores</button> </aside> </div>
</div>
<div class=footer> Copyright © 2017 All Rights Reserved.</div>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript"> src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"</script>
</body>
</html> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

HEEL Rock Paper Scissors - Script Codes CSS Codes

body { background-color: white; color: #777777; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-size: 1.6rem;
}
.main { background-color: white;
}
.header { background-color: #efefef; border: 1px solid #efefef; border-bottom: 2px solid gainsboro;
}
.header h1 { color: #4a4a4c;
}
.jabroni { color: #efefef;
}
.jabroni:hover { color: #00aae3; font-weight: bold; font-family: 'Patua One', serif; color: red; text-shadow: 1px 2px 1px grey;
}
h1 span.rock { font-family: 'Noto Serif', Helvetica, Arial, sans-serif; font-size: 36px; font-size: 3.6rem; color: red; text-shadow: 1px 2px 1px grey;
}
h1 span.paper { font-family: 'Lobster', cursive, sans-serif; font-size: 48px; font-size: 4.8rem;
}
h1 span.scissors { font-family: 'Gloria Hallelujah', "klinic_slablight", Georgia, Times, "Times New Roman", serif; font-size: 48px; font-size: 4.8rem;
}
button.play { border-radius: 10px; border: 4px solid white;
}
button.play.rock { background: #efefef url("http://is4.mzstatic.com/image/thumb/Purple62/v4/01/fc/75/01fc753b-e02a-cc00-04cb-bfcad8619600/source/175x175bb.jpg") no-repeat; background-size: 175px 175px;
}
button.play.paper { background: #efefef url("http://www.10paperairplanes.com/images/201-greatest-paper-airplanes.jpg") no-repeat; background-size: 175px 175px;
}
button.play.scissors { background: #efefef url("http://is2.mzstatic.com/image/thumb/Purple/v4/70/5a/d5/705ad5d0-6453-fd6f-d639-39945dd96a03/source/175x175bb.jpg") no-repeat; background-size: 175px 175px;
}
button.play:hover { border: 4px solid #dd0000;
}
button#reset { font-size: 12px; font-size: 1.2rem; color: #777777; background-color: gainsboro; border-radius: 10px;
}
h2#results { color: #444444; font-size: 24px; font-size: 2.4rem;
}
p { font-size: 18px; font-size: 1.8rem;
}
.scorebox { background-color: #efefef; border: 4px solid #efefef; border-radius: 10px;
}
.scorebox h2 { color: #777777; font-weight: 600; font-size: 24px; font-size: 2.4rem;
}
span#loses,
span#wins { font-size: 48px; font-size: 4.8rem; color: #dd0000; font-family: "haymakerregular", Helvetica, Arial, sans-serif;
}
.score-divider span { font-size: 40px; font-size: 4rem; color: #dd0000; font-weight: 200;
}
div.score-num,
div.score-divider { font-size: 18px; font-size: 1.8rem; color: #777777; font-weight: 600; text-align: center;
}
html { font-size: 62.5%;
}
body { margin: 0; padding: 0;
}
.header { position: relative; width: 100%; height: 110px; height: 11rem;
}
.header h1 { margin: 20px auto;
}
.main { width: 100%; min-height: 350px; min-height: 35rem; padding-top: 80px;
}
.footer { position: fixed; right: 0; bottom: 0; left: 0; padding: 1rem; background-color: #efefef; text-align: center;
}
.footer h2 { margin: 0; padding: 0 0 5px 0;
}
.container { position: relative; width: 960px; width: 96rem; margin: 0 auto; padding: 0;
}
.content { width: 630px; width: 63rem; float: left;
}
.aside { width: 330px; width: 33rem; float: right;
}
.scorebox { box-sizing: border-box; width: 195px; width: 19.5rem; height: 175px; height: 17.5rem; padding: 5px; margin: 0 auto 15px auto;
}
.scorebox h2 { margin: 15px 0 10px 10px;
}
.score-num,
.score-divider { float: left;
}
.score-num { width: 40%;
}
.score-divider { width: 20%;
}
button .play { box-sizing: border-box; display: inline-block; width: 175px; width: 17.5rem; height: 175px; height: 17.5rem; padding: 5px; margin-right: 30px;
}
button #reset { width: 120px; width: 12rem; height: 35px; height: 3.5rem; line-height: 1em; float: right; margin-right: 105px; border: 0;
}
.header { position: relative; width: 100%; height: 110px; height: 11rem;
}
.header h1 { margin: 20px auto;
}
.footer h2 { margin: 0; padding: 0 0 5px 0;
}
button.play { box-sizing: border-box; display: inline-block; width: 175px; width: 17.5rem; height: 175px; height: 17.5rem; padding: 5px; margin-right: 30px;
}
button#reset { width: 120px; width: 12rem; height: 35px; height: 3.5rem; line-height: 1em; float: right; margin-right: 105px; border: 0;
}
.scorebox { box-sizing: border-box; width: 195px; width: 19.5rem; height: 175px; height: 17.5rem; padding: 5px; margin: 0 auto 15px auto;
}
.scorebox h2 { margin: 15px 0 10px 10px;
}
div.score-num,
div.score-divider { float: left;
}
div.score-num { width: 40%;
}
div.score-divider { width: 20%;
}

HEEL Rock Paper Scissors - Script Codes JS Codes

var loses = 0;
var wins = 0;
var play = function(userChoice) { document.getElementById("player").innerHTML=""; document.getElementById("opponent").innerHTML=""; document.getElementById("results").innerHTML=""; if (userChoice === "rock" || userChoice === "paper" || userChoice === "scissors") { document.getElementById("player").innerHTML='You chose ' + userChoice + '.'; } else { document.getElementById("player").innerHTML="That is not a valid choice. Try again, jabroni!"; return false; }
var computerChoice = Math.random(); //Math.random() randomly picks a number 0-1
if (computerChoice < 0.34) { computerChoice = "rock";
} else if(computerChoice <= 0.67) { computerChoice = "paper";
} else { computerChoice = "scissors";
}
document.getElementById("opponent").innerHTML='// Your opponent chose ' + computerChoice + '.';
var compare = function(choice1, choice2) { if (choice1 === choice2) { return("We don't end in ties around here. Choose again, jabroni!"); } else if (choice1 === "rock") { if (choice2 === "scissors") { loses++; return("IT DOESN'T MATTER if you chose rock! Computer will take their scissors, shine them up real nice, turn them sideways, and stick them straight up your fake rock!"); } else { loses++; return("How dare you try to choose rock! Computer laid the smackdown with paper! You lose..."); } } else if (choice1 === "paper") { if (choice2 === "rock") { loses++; return("IT DOESN'T MATTER if computer chose rock and you chose paper! You still lose."); } else { loses++; return("Computer chose scissors which means you've been checked into Smackdown Hotel. You LOSE!"); } } else if (choice1 === "scissors") { if (choice2 === "rock") { loses++; return("Computer chose rock which results in a Rock Bottom AND People's Elbow. 1-2-3. YOU LOSE!"); } else { loses++; return("Computer chose Paper. Since you decided NOT to smell what rock was cooking, you LOSE!"); } }
};
var winner = compare(userChoice,computerChoice);
document.getElementById("results").innerHTML=winner;
document.getElementById("wins").innerHTML=wins;
document.getElementById("loses").innerHTML=loses;
if (wins > 99 || loses > 99) { document.getElementById("wins").style.fontSize="44"; document.getElementById("loses").style.fontSize="44";
}
if (wins > 999) { alert("You reached the max score of 999. <br />Congratulations, you are the new People's Champion.");
}
if (loses > 999) { alert("Your opponent reached the max score of 999. <br />You ought to be ashamed of yourself, jobber...");
}
};
var reset = function() { loses = 0; wins = 0; document.getElementById("wins").innerHTML=wins; document.getElementById("loses").innerHTML=loses;
};
HEEL Rock Paper Scissors - Script Codes
HEEL Rock Paper Scissors - Script Codes
Home Page Home
Developer Joe Warren
Username MightyJoeW
Uploaded July 04, 2022
Rating 3
Size 5,433 Kb
Views 50,600
Do you need developer help for HEEL Rock Paper Scissors?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Joe Warren (MightyJoeW) Script Codes
Name
A Pen by Joe Warren
Joe Warren Portfolio
React basic lesson
Joe Warren Portfolio Deluxe
JS Shananigans
Nolan North Tribute Page
Navbar test
JS and the DOM
The Heart
Wikipedia Viewer
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!