Jump to content
Sign in to follow this  
empire

JavaScript - Rock Paper Scissors

Recommended Posts

Howdy guys, I'm very interested of what people will came up with this basic game. I may also have posted this in the wrong board as it's an game but also an learning JavaScript. This thread will be for those that want to code and show of there work/code. I have already set up most of the requirements. All you need to do is add the missing code.

The reason for this because everyone will do it differently, the expert will probably be very similar, You have been employed by a web based game company to develop a simple Rock Paper Scissors game. The game is to be a single player game where the user can play against the computer.

The requirements are:
The game must be web based
The user selects their move from one of three buttons
The computer select it's move randomly
The moves are displayed as images (provided below)
The result must be displayed as text below the buttons - this must update instantly after the move
The result must be either: "You win!", "You lose!" or "It's a draw!"
The rules are: Paper beats Rock, Rock beats Scissors, Scirrors beats Paper
The program must keep a tally of how many games have been played
The program must keep a tally of how many wins, losses and draws there have been
You will need to use your HTML and CSS skills in this project
 

Here is a starting point you can base your game on:

JavaScript 

function move(choicePlayer) {
    // Calculate computers move by generating a random number between 1 and 3
    
    // Use a switch statement to conver the random number to either "rock", "scissors" or "paper"
    var choiceComputer= "?";
    
    // Output the computers move
    var imageComputer = "<img src='ADD YOU IMAGE' />";
    document.getElementById('computer').innerHTML = "computers move goes here";
    
    // Output the players move
    var imagePlayer = "<img src='ADD YOU IMAGE' />";
    document.getElementById('player').innerHTML = imagePlayer;
    
    // Calculate who won (rules: paper beats rock, rock beats scissors, scirrors beats paper or a draw)
    
    // Output the result
    document.getElementById('result').innerHTML = "result goes here";
}

HTML

<h1>Rock Paper Scissors</h1>
<div id="computer"></div>
<div id="player"></div>

<p>Make your choice:</p>
<button id="rock" onclick="move(this.id);">Rock</button>
<button id="paper" onclick="move(this.id);">Paper</button>
<button id="scissors" onclick="move(this.id);">Scissors</button>

<p id="result"></p>

CSS

#player, #computer {
    border: 1px solid black;
    height: 100px;
    width: 150px;
    margin: 10px;
}

 

Good Luck, also let me know if the code is wrong :) I'm no smart myself

Edited by empire

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...