THE SCRIPT

  
    

      
      

        ROCK, PAPER, SCISSORS!
      
      

        Win - 0 |
        Lose - 0 |
        Draw - 0
      

      

        
        

          
YOUR MOVE
          

          

            RockPaperScissors
        

        
        

          
COMPUTER'S MOVE
          

        
      
    
  

THE EXPLANATION

This should be pretty straightforward if you trace through the HTML elements. It may look a little confusing to the beginners, but there are actually only 3 parts to the simple interface:

• A scoreboard right at the top.
• A container to hold your move to the left, also a selector for you to choose rock, paper, or scissors.
• Finally, another container to show the computer’s move to the right.

Also, please take note that the selector and button are disabled. It is actually quite a common practice to enable them only when the window (or game) is fully loaded.

THE SCRIPT

/* [GAME WRAPPER] */
#rps-game {
  max-width: 800px;
  margin: 0 auto;
  font-family: arial, sans-serif;
}
#rps-wrap {
  display: flex;
  flex-direction: row;
}
#rps-game h1, #rps-game h2 {
  margin: 0;
}

/* [BOTH SIDES] */
@keyframes handbob {
  from { transform: translateY(0); }
  to { transform: translateY(-30px); }
}
#rps-you, #rps-com {
  width: 50%;
  padding: 10px;
}
#rps-you-move img, #rps-com-move img {
  animation: handbob 1s infinite alternate;
}

/* [YOUR SIDE] */
#rps-you {
  background: #FFDFD5;
}
#rps-sel, #rps-go {
  display: block;
  width: 100%;
  font-size: 20px;
  padding: 10px;
}
#rps-go {
  margin-top: 10px;
  background: #eee;
}
#rps-go.win {
  background: #DEFFD5;
}
#rps-go.lose {
  background: #FFD5D5;
}
#rps-go.draw {
  background: #D5EDFF;
}

/* [COMPUTER SIDE] */
#rps-com {
  background: #D5EBFF;
  text-align: right;
}

THE EXPLANATION

These are just some cosmetics, and feel free to change the styles to fit your own theme. The only part that I think may upset the beginner code ninjas is the @keyframes animation. Notice that it is added to #rps-you-move img, #rps-com-move img? 

That is basically the rock, paper, scissors image, which we will dynamically change using Javascript. What this CSS fragment does is a simple up-and-down movement animation… Just to make things look less boring.

HOW TO PLAY – THE RULES

Eh… This is a short section for those who do not know how to play the game, or maybe forgotten how rock, paper, scissors work.

• It is a simple game for 2 players.
• Each you and your competitor picks rock, paper, or scissors together at the same time.
• Scissors will beat paper, but loses to rock.
• Paper will beat rock, but loses to scissors.
• Rock will beat scissors, but loses to paper.

THE SCRIPT

/* [GAME ENGINE] */
var rps = {
  /* [PRELOAD] */
  preload : function () {
  // preload() : preload all the images
    var images = [
      "game-rock.png", "game-paper.png", "game-scissors.png",
      "game-rock-flip.png", "game-paper-flip.png", "game-scissors-flip.png"
    ];
    for (var i of images) {
      var img = new Image();
      img.src = i;
    }
  },

  /* [INIT] */
  youmove : null, // holds your move HTML container
  commove : null, // holds computer move HTML container
  sel : null, // holds HTML rock, scissors, paper selector
  go : null, // holds HTML go button
  // Win, lose, draw count + HTML
  win : 0, ewin : null,
  lose : 0, elose : null,
  draw : 0, edraw : null,
  init : function () {
    // Set to the default rock image
    rps.youmove = document.getElementById("rps-you-move");
    rps.commove = document.getElementById("rps-com-move");
    var img = new Image();
    img.src = "game-rock.png";
    rps.youmove.appendChild(img);
    img = new Image();
    img.src = "game-rock-flip.png";
    rps.commove.appendChild(img);

    // Win, lose, draw
    rps.ewin = document.getElementById("rps-win");
    rps.elose = document.getElementById("rps-lose");
    rps.edraw = document.getElementById("rps-draw");

    // Unlock controls
    rps.sel = document.getElementById("rps-sel");
    rps.sel.addEventListener("change", rps.switch);
    rps.sel.disabled = false;
    rps.go = document.getElementById("rps-go");
    rps.go.addEventListener("click", rps.game);
    rps.go.disabled = false;
  },

  /* [GAME] */
  switch : function () {
  // switch() : when user changes move

    var img = new Image();
    img.src = "game-" + rps.sel.value + ".png";
    rps.youmove.innerHTML = "";
    rps.youmove.appendChild(img);
  },

  game : function () {
  // game() : game on!

    // Random computer move
    // Equal 33.3333% chance to get each
    var com = Math.random();
    if (com 

THE OVERVIEW

THE EXPLANATION

Holy cow. That is a lot of code, and we will not go through the code line-by-line here (trace through the code and comments yourself). But here is a quick summary of the sequence of what happens:

• The rps.preload function will fire up before the window is fully loaded. That will prepare and load the necessary images into the browser cache.
• As the window is fully loaded, rps.init will fire up. Basically, it sets up the game – Grabs all the required HTML elements, enables the selector and play button.
• As you pick a move, rps.switch will change the respective image.
• Finally rps.game fires up when the play button is fired. The computer generates a random rock, paper, scissors choice and matches against yours. The score is then calculated and scoreboard updated.
• That’s all!

DEMO

SOURCE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
 

The post 3 Steps Simple Javascript Rock Paper Scissors Game appeared first on Code Boxx.