RPS-WD 17.7 add model and check function

In this example below you will see how to do a RPS-WD 17.7 add model and check function with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by prbaber, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright prbaber ©
  • HTML
  • CSS
  • JavaScript
    <div class="app">
  <div class="page intro">
    <div id="title">ROCK<br>PAPER<br>SCISSORS</div>
    <div id="gif"></div>
    <div class="play" onclick="play()">PLAY</div>
  </div>
  <div class="page choices">
    <p class="text">CHOOSE!</p>
    <div class="choice right rock" id="rock"></div>
    <div class="choice right paper" id="paper"></div>
    <div class="choice right scissors" id="scissors"></div>
  </div>
  <div class="page game">
    <p class="label">OPPONENT</p>
    <div class="player right raised"></div>
    <div class="player left raised"></div>
    <p class="label">YOU</p>
  </div>
  <div class="page name"></div>
  <div class="page scores"></div>
  <div class="page countdown">3</div>
</div>

<!--preload images-->
<div class="left rock"></div>
<div class="left paper"></div>
<div class="left scissors"></div>

/*Downloaded from https://www.codeseek.co/prbaber/rps-wd-177-add-model-and-check-function-GMWqOm */
    @import url('https://fonts.googleapis.com/css?family=Stardos+Stencil');

.app {
  min-width: 375px;
  max-width: 540px;
  min-height: 700px;
  position: relative;
}

.page {
  width: 100%;
  height: 100%;
  background: blue;
  position: absolute;
}

.text {
  margin: 0;
  font-family: "Stardos Stencil";
  font-size: 50px;
  color: white;
  text-align: center;
}

.choice {
  background: white;
  width: 175px;
  height: 175px;
  margin: 0 auto;
  margin-bottom: 20px;
  border: 2px solid red;
  border-radius: 20px;
  cursor: pointer;
  background-size: 200px 200px;
}

.play {
  width: 200px;
  height: 100px;
  background: white;
  border: 2px solid red;
  border-radius: 20px;
  margin: 40px auto;
  text-align: center;
  font-family: "Stardos Stencil";
  font-size: 50px;
  line-height: 2em;
  color: blue;
  cursor: pointer;
}

.label {
  height: 10%;
  margin: 0;
  text-align: center;
  font-size: 48px;
  color: white;
  font-family: "Stardos Stencil";
  background: blue;
}

.player {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  background: white;
  border: 2px solid blue;
  background-size: 300px 300px;
}

.right.raised {
  background-image: url("https://drive.google.com/uc?id=0BwngqI1oISUCXzhfbDY5bjB4SlU");
}

.right.rock {
  background-image: url("https://drive.google.com/uc?id=0BwngqI1oISUCTEtuMzYtY2ZEdFU");
}

.right.paper {
  background-image: url("https://drive.google.com/uc?id=0BwngqI1oISUCNENxc1dEMnU0VnM");
}

.right.scissors {
  background-image: url("https://drive.google.com/uc?id=0BwngqI1oISUCM0VvNUwwRGN3emM");
}

.left.raised {
  background-image: url("https://drive.google.com/uc?id=0BwngqI1oISUCaG1uZC01NHJiUW8");
}

.left.rock {
  background-image: url("https://drive.google.com/uc?id=0BwngqI1oISUCR0V0aDJ0b2dheTA");
}

.left.paper {
  background-image: url("https://drive.google.com/uc?id=0BwngqI1oISUCSUp6eW1fbDk4YW8");
}

.left.scissors {
  background-image: url("https://drive.google.com/uc?id=0BwngqI1oISUCWldyVmpsbjIwRWc");
}

.countdown {
  background: none;
  font-size: 250px;
  text-align: center;
  padding-top: 200px;
  font-family: "Stardos Stencil";
  color: blue;
}

.result {
  background: none;
  font-size: 12vw;
  text-align: center;
  padding-top: 40vh;
  font-family: "Stardos Stencil";
  color: black;
}

#title {
  color: white;
  height: 33%;
  font-size: 52px;
  font-family: "Stardos Stencil";
  text-align: center;
}

#gif {
  background: white;
  background-image: url("https://drive.google.com/uc?id=0BwngqI1oISUCczhYWXA2OVZMc2s");
  background-repeat: no-repeat;
  background-position: 2px 0px;
  width: 200px;
  height: 200px; 
  border: 6px solid red;
  border-radius: 20px;
  margin: 0 auto;
}



/*Downloaded from https://www.codeseek.co/prbaber/rps-wd-177-add-model-and-check-function-GMWqOm */
    //show intro page only
$(".page").hide();
$(".intro").show();

$(".choice").on("click", choose);

var model = {
  students: ["Grace", "Julia", "Cooper", "Robert", "Christopher", "India", "Owen"], 
  getRandom: function(range){
    return Math.floor(Math.random() * range);
  }
}


function play() {
  $(".intro").hide();
  $(".choices").show();
}

function choose() {
  var userChoice = $(this).attr("id");
  var options = ["rock", "paper", "scissors"];
  var computerChoice = Math.floor(Math.random() * 3);
  computerChoice = options[computerChoice];
  
  model.result = getWinner(userChoice, computerChoice);
  alert(model.result)

  $(".choices").hide();
  $(".game").show();
  //animate hands
  for (var i = 1; i < 7; i++) {
    setTimeout(function() {
      $(".player")
        .toggleClass("raised")
        .toggleClass("rock");
    }, i * 300);
  }

  //set countdown
  var count = 4;
  for (var i = 0; i < 3; i++) {
    setTimeout(function() {
      count--;
      $(".countdown")
        .text(count)
        .show()
        .toggle("puff");
    }, 600 * i + 300);
  }
  //show choices
  setTimeout(function() {
    $(".player.right")
      .toggleClass("raised")
      .toggleClass(computerChoice);
    $(".player.left")
      .toggleClass("raised")
      .toggleClass(userChoice);
    showResult(model.result)
  }, 2100);
  
  
  
}

function getWinner(user, computer){
  if (user === computer){
    return "tie"
    
  } else if (user === "rock"){
    if (computer === "paper"){
      return "computer<br>wins!"
    } else {
      return "user<br>wins!"
    }
    
  } else if (user === "paper"){
    if (computer === "scissors"){
      return "computer<br>wins!"
    } else {
      return "user<br>wins!"
    }   
    
  } else {//user must be scissors
    if (computer === "rock"){
      return "computer<br>wins!"
    } else {
      return "user<br>wins!"
    }
  }
}

function showResult(message){
  $(".countdown")
    .html(message.toUpperCase())
    .toggleClass("countdown")
    .toggleClass("result")
    .show()
    .toggle("puff", "slow")
}

Comments