Create rock paper sissor.html

[rtamilarasan11]

rockpapesissor

<title>Rock Paper Scissors</title> <script src="rps.js"></script>

welcome

Rock Paper Scissor

</div>

<div id="container"></div>
<div class="container">
  <h1 class="heading">Rock Paper Scissor</h1>
  <h2>Choose your hand</h2>
  
  <div id="rps-div">
    <img
      src="https://www.seekpng.com/png/detail/816-8161371_rock-paper-scissor-icon-png.png"
      alt="rock"
      id="rock"
      onclick="game(this)"
    />
    <img
      src="https://www.pngitem.com/pimgs/m/266-2667252_transparent-rock-paper-scissors-clipart-rock-paper-scissors.png"
      alt="paper"
      id="paper"
      onclick="game(this)"
    />
    <img
      src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4KAZtQUpeqelxjO89TJxMfAFtWsX1SCIwCXNaY3HNhfKSy5WTZKEF4K5nWX7upL5NvKo&usqp=CAU"
      alt="scissor"
      id="scissor"
      onclick="game(this)"
    />
  </div>
</div>

========================================================
css:

body {
min-height: 220vh;
display: grid;
place-items: center;
padding: 0;
margin: 0;
font-family: "Open Sans", sans-serif;
background-image: url(tall-trees-forest-mountains-covered-with-fog.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.container {
border: 2px solid black;
padding: 20px;
padding-left: 70px;
padding-right: 70px;
background-color: rgba(43, 146, 155, 0.3);
}
h1,
h2 {
font-size: 45px;
text-align: center;
text-decoration: none;
}
.heading {
color: black;
text-shadow: 2px 2px 5px rgb(30, 34, 37);
}
h2 {
color: #171b2e;
font-size: 25px;
}
#rps-div {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
img {
height: 150px;
width: auto;
border: none;
margin: 20px;
margin-top: 30px;

}
img:hover{
box-shadow: 3px 3px 10px 10px rgb(84, 97, 108) ;
}
#arrow{
position: relative;
left: 100px;

}
js file:===================================================

function game(yourChoice) {
var player, computer;

player = yourChoice.id;
console.log('Your Choice: ', player)

computer = computerChoice(generateRandomNumber());
console.log('Computer choice: ', computer);

results = decideWinner(player, computer);
console.log(results);

message = findMessage(results);
console.log(message);

frontEnd(player, computer, message);

}

function generateRandomNumber() {
return Math.floor(Math.random() * 3);
}

function computerChoice(number) {
return ['rock', 'paper', 'scissor'][number];
}

//cases for winning game
function decideWinner(yourChoice, computerChoice) {
var rpsDatabase = {
'rock': { 'rock': 0.5, 'paper': 0, 'scissor': 1 },
'paper': { 'rock': 1, 'paper': 0.5, 'scissor': 0 },
'scissor': { 'rock': 0, 'paper': 1, 'scissor': 0.5 }
}
//outpus is in format [0,1]
var yourScore = rpsDatabase[yourChoice][computerChoice];
var computerScore = rpsDatabase[computerChoice][yourChoice];

return [yourScore, computerScore];

}

function findMessage([yourScore, computerScore]) {
if (yourScore === 1) {
return { 'text': 'You Win', 'color': '#40C4FF' };
}
else if (yourScore === 0) {
return { 'text': 'You Lose', 'color': '#FF5252' };
}
else {
return { 'text': 'Draw', 'color': 'white' };
}
}

function frontEnd(player, computer, message) {
var imageDatabase = {
'rock': document.getElementById('rock').src,
'paper': document.getElementById('paper').src,
'scissor': document.getElementById('scissor').src
};

document.getElementById('rock').remove();
document.getElementById('paper').remove();
document.getElementById('scissor').remove();


var humandiv = document.createElement('div');
var computerdiv = document.createElement('div');
var messagediv = document.createElement('div');

humandiv.innerHTML = "<img src='" + imageDatabase[player] + "' height=150 width=auto style='box-shadow: 3px 3px 10px 10px #40C4FF'>";
messagediv.innerHTML = "<h1 style='color:" + message['color'] + "; font-size:50px; padding: 20px;'>" + message['text'] + "</h1>";
computerdiv.innerHTML = "<img src='" + imageDatabase[computer] + "'height=150 width=auto style='box-shadow: 3px 3px 10px 10px #FF5252'>";

document.getElementById('rps-div').appendChild(humandiv);
document.getElementById('rps-div').appendChild(messagediv);
document.getElementById('rps-div').appendChild(computerdiv);

}