个人中心
gpt4 book ai didi

javascript - 石头、剪刀、布游戏动画。

转载 作者：行者123 更新时间：2023-11-28 00:52:50 27 4
gpt4 key购买 nike

这是我的石头剪刀布游戏。 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;
}

关于javascript - 石头、剪刀、布游戏动画。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26570484/

27 4 0
文章推荐： javascript - 在 Canvas 中设置超时
文章推荐： javascript - KnockoutJS - 将值加载到下拉列表。所选值始终为空
文章推荐： html - 如何在中心垂直和水平对齐图像？
文章推荐： html - 如何正确对齐标题​​与居中的 div 元素？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com