基于js和html的骰子游戏

简介: 基于js和html的骰子游戏

介绍:

  • 1.游戏者选择“大”时,三个骰子点数之和为11-18时,游戏者获胜。
  • 2.游戏者选择“小”时,三个骰子点数之和为3-10时,游戏者获胜。
  • 3.如果游戏者选择具体点数,则根据三个骰子的点数计算,如果与游戏者下注的点数相同,则游戏者获胜。
  • 4.玩家可以设置总数量,每次开始游戏,如果玩家胜利,总数量增加当前数量*倍率,反正减少。

html代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>骰子游戏</title>
    <link rel="stylesheet" href="style.css">
    <!-- 确保您已经下载了layui并正确地链接了CSS文件 -->
   <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
   <style>
     .rules {
         list-style-type: none;
         padding: 0;
     }
     .rules li {
         margin-bottom: 10px;
         font-size: 16px;
         color: #333;
     }
     .game-rules {
/*         margin-top: 20px; */
         background-color: #f2f2f2;
         padding: 2%;
         border-radius: 4%;
       text-align: left;
       margin: 1% auto;
     }
     .game-center {
         text-align: center;
       margin: 2% auto;
     }
   </style>
</head>
<body style="min:auto">
    <div class="game-container layui-container">
        <h1 class="game-center">骰子游戏</h1>
    <!-- 游戏规则区域 -->
    <div>
      <ul class="game-rules">
        <li>1.游戏者选择“大”时,三个骰子点数之和为11-18时,游戏者获胜。</li>
        <li>2.游戏者选择“小”时,三个骰子点数之和为3-10时,游戏者获胜。</li>
        <li>3.如果游戏者选择具体点数,则根据三个骰子的点数计算,如果与游戏者下注的点数相同,则游戏者获胜。</li>
        <li>4.玩家可以设置总数量,每次开始游戏,如果玩家胜利,总数量增加当前数量*倍率,反正减少</li>
<!--        <li>4.如果三个骰子点数相同,则为庄家胜利。</li> -->
      </ul>
    </div>
    <!-- 赌注区域 -->
    <div  style="margin: 2% 30%;">
      <p style="margin-top: 2%;">&nbsp&nbsp&nbsp&nbsp总数量:<input type="number" id="wallet-amount" placeholder="总数量"></p>
      <p style="margin-top: 2%;">当前数量:<input type="number" id="bet-amount" placeholder="当前数量"></p>
      <p style="margin-top: 2%;">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp倍率:<input type="number" id="multiplier" placeholder="请输入倍数" value="1"></p>
    </div>
    <!-- 游戏操作区 -->
    <div class="game-operations" style="margin: 2% 25%;">
        <button class="layui-btn layui-btn-primary layui-border-orange" id="btn-big">大</button>
        <button class="layui-btn layui-btn-primary layui-border-black" id="btn-small">小</button>
        <input  class="layui-btn layui-btn-primary " type="number" placeholder="输入数字" min="3" max="18" id="input-number" title="请输入数字" />
        <button class="layui-btn layui-btn-primary layui-border-green" id="btn-guess">猜数字</button>
    </div>
        <!-- 结果显示区 -->
        <div id="result" class="game-result"  style="margin: 2% 25%;"></div>
    </div>
    <!-- 确保您已经下载了layui.js 并正确链接 -->
<!--    <script src="path-to-your-layui.js"></script> -->
</body>
<script src="../gamejs/size.js"></script>
</html>

js代码(size.js)

document.getElementById('btn-big').addEventListener('click', function() {
    playGame('big');
});
document.getElementById('btn-small').addEventListener('click', function() {
    playGame('small');
});
document.getElementById('btn-guess').addEventListener('click', function() {
    const guessNumber = parseInt(document.getElementById('input-number').value, 10);
    if(guessNumber && guessNumber >= 3 && guessNumber <= 18) {
        playGame(guessNumber);
    } else {
        alert('请输入一个有效的数字(3-18之间)!');
    }
});
function playGame(choice) {
    const walletAmount = parseFloat(document.getElementById('wallet-amount').value);
    const betAmount = parseFloat(document.getElementById('bet-amount').value);
    const multiplier = parseFloat(document.getElementById('multiplier').value);
    if (isNaN(walletAmount) || isNaN(betAmount) || isNaN(multiplier)) {
        alert('请输入有效的数值!');
        return;
    }
    if (walletAmount <= 0) {
        alert('钱包金额不能小于等于零!');
        return;
    }
    const diceResults = rollDice();
    const total = diceResults.reduce((a, b) => a + b);
    let result;
    let newWalletAmount;
    if (typeof choice === 'string') {
        if (choice === 'big' && total >= 11 && total <= 18) {
            result = '恭喜你,你赢了!';
        resultColor = 'red';
      resultWeight = 'bold';
            newWalletAmount = walletAmount + (betAmount * multiplier);
        } else if (choice === 'small' && total >= 3 && total <= 10) {
            result = '恭喜你,你赢了!';
      resultColor = 'red';
      resultWeight = 'bold';
            newWalletAmount = walletAmount + (betAmount * multiplier);
        }  else {
            result = '很遗憾,你输了';
      resultColor = 'black';
      resultWeight = 'bold';
            newWalletAmount = walletAmount - (betAmount * multiplier);
        }
    } else {
        if (total === choice) {
            result = '恭喜你,你赢了!';
      resultColor = 'red';
      resultWeight = 'bold';
            newWalletAmount = walletAmount + (betAmount * multiplier);
        } else {
            result = '很遗憾,你输了';
      resultColor = 'black';
      resultWeight = 'bold';
            newWalletAmount = walletAmount - (betAmount * multiplier);
        }
    }
    if (newWalletAmount < 0) {
        // alert('很遗憾,你的钱包金额不足!');
        // return;
    }
    const resultElement = document.getElementById('result');
  //字体颜色
  resultElement.style.color = resultColor;
  resultElement.style.fontWeight = resultWeight;
    resultElement.innerText = `骰子点数: ${diceResults.join(', ')} 总数: ${total}. ${result}`;
    document.getElementById('wallet-amount').value = newWalletAmount.toFixed(2);
}
function displayDiceResults(results, element, index, total) {
    if (index < results.length) {
        setTimeout(() => {
            if (index === results.length - 1) {
                element.innerText += `${results[index]} `;
                element.innerText += `总数: ${total}. `;
            } else {
                element.innerText += `${results[index]}, `;
            }
            displayDiceResults(results, element, index + 1, total);
        }, 500);
    }
}
// 其他部分保持不变
function rollDice() {
    return [1, 2, 3].map(() => Math.floor(Math.random() * 6) + 1);
}

相关文章
|
5天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
33 1
|
10天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
22 3
|
13天前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
27 4
|
12天前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
39 0
html5+three.js公路开车小游戏源码
|
21天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
72 6
|
1月前
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
96 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
123 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
82 4