RPS-WD 17.9 result 9.30

In this example below you will see how to do a RPS-WD 17.9 result 9.30 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="start" onclick="start()">START</div>
  </div>
  <div class="page name"></div>
  <div class="page opponents">
    <div class="label">CHOOSE OPPONENT</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 top">OPPONENT</p>
    <div class="player right raised"></div>
    <div class="player left raised"></div>
    <p class="label bottom">YOU</p>
  </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-179-result-930-rGmvvO */
    @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;
}

.start {
  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: 50px;
  margin: 0;
  text-align: center;
  font-size: 45px;
  color: white;
  font-family: "Stardos Stencil";
  background: blue;
}

.opponent {
  height: 10%;
  text-align: center;
  background: white;
  color: red;
  margin: 10px 60px;
  font-size: 56px;
  font-family: "Stardos Stencil";
  border: 2px solid red;
  border-radius: 20px;
  cursor: pointer;
}

.opponent:hover{
  color: blue;
}

.player {
  width: 296px;
  height: 296px;
  margin: 0 auto;
  background: white;
  border: 2px solid blue;
  border-radius: 20px;
  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: 222px;
  font-family: "Stardos Stencil";
  color: blue;
}

/*create a result class for win/loss/tie and toggle countdown*/
/*possibly create a winresult and tie result?*/
.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-179-result-930-rGmvvO */
    //show intro page only
$(".page").hide();
$(".intro").show();
//$(".countdown").show();
//game shown for editing

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

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

function start() {
  $(".intro").hide();
  $(".opponents").show();
  showOpponents();
}

//generate buttons for each possible opponent
function showOpponents(){
  for(var i=0; i<model.students.length; i++){
    var name = model.students[i];
    $(".opponents").append('<p class="opponent" id="'+ name + '">'+ name + '</p>')
  }
  $(".opponent").on("click", chooseOpp)
}

function chooseOpp(){
  model.opponent = $(this).attr("id");
  $(".label.top").text(model.opponent.toUpperCase());
  $(".page").hide();
  $(".choices").show();
}


function choose() {
  //get user choice and random computer choice
  var userChoice = $(this).attr("id");
  var options = ["rock", "paper", "scissors"];
  var computerChoice = Math.floor(Math.random() * 3);
  computerChoice = options[computerChoice];
  //determine and record match result
  model.result = getWinner(userChoice, computerChoice);

  //go to game screen
  $(".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(getWinner());
    //put the result into the countdown
  }, 2100);
}

//given choices, return the winner of the match or tie
function getWinner(user, computer) {
  if (user === computer) {
    //user and computer chose same
    return "tie";
  } else if (user === "rock") {
    //user chose rock
    if (computer === "paper") {
      return model.opponent;
    } else {
      return "user";
    }
  } else if (user === "paper") {
    //user chose paper
    if (computer === "scissors") {
      return model.opponent;
    } else {
      return "user";
    }
  } else {
    //user must be scissors
    if (computer === "rock") {
      return model.opponent;
    } else {
      return "user";
    }
  }
}

//print result to screen
function showResult() {
  if (model.result === "tie") {
    $(".countdown").html(model.result.toUpperCase() + "!");
  } else {
    $(".countdown").html(model.result.toUpperCase() + "<br>WINS!");
  }
  $(".countdown")
    .show()
    .toggleClass("countdown")
    .toggleClass("result")
    .toggle("puff", 1000);
}

Comments