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 小时前
【前端】CSS
前端·css
ggdpzhk1 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
小曲曲2 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•3 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS4 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜6 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点6 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow6 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o6 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
刚刚好ā7 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue