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>
相关推荐
前端小巷子1 小时前
Webpack 5模块联邦
前端·javascript·面试
晓得迷路了1 小时前
栗子前端技术周刊第 91 期 - 新版 React Compiler 文档、2025 HTML 状态调查、Bun v1.2.19...
前端·javascript·react.js
江城开朗的豌豆1 小时前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
LBJ辉3 小时前
2. Webpack 高级配置
前端·javascript·webpack
灵感__idea9 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
hui函数12 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam13 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴85013 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
涔溪15 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
你这个年龄怎么睡得着的15 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite