石头、纸、剪刀游戏动画

Rock,paper,scissors game animation.

本文关键字：游戏动画 石头      更新时间：2023-09-26

这是我的石头、纸、剪刀游戏。http://jsfiddle.net/Renay/hL3j5hm6/6/

    <html> </html>

我该如何添加一个动画，在给出结果之前，当图像上下跳动时，会有3,2,1倒计时。我试过添加各种功能，但似乎都不起作用。我不太确定如何在图像中添加运动，以及它会在我的脚本中出现在哪里。

步骤：

  • 选择用户选择（石头/纸/剪刀按钮）
  • 倒计时开始
  • 双手符号开始上下跳动
  • 计算机和用户选项显示在图像下
  • 显示结果

斜体的步骤是我遇到的问题。

我知道CSS并不理想，但我会在功能正常后修复它。

任何形式的帮助都将不胜感激。感谢

好吧，这就是我想到的。

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;
}
相关文章：