html5剪刀石头布代码

HTML5是一种前沿的编程语言，受到了广泛的支持和欢迎。它可以用来创建各种不同类型的网络应用程序，在这里我们将介绍一个简单的剪刀石头布游戏的HTML5代码。

剪刀石头布游戏.container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.game{
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 80%;
    max-width: 600px;
    margin-bottom: 20px;
}
.choice{
    width: 100px;
    height: 100px;
    background-color: lightgray;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 1px 1px 3px gray;
    transition: transform .3s ease-in-out, box-shadow .3s ease-in-out;
    position: relative;
    z-index: 1;
}
.choice.active{
    transform: translateY(-20px);
    box-shadow: 2px 2px 5px gray;
}
.choice:after{
    content: "";
    width: 100%;
    height: 100%;
    background-color: gray;
    border-radius: inherit;
    opacity: 0.3;
    position: absolute;
    z-index: -1;
}
.choice:hover{
    transform: translateY(-10px);
    box-shadow: 2px 2px 5px gray;
}
.result{
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
    color: green;
    opacity: 0;
    transition: opacity .5s ease-in-out;
}
.choice.winner{
    color: green;
}
.choice.loser{
    color: red;
}
@media (max-width: 480px){
.game{
    flex-direction: column;
}
.choice{
    margin-bottom: 10px;
}
}
✊✋✌️$(document).ready(function(){
    var choices = ["rock", "paper", "scissors"];
    var computerChoice = "";
    var userChoice = "";
    var result = "";
// 用户选择$(".choice").click(function(){
    userChoice = $(this).attr("id");
    $(".choice").removeClass("active");
    $(this).addClass("active");
}
    );
// 计算结果$("#rock, #paper, #scissors").click(function(){
    computerChoice = choices[Math.floor(Math.random() * 3)];
if(userChoice == computerChoice){
    result = "平局";
    $(".result").css("color", "gray");
}
    else if(userChoice == "rock" &
    &
     computerChoice == "scissors" || userChoice == "paper" &
    &
     computerChoice == "rock" || userChoice == "scissors" &
    &
 computerChoice == "paper"){
    result = "你赢了";
    $(".active").addClass("winner");
    $(".result").css("color", "green");
}
else{
    result = "你输了";
    $(".active").addClass("loser");
    $(".result").css("color", "red");
}
$(".result").text(result).animate({
opacity: 1}
    , 500);
setTimeout(function(){
$(".choice, .result").removeClass("active winner loser").animate({
opacity: 0}
    , 500);
}
    , 2000);
}
    );
}
    );
    

在代码中，我们使用了Flex布局来放置剪刀、石头和布，当用户点击其中一个选项时，该选项将被突出显示。然后计算计算机生成的随机选项，并使用一些if语句来确定结果和样式。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！