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>
相关推荐
wen's3 分钟前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
vvilkim41 分钟前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim44 分钟前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心1 小时前
vben 之 axios 封装
前端·javascript·学习
漫谈网络1 小时前
WebSocket 在前后端的完整使用流程
javascript·python·websocket
青皮桔3 小时前
CSS实现百分比水柱图
前端·css
失落的多巴胺3 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear3 小时前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息3 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
样子20183 小时前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript