基于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);
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/585381.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux 安装Jupyter notebook 并开启远程访问

文章目录 安装Python安装pip安装Jupyter启动Jupyter Notebook1. 生成配置文件2. 创建密码3. 修改jupyter notebook的配置文件4. 启动jupyter notebook5. 远程访问jupyter notebook 安装Python 确保你的系统上已经安装了Python。大多数Linux发行版都预装了Python。你可以在终端…

【深度学习-图像分类】02 - AlexNet 论文学习与总结

论文地址&#xff1a;ImageNet Classification with Deep Convolutional Neural Networks 论文学习 1. 摘要 本研究训练了一个大型深度卷积神经网络&#xff08;CNN&#xff09;&#xff0c;用于对ImageNet LSVRC-2010比赛中的1.2百万高分辨率图像进行分类&#xff0c;这些图…

SQL面试题挑战14:每年的在校人数

目录 问题&#xff1a;SQL解答&#xff1a; 问题&#xff1a; year表示学生入学年度&#xff0c;num表示对应年度录取学生人数&#xff0c;stu_len表示录取学生的学制&#xff1b;说明&#xff1a;例如录取年度2018学制是3年&#xff0c;表示该批学生在校年份为20182019、2019…

【WPF.NET开发】属性更改事件

本文内容 先决条件标识属性更改事件属性触发器 Windows Presentation Foundation (WPF) 定义几个为响应属性值的更改而引发的事件。 该属性通常是依赖项属性。 事件本身可以是路由事件&#xff0c;也可以是标准公共语言运行时 (CLR) 事件&#xff0c;具体取决于事件是应通过元…

阿里高级Java面试真题

请解释Java中的反射机制及其潜在的性能影响。 Java中的反射机制是指在运行时检查或操作类、接口、字段、方法等程序结构的能力。通过反射&#xff0c;你可以在运行时获取类的信息、调用类的方法、访问或修改类的字段等&#xff0c;而不需要在编译时就确定这些操作。反射机制为…

MYSQL 深入探索系列六 SQL执行计划

概述 好久不见了&#xff0c;近期一直在忙项目的事&#xff0c;才有时间写博客&#xff0c;近期频繁出现sql问题&#xff0c;今天正好不忙咱们看看千万级别的表到底该如何优化sql。 案例 近期有个小伙伴生产环境收到了告警&#xff0c;有个6千万的日志表&#xff0c;查询耗时大…

“undefined reference to XXX“问题总结

"undefined reference to XXX"问题总结 引言 我们在Linux下用C/C工作的时候&#xff0c;经常会遇到"undefined reference to XXX"的问题&#xff0c;直白地说就是在链接(从.cpp源代码到可执行的ELF文件&#xff0c;要经过预处理->编译->链接三个阶…

1panel使用指南(一)面板安装

一、1panel简介 1Panel是杭州飞致云信息科技有限公司推出的产品 [1]&#xff0c;帮助用户实现快速建站。 [2]是一款现代化、开源的Linux服务器运维管理面板&#xff0c;于2023年3月推出&#xff0c;深度集成WordPress和Halo&#xff0c;一键完成域名绑定、SSL证书配置等操作&a…

draw.io学习笔记

1、链接 1.1、自动连接图形 鼠标放在图形上&#xff0c;点击出现的箭头&#xff0c;会自动出常用图形 1.2、固定连接 如果拖动其中一个图形的话&#xff0c;固定链接的形状会是曲线连过去。 方法&#xff1a;不要点击左边图形鼠标放在边框上面左边出现绿圆点鼠标左键点击图形的…

小秋SLAM入门实战ROS文章汇总

小秋SLAM入门实战教程汇总 【launch文件中如何启动gdb调试单个节点多个节点】 一个ros可执行程序可以定义几个节点&#xff1f; ros启动节点的launch文件你真的会写吗&#xff1f; 【Point Cloud ROS】用一张彩色图像和深度图像生成点云图像 【Point Cloud ROS】两张点云图像之…

Oracle研学-对象

