Question

这是我的摇滚，纸张，剪刀游戏。 http://jsfiddle.net/Renay/hL3j5hm6/6/

    <html> </html>

如何在给出结果之前添加动画，在图像上下弹跳时有3,2,1倒计时。我尝试过添加各种功能，但似乎没有任何功能。我不太确定如何在图片中添加动作以及它会在我的剧本中出现的位置。

分步骤：

选择了用户选择（摇滚/纸/剪刀按钮）
倒计时开始
两只手符号开始上下跳动
计算机和用户选择显示在图像下。
显示结果

斜体的步骤是我遇到的麻烦。

我知道CSS并不理想，但在我正常运作后我会解决这个问题。

非常感谢任何形式的帮助。感谢

Answer 1

嗯，这就是我想出来的。

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;
}

摇滚，纸，剪刀游戏动画。

1 个答案:

Fiddle

HTML：

的JavaScript：

CSS：