前端实现石头剪刀布

最新推荐文章于 2023-08-06 14:54:35 发布

David_blog

最新推荐文章于 2023-08-06 14:54:35 发布

阅读量616

点赞数 1

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/m0_53155317/article/details/122915112

版权

前端专栏收录该内容

3 篇文章 1 订阅

订阅专栏

效果图

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>石头剪刀布</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <table>
        <tr>
            <td id="col1">
                <p>你</p>
                <img src="images/zb.jpg" id="you">
            </td>
            <td id="col2">
                <p id="vs">VS</p>
            </td>
            <td id="col3">
                <p>电脑</p>
                <img src="images/zb.jpg" id="computer">
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <p id="result">Are you ready ?</p>
            </td>
        </tr>
        <tr>
            <td>
                <p>你选择了：</p>
                <img src="images/zb.jpg" id="current">
            </td>
            <td>
                <p id="choice">Choice</p>
            </td>
            <td>
                <p>请选择出拳：</p>
                <p>
                    <select id="select" onchange="doChange()">
                        <option value="0">请选择</option>
                        <option value="1">石头</option>
                        <option value="2">剪刀</option>
                        <option value="3">布</option>
                    </select>
                    <button onclick="doConfirm()">确认出拳</button>
                </p>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <p>
                    总数：<span id="total">0</span> 
                    胜利：<span id="win">0</span> 
                    失败：<span id="lose">0</span> 
                    平局：<span id="draw">0</span> 
                </p>
            </td>
        </tr>
    </table>

    <script src="js/index.js"></script>
</body>
</html>

css

table{
    width: 500px;
    height: 500px;
    margin: 0 auto;
    border-collapse: collapse;
}
tr{
    text-align: center;
}
td{
    border: 1px solid black;
}
#col1{
    width: 200px;
}
#col2{
    width: 100px;
}
#col3{
    width: 200px;
}

#vs{
    color: orange;
    font-size: 50px;
    font-weight: bold;
}
#result{
    color: red;
    font-size: 30px;
    font-weight: bold;
}
#choice{
    color: orange;
    font-size: 30px;
    font-weight: bold;
}
span{
    margin-right: 20px;
}

var win = 0 // 胜利
var lose = 0 // 失败
var draw = 0 // 平局

// 选择出拳
function doChange(){
    var select = document.getElementById('select').value
    var current = document.getElementById('current')
    if(select==1){
        current.src = 'images/st.jpg'
    }else if(select==2){
        current.src = 'images/jd.jpg'
    }else if(select==3){
        current.src = 'images/bu.jpg'
    }else{
        current.src = 'images/zb.jpg'
    }
}

// 确认出拳
function doConfirm(){
    var select = document.getElementById('select').value
    var you = document.getElementById('you')
    var computer = document.getElementById('computer')

    // 你出拳
    if(select==1){
        you.src = 'images/st.jpg'
    }else if(select==2){
        you.src = 'images/jd.jpg'
    }else if(select==3){
        you.src = 'images/bu.jpg'
    }else{
        alert('请先选择，再出拳！')
        return // 停止执行
    }

    // 电脑出拳
    var x = parseInt(Math.random()*3+1)
    if(x==1){
        computer.src = 'images/st.jpg'
    }else if(x==2){
        computer.src = 'images/jd.jpg'
    }else if(x==3){
        computer.src = 'images/bu.jpg'
    }

    // 判断结果
    var result = document.getElementById('result')
    var minus = select - x
    if(minus==0){
        result.innerText = '平局'
        draw++ // 增加1
    }else if(minus==-1 || minus==2){
        result.innerText = '胜利'
        win++
    }else{
        result.innerText = '失败'
        lose++
    }

    // 显示结果
    document.getElementById('total').innerText = win + lose + draw
    document.getElementById('win').innerText = win
    document.getElementById('lose').innerText = lose
    document.getElementById('draw').innerText = draw


}