学自B站黑马程序员 1.视图 (物化视图序列同义词oracle特有&#xff09; 1.对一个SQL语句的封装&#xff0c;一个虚拟的表。-简化开发 视图是一种数据库对象&#xff0c;是从一个或者多个数据表或视图中导出的虚表&#xff0c;视图所对应的数据并不真正地存储在视图中&#xff…

【Linux】深度解剖环境变量

> 作者简介&#xff1a;დ旧言~&#xff0c;目前大二&#xff0c;现在学习Java&#xff0c;c&#xff0c;c&#xff0c;Python等 > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;熟悉并掌握Linux的环境变量。 > 毒鸡汤&#x…

LeetCode刷题--- 单词搜索

个人主页&#xff1a;元清加油_【C】,【C语言】,【数据结构与算法】-CSDN博客 个人专栏 力扣递归算法题 http://t.csdnimg.cn/yUl2I 【C】 ​​​​​​http://t.csdnimg.cn/6AbpV 数据结构与算法 ​​​​http://t.csdnimg.cn/hKh2l 前言&#xff1a;这个专栏主要讲述…

LLM之RAG实战(十一)| 使用Mistral-7B和Langchain搭建基于PDF文件的聊天机器人

在本文中&#xff0c;使用LangChain、HuggingFaceEmbeddings和HuggingFace的Mistral-7B LLM创建一个简单的Python程序&#xff0c;可以从任何pdf文件中回答问题。 一、LangChain简介 LangChain是一个在语言模型之上开发上下文感知应用程序的框架。LangChain使用带prompt和few-…

CENTOS docker拉取私服镜像

概述 docker的应用越来越多&#xff0c;安装部署越来越方便&#xff0c;批量自动化的镜像生成和发布都需要docker镜像的拉取。 centos6版本太老&#xff0c;docker的使用过程中问题较多&#xff0c;centos7相对简单容易。 本文档主要介绍centos系统安装docker和拉取docker私…

一文了解无线通信 - NB-IOT、LoRa

NB-IOT、LoRa 目录概述需求&#xff1a; 设计思路实现思路分析 NB-IOT1.LoRa2.区别 参考资料和推荐阅读 Survive by day and develop by night. talk for import biz , show your perfect code,full busy&#xff0c;skip hardness,make a better result,wait for change,chall…

奇偶公式推导

推导前提: 基函数: f ( x ) − f ( − x ) f(x)-f(-x) f(x)−f(−x)偶函数: f ( x ) f ( − x ) f(x)f(-x) f(x)f(−x) 1. 奇函数 ∗ 奇函数 偶函数 奇函数*奇函数偶函数 奇函数∗奇函数偶函数 f 1 ( x ) ∗ f 2 ( x ) f_1(x)*f_2(x) f1​(x)∗f2​(x) − f 1 ( x ) ∗ …

[sparkSQL] Shuffle

在Spark SQL中&#xff0c;Shuffle 是指将数据重新分布到不同的节点上以进行处理的操作。在 Spark SQL 中&#xff0c;以下是一些可能触发 Shuffle 的操作或代码&#xff1a; group by 和 aggregations&#xff1a; 当使用 GROUP BY 或聚合函数&#xff08;如 SUM、AVG&#xf…

istio 虚拟服务 yaml 解释

虚拟服务 virtualservice 可以类比 k8s service 管理 pod&#xff0c; vs 是管理 svc 的 vs 对 svc 定义了流量规则&#xff0c;将满足条件的流量转发到对应的服务后端 配置定义 hosts&#xff1a;流量发送的目标 在 k8s 中&#xff0c;hosts 一般是 servic 的短域名&#x…

简单了解SQL堆叠注入与二次注入(基于sqllabs演示)

1、堆叠注入 使用分号 ; 成堆的执行sql语句 以sqllabs-less-38为例 ?id1 简单测试发现闭合点为单引号 ?id1 order by 3 ?id1 order by 4使用order by探测发现只有三列&#xff08;字段数&#xff09; 尝试简单的联合注入查询 ?id-1 union select 1,database(),user()-…