Trung tâm cá nhân
sách gpt4 ai đã đi

Hoạt hình trò chơi kéo, búa, bao.

In lại 作者：行者123 更新时间：2023-11-28 00:52:50 27 4
mua khóa gpt4 Nike

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

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

bước chân:

  • 用户选择已选择(石头/剪刀/布按钮)
  • 倒计时开始
  • 两个手形符号开始上下弹动
  • 计算机和用户选项显示在图像下方。
  • 结果已显示

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

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

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

1 Câu trả lời

嗯，这就是我想出来的。

演示 Đàn vĩ cầm

HTML:


    
 Computer 

    
    



     
 You 

    
    




     
 Choose your weapon!




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!
';
var lose = 'You Lost!
';
var tie = 'Tie!
';
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';
    } khác {
        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;
        } khác {
            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 {
    vị trí: tuyệt đối;
    width: 100%;
    height: 60px;
    căn chỉnh văn bản: ở giữa;
    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 {
    vị trí: tương đối;
    top: 200px;
    margin: auto;
    display:inline-block;
    căn chỉnh văn bản: ở giữa;
    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;
    vị trí: tương đối;
    top: 220px;
    color: black;
}
#yourResult {
    float: bên trái;
    vị trí: tuyệt đối;
    bottom: 20%;
    left: 20%;
    font-size: 20px;
}
#compResult {
    float: right;
    vị trí: tuyệt đối;
    bottom: 20%;
    right: 15%;
    font-size: 20px;
}
#yourResult, #compResult {
    hiển thị: khối nội tuyến;
}
img {
    vị trí: tương đối;
}
#countDown {
    width: 40px;
    height: 20px;
    vị trí: tuyệt đối;
    top: 33%;
    left: 50%;
    color: red;
    font-size: 30px;
}
#you {
    vị trí: tuyệt đối;
    width: 20px;
    height: 20px;
    top: 53%;
    left: 4%;
    font-size: 25px;
}
#comp {
    vị trí: tuyệt đối;
    width: 20px;
    height: 20px;
    top: 53%;
    right: 10%;
    font-size: 25px;
}

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

27 4 0
Bài viết được đề xuất: javascript - 在 Canvas 中设置超时
Bài viết được đề xuất: javascript - KnockoutJS - 将值加载到下拉列表。所选值始终为空
Bài viết được đề xuất: html - 如何在中心垂直和水平对齐图像？
Bài viết được đề xuất: html - 如何正确对齐标题与居中的 div 元素？
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com