HTML+CSS+JS实现猜拳小游戏

使用html+css+javascript实现猜拳游戏

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>6.猜拳游戏</title>
    <link rel="stylesheet" href="index.css">
    <script src="index.js" defer></script>
</head>

<body>
    <div class="container">
        <h1>猜拳游戏</h1>
        <div>
            <img id="sysResult" src="./images/question.png" alt="问号">
        </div>
        <div id="userSelect">
            <h1>请出拳：</h1>
            <div class="user_select" onclick="handleClicked(event)">
                <div class="item">
                    <img src="./images/rock.png" alt="石头" data-type="0">
                </div>
                <div class="item">
                    <img src="./images/cloth.png" alt="布" data-type="1">
                </div>
                <div class="item">
                    <img src="./images/scissor.png" alt="剪刀" data-type="2">
                </div>
            </div>
        </div>
        <div id="userResult">
            <h1 id="userResultMsg"></h1>
            <div>
                <img id="userResultImg" src="./images/question.png" alt="问号">
            </div>
            <p>
                <img class="refresh_btn" onclick="refresh()" src="./images/refresh.png" alt="刷新">
            </p>
        </div>
    </div>
</body>


</html>

index.js

const images = ['rock', 'cloth', 'scissor'];
function handleClicked(e) {
    if (!e.target.dataset.type) return;
    // 用户
    const userResult = +e.target.dataset.type;
    // 系统
    const sysResult = Math.floor(3 * Math.random());
    // 猜拳
    let res = 0;
    if (userResult === sysResult) res = 0;
    else if (sysResult - userResult === 1 || sysResult - userResult === -2) res = -1;
    else res = 1;
    document.getElementById('sysResult').src = './images/' + images[sysResult] + '.png';
    document.getElementById('userSelect').style.display = 'none';
    document.getElementById('userResult').style.display = 'block';
    document.getElementById('userResultMsg').innerText = ['您输啦', '平局', '您赢啦'][res + 1];
    document.getElementById('userResultImg').src = './images/' + images[userResult] + '.png';
    document.body.style.backgroundColor = ['#f38181', '#fce38a', '#95e1d3'][res + 1];
}
function refresh() {
    document.getElementById('sysResult').src = './images/question.png';
    document.getElementById('userSelect').style.display = 'block';
    document.getElementById('userResult').style.display = 'none';
    document.getElementById('userResultMsg').innerText = '';
    document.getElementById('userResultImg').src = './images/question.png';
    document.body.style.backgroundColor = '#eaffd0';
}

index.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    text-align: center;
    background-color: bisque;
}

.user_select{
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.user_select .item{
    cursor:pointer
}
.user_select .item:hover{
    transform: scale(1.1);
}
.user_select .item:active{
    transform: scale(1);
}
.user_select .item ~ .item {
    margin-left: 20px;
}
#userResult{
    display: none;
}
.refresh_btn{
    cursor: pointer;
    transition: all .3s;
}
.refresh_btn:hover{
    transform: rotate(90deg);
}
h1{
    margin: 20px;   
}

运行结果图

猜拳游戏