Create rock paper sissor.html

[rtamilarasan11]

rockpapesissor

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);

}