lundi 2 mai 2016

(javascript) Rock Paper Scissors: How to display computer's choice after user's pick

I want to to create a simple table of rock paper scissors game. I need help with one quick thing: when the user clicks (onclick) the image of either rock, paper or scissors, the image of computer's choice would be displayed together with the user's choice. And this would update the score for wins, loses and ties. I am facing problem in displaying computer's random choice image as well as the updating of score to be displayed. Would really appreciate if someone can help me with this. Below is my code:

<table>
    <tr>
        <th colspan = "3"><h1>Rock Paper Scissors</h1></th>
    </tr>
    <tr>
        <td onclick="hand(1)"><img src="rock.jpg" alt="rock" id= "pic1" /></td>
        <td rowspan ="3"><img src ="leftPaperHand.jpg" id="userpick"/></td> <!--starting image for user-->
        <td rowspan ="3"><img src ="rightRockHand.jpg" id="comppick"/></td> <!--starting image for comp-->
    </tr>
    <tr>
        <td onclick="hand(2)"><img src="paper.jpg" alt="paper" id="pic2"/></td>
    </tr>
    <tr>
        <td onclick="hand(3)"><img src="scissors.jpg" alt="scissor" id="pic3"/></td>

    </tr>
    <tr>
        <td colspan = "3"><h2>Win:<span id="win">0</span> Loses: <span id="lose">0</span> Ties:<span id="tie">0</span></h2></td>
    </tr>
</table>



<script>

/////////////////////////// convert user's choice picture and show it up on userpick
var userChoice = "leftPaperHand.jpg";
var compChoice = "rightRockHand.jpg";
drawComputer();

function hand(choice) {
    switch (choice) {
        //if user chooses rock
        case 1:
            document.getElementById("userpick").src="leftRockHand.jpg";
            if (comp==1){
                updateScore("tie");
            }
            else if (comp== 2) {
                updateScore("lose");
            }
            else{
                updateScore("win");
            break;
            }
        //if user chooses paper
        case 2:
            document.getElementById("userpick").src="leftPaperHand.jpg";
            if (comp==2){
                updateScore("tie");
            }
            else if (comp==1) {
                updateScore("win");
            }
            else {
                updateScore("lose");
            break;
            }
        //is user chooses scissor
        case 3:
            document.getElementById("userpick").src="leftScissorHand.jpg";
            if (comp==3){
                updateScore("tie");
            }
            else if (comp== 1) {
                updateScore("lose");
            }
            else {
                updateScore("win");
            break;
            }
    }
}


////////////////////////////computer's pick
var comp = Math.floor(Math.random()*3)+1; //starts the counter from 1,2,3

function drawComputer() {
    if (comp===1) {
        comppick.src="rightRockHand.jpg";
    }
    else if (comp ===2) {
        comppick.src="rightPaperHand.jpg";
    }
    else{
        comppick.src ="rightScissorHand.jpg";
    }
}


//////////////////////////updating the score 
var ties = 0;
var wins = 0;
var losses = 0;

function updateScore(result) {
var tie = document.getElementById("tie");
var win = document.getElementById("win");
var lose = document.getElementById("lose");

//updating the counter for tie
if (result === "tie") {
    ties++;
    tie.innerHTML = ties;
}
//updating the counter for win
if (result === "win") {
    wins++;
    win.innerHTML = wins;
}
//updating the counter for lose
if (result === "lose") {
    losses++;
    lose.innerHTML = losses;
}
}    



</script>




Aucun commentaire:

Enregistrer un commentaire