猜拳游戏 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="new_file.css">
    </head>
    <body>
        <div class="rps">
            <div class="result">
                <div class="player">
                    <p>玩家</p>
                    <img src="images/石头.png" >
                </div>
                <div class="npc">
                    <p>电脑</p>
                    <img src="images/石头.png" >
                </div>
            </div>
            <div class="start">Make Your Choice!</div>
            <div class="option">
                <div>
                    <img src="images/石头.png" >
                    <p>石头</p>
                </div>
                <div>
                    <img src="images/剪刀.png" >
                    <p>剪刀</p>
                </div>
                <div>
                    <img src="images/布.png" >
                    <p>布</p>
                </div>
            </div>
        </div>
        <script src="new_file.js"></script>
    </body>
</html>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F6f7fb;
}
img{
    display: block;
}
.rps{
    width: 500px;
    background-color: white;
    border-radius: 15px;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.result{
    width: 350px;
    margin-bottom: 20px;
}
.player{
    float: left;
    transform-origin: left;
    text-align: center;
}
.npc{
    float: right;
    transform-origin: right;
    text-align: center;
}
.result .player img{
    transform: rotateZ(90deg);
    transition: all 0.5s;
}
.result .npc img{
    transform: rotateZ(-90deg) rotateY(180deg);
    transition: all 0.5s;
}
.result .player.active{
    animation: shake 0.75s infinite ease;
}
@keyframes shake{
    0%{transform: rotateZ(0deg);}
    50%{transform: rotateZ(10deg);}
    100%{transform: rotateZ(0deg);}
}
.result .npc.active{
    animation: shake2 0.75s infinite ease;
}
@keyframes shake2{
    0%{transform: rotateZ(0deg);}
    50%{transform: rotateZ(-10deg);}
    100%{transform: rotateZ(0deg);}
}

.start{
    font-size: 40px;
    color: #7d2ae8;
    cursor: pointer;
    margin-bottom: 30px;
}
.option{
    width: 300px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.option div{
    opacity: 0.3;
    transition: all 0.5s;
    cursor: pointer;
}
.option img{
    width: 50px;
}
.option p{
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: #7d2ae8;
    font-weight: bold;
    font-size: 20px;
}
.option div:hover{
    opacity: 1;
}
.option .active{
    opacity: 1;
}

let player_result = document.querySelector('.player img')
let player = document.querySelector('.player')
let npc_result = document.querySelector('.npc img')
let npc = document.querySelector('.npc')
let tip = document.querySelector('.start')
let three_option = document.querySelectorAll('.option div')

three_option.forEach( (div,index) => 
{                          
    div.addEventListener('click',() => 
    {   three_option.forEach( (div2,index2) =>
        {
            div2.classList.remove('active')
        })
        div.classList.add('active')
        player_result.src = npc_result.src = "images/石头.png"
        player.classList.add('active')
        npc.classList.add('active')
        let time = setTimeout(()=>{
            player.classList.remove('active')
            npc.classList.remove('active')
            let player_img = div.querySelector('img')
            player_result.src = player_img.getAttribute('src')
            npc_num = Math.floor(Math.random()*3)
            imgs = ["images/石头.png","images/剪刀.png","images/布.png"]
            npc_result.src = imgs[npc_num]
            let results = {
                石头石头:"平手",
                石头布:"电脑获胜",
                石头剪刀:"玩家获胜",
                剪刀剪刀:"平手",
                剪刀石头:"电脑获胜",                           
                剪刀布:"玩家获胜",
                布布:"平手",
                布剪刀:"电脑获胜",
                布石头:"玩家获胜",
            }
            player_select = ['石头','剪刀','布'][index]
            npc_select = ['石头','剪刀','布'][npc_num]
            tip.textContent=results[player_select+npc_select]
        },1500)
    })
})
posted @ 2023-04-07 14:42  不尽人意的K  阅读(36)  评论(0)  编辑  收藏  举报