HTML5+CSS+JavaScript剪子石头布游戏

学习&实践爱好者

于 2024-10-03 21:16:18 发布

阅读量162

点赞数 2

分类专栏： HTML5与CSS3 JavaScrip技术前端开发文章标签： html5 css javascript

本文链接：https://blog.csdn.net/cnds123/article/details/142695681

版权

JavaScrip技术同时被 3 个专栏收录

135 篇文章 24 订阅

订阅专栏

HTML5与CSS3

85 篇文章 15 订阅

订阅专栏

前端开发

71 篇文章 4 订阅

订阅专栏

HTML5+CSS+JavaScript剪子石头布游戏

用HTML5+CSS+JavaScript剪子石头布游戏实现剪子石头布游戏，游戏有成绩计数，人、机输赢情况，及平局情况。

✂代表剪刀，▉代表石头，▓ 代表布，给出人机双方的出拳情况

游戏规则

剪刀胜布：剪刀可以剪断布。

石头胜剪刀：石头可以砸坏剪刀。

布胜石头：布可以包住石头。

先看运行效果图：

源码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>剪子石头布游戏</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #f0f0f0;
        }
        .container {
            margin-top: 50px;
        }
        .choices button {
            width: 80px; /* 设置按钮宽度 */  
            height: 50px; /* 设置按钮高度 */     
            font-size: 20px;
            padding: 10px 20px;
            margin: 10px;
            cursor: pointer;
        }
        .result {
            font-size: 24px;
            margin-top: 20px;
        }
        .scoreboard {
            margin-top: 30px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>剪子石头布游戏</h1>
        <div class="choices">
            <button onclick="playGame('✂️')">✂️</button>
            <button onclick="playGame('▉')">▉</button>
            <button onclick="playGame('▓')">▓</button>
        </div>
        <div class="result">
            <p id="resultText">请选择您的出拳</p>
            <p id="Choice">出拳情况: </p>
        </div>
        <div class="scoreboard">
            <p>玩家胜利: <span id="playerWins">0</span>  ； 
               电脑胜利: <span id="computerWins">0</span>  ； 
               平局: <span id="ties">0</span> </p>
          
        </div>
    </div>

    <script>
        let playerWins = 0;
        let computerWins = 0;
        let ties = 0;

        function playGame(playerChoice) {
            const choices = ['✂️', '▉', '▓'];
            const computerChoice = choices[Math.floor(Math.random() * choices.length)];

            document.getElementById('Choice').textContent = `玩家出拳: ${playerChoice}  ；
                    电脑出拳: ${computerChoice}`;
 
            let result = '';
            if (playerChoice === computerChoice) {
                result = '平局!';
                ties++;
            } else if (
                (playerChoice === '✂️' && computerChoice === '▓') ||
                (playerChoice === '▉' && computerChoice === '✂️') ||
                (playerChoice === '▓' && computerChoice === '▉')
            ) {
                result = '你赢了!';
                playerWins++;
            } else {
                result = '电脑赢了!';
                computerWins++;
            }

            document.getElementById('resultText').textContent = result;
            document.getElementById('playerWins').textContent = playerWins;
            document.getElementById('computerWins').textContent = computerWins;
            document.getElementById('ties').textContent = ties;
        }
    </script>
</body>
</html>