CODEWITHSUNDEEP
javascriptjquery
Renay
Renay

Reputation: 147

Rock,paper,scissors game animation.

Here is my rock,paper, scissors game. http://jsfiddle.net/Renay/hL3j5hm6/6/ 

    <html> </html>

How do i go about adding an animation where before the result is given, there is a 3,2,1 countdown while the images are bouncing up and down. I've tried adding various functions but nothing has seemed to worked. I'm not too sure how to go about adding movement to images and where abouts it would go in my script.

In steps :

Steps that are in italic is what i am having trouble with.

I know the CSS isn't ideal but i'll fix that up after i get the functioning right.

Any sort of help is greatly appreciated. Thanks

Upvotes: 1

Views: 1561

Answers (1)

Weafs.py
Weafs.py

Reputation: 22992

Well, this is what I came up with.

Demo on Fiddle

HTML:

<div id='computerSide'>
    <h1> Computer </h1>
    <img src="http://s22.postimg.org/sv6ieobip/rock1.png" id="rockOne" height="130" width="130" class='compFist' />
    <div id="you"></div>
</div>
<div id='playerSide'>
     <h1> You </h1>
    <img src="http://s28.postimg.org/syouexkjx/rock2.png" id="rockOne" height="130" width="130" class='compFist' />
    <div id="comp"></div>
</div>
<div id="countDown"></div>
<div id='instructions'>
     <h2> Choose your weapon! </h2>
</div>
<div id="container">
    <div id='buttons'>
        <input type='button' value='Rock' id='rockB' class='button1' />
        <input type='button' value='Paper' id='paperB' class='button1' />
        <input type='button' value='Scissors' id='scissorsB' class='button1' />
        <input type='button' value='Replay' id='replayButton' />
    </div>
</div>
<div id="yourResult"></div>
<div id="compResult"></div>

JavaScript:

var rockButton = document.getElementById('rockB');
var paperButton = document.getElementById('paperB');
var scissorsButton = document.getElementById('scissorsB');
var replayButton = document.getElementById('replayButton');
var result = document.getElementById('yourResult');
var cresult = document.getElementById('compResult');
var num = document.getElementById('countDown');
var you = document.getElementById('you');
var comp = document.getElementById('comp');
var win = 'You Won!<br />';
var lose = 'You Lost!<br />';
var tie = 'Tie!<br />';
var r = 'Rock!';
var p = 'Paper!';
var s = 'Scissors!';
var compChoice;

function randChoice() {
    var shuffle = Math.random();
    if (shuffle <= 0.34) {
        return 'rock';
    } else if (shuffle <= 0.67) {
        return 'paper';
    } else {
        return 'scissors';
    }
}

function main(w, one, two, three, four, five, six) {
    you.innerHTML = '';
    comp.innerHTML = '';
    result.innerHTML = '';
    cresult.innerHTML = '';
    num.innerHTML = "3";
    $('img').animate({'top': '20px'}, "fast");
    $('img').animate({'top': '0px'}, function() {
        num.innerHTML = "2";
    });
    $('img').animate({'top': '20px'}, "fast");
    $('img').animate({'top': '0px'}, function() {
        num.innerHTML = "1";
    });
    $('img').animate({'top': '20px'}, "fast");
    $('img').animate({'top': '0px'}, function() {
        num.innerHTML = "";
        you.innerHTML = w;
        compChoice = randChoice();
        if (compChoice == 'rock') {
            comp.innerHTML = r;
            result.innerHTML = one;
            cresult.innerHTML = two;
        } else if (compChoice == 'paper') {
            comp.innerHTML = p;
            result.innerHTML = three;
            cresult.innerHTML = four;
        } else {
            comp.innerHTML = s;
            result.innerHTML = five;
            cresult.innerHTML = six;
        }
    });
}

rockButton.addEventListener('click', function () {
    main(r, tie, tie, lose, win, win, lose);
});

paperButton.addEventListener('click', function () {
    main(p, win, lose, tie, tie, lose, win);
});

scissorsButton.addEventListener('click', function () {
    main(s, lose, win, win, lose, tie, tie);
});

replayButton.addEventListener('click', function () {
    location.reload();
});

CSS:

#container {
    position: absolute;
    width: 100%;
    height: 60px;
    text-align: center;
    margin: 0 auto;
}
#buttons {
    width: 400px;
    margin: 0 auto;
}
#playerSide {
    float:left;
    margin: 0 0 0 0;
}
#computerSide {
    float:right;
    margin: 0 0 0 0;
}
#instructions {
    padding: 0 0 0 40%;
}
.button1 {
    position: relative;
    top: 200px;
    margin: auto;
    display:inline-block;
    text-align: center;
    color: black;
}
input[type=button] {
    background-color:#FFFACD;
    border-radius: 20px;
    width:6em;
    height:2em;
    font-size: 20px;
}
.compWeapon {
    margin: 20% 0 0 45%;
    font-size: 30px;
}
#replayButton {
    background-color: #FFD700;
    margin:auto;
    position: relative;
    top: 220px;
    color: black;
}
#yourResult {
    float: left;
    position: absolute;
    bottom: 20%;
    left: 20%;
    font-size: 20px;
}
#compResult {
    float: right;
    position: absolute;
    bottom: 20%;
    right: 15%;
    font-size: 20px;
}
#yourResult, #compResult {
    display: inline-block;
}
img {
    position: relative;
}
#countDown {
    width: 40px;
    height: 20px;
    position: absolute;
    top: 33%;
    left: 50%;
    color: red;
    font-size: 30px;
}
#you {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 53%;
    left: 4%;
    font-size: 25px;
}
#comp {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 53%;
    right: 10%;
    font-size: 25px;
}

Upvotes: 1

Related Questions