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

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

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

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

游戏规则

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

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

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

先看运行效果图:

源码如下:

html 复制代码
<!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>
相关推荐
孤水寒月4 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
脑袋大大的5 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络6 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘6 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way6 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家7 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
GISer_Jing10 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆10 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding11 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js