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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

《C++PrimerPlus》第13章 类继承

13.1 一个简单的基类 基类和派生类示例&#xff08;球会会员管理&#xff09; 头文件tabtenn1.h #ifndef __TABTENN1_H__ #define __TABTENN1_H__#include <iostream> #include <string>using namespace std;class TableTennisPlayer {private:string firstname;…

js实时监听input输入框值的变化

实习日记之通过调用common chemistry的api接口实现输入keyword查找cas号和mw。做了一个简单的html网页&#xff0c;用到了ajax技术。比较简单&#xff0c;适合刚入门的宝学习参考。代码如下&#xff1a; <!DOCTYPE html> <html lang"en"> <head>&l…

理解 AQS 和 ReentrantLock

其他系列文章导航 Java基础合集数据结构与算法合集 设计模式合集 多线程合集 分布式合集 ES合集 文章目录 其他系列文章导航 文章目录 前言 一、公平锁和非公平锁 1.1 含义 1.2 如何自我实现 1.2.1 公平锁实现&#xff1a; 1.2.2 非公平锁实现: 1.2.3 公平和非公平的区…

Leetcode的AC指南 —— 哈希法/双指针:15. 三数之和

摘要&#xff1a; Leetcode的AC指南 —— 15. 三数之和。题目介绍&#xff1a;给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且…

数据结构学习 Leetcode72 编辑距离

关键词&#xff1a;动态规划 最长公共子序列 题目&#xff1a; 思路&#xff1a; 这题我虽然做出来了但是还是有点迷糊。首先&#xff0c;这道题一定是和最长公共子序列相似的。 所以往最长公共子序列方向思考&#xff0c;考虑的它的状态和转移方程以及边界。 状态和转移方…

Ajax学习

文章目录 AjaxAjax 是什么Ajax 经典应用场景Ajax 原理示意图ajax的异步请求的方法ajax的逻辑:应用实例-验证用户名是否存在思路框架图:需求分析: 到数据库去验证用户名是否可用思路框架图大功告成:使用JQuery-Ajax实现上面相同的需求:Ajax Ajax 是什么 AJAX 即"Async…

【HTML5】第1章 HTML5入门

学习目标 了解网页基本概念&#xff0c;能够说出网页的构成以及网页相关名词的含义 熟悉Web标准&#xff0c;能够归纳Web标准的构成。 了解浏览器&#xff0c;能够说出各主流浏览器的特点。 了解HTML5技术&#xff0c;能够知道HTML5发展历程、优势以及浏览器对HTML5的支持情…

【嵌入式开发学习必备专栏】

文章目录 嵌入式开发学习必备专栏1.1 ARM Coresight SoC-400/SoC-600 专栏导读目录1.1.1 Performance Profiling1.1.2 ARM Coresight Debug 工具系列1.1.2.1 ARM DS5 系列1.1.2.2 劳特巴赫 Trace32 系列1.1.2.3 JTAG OpenOCD 系列 1.2 ARM Cache 专栏1.3 ARM AMBA Bus 专栏1.3.…

java使用JSON工具解析字符串、数组详解

一&#xff1a;问题 1.最近自己在前后端数据交互时需要进行JSON格式字符串、数组数据进行转换&#xff0c;进行问题整理 2.遇到需要JSON字符串转换的朋友可以阅读 二&#xff1a;解析步骤 1.第一点首先确定需求&#xff0c;明确需要转的字符串是一个对象还是一个数组&#…

C练习——判断三角形并求面积

题目&#xff1a;从健盘任意输入三角形的三边长为a,b,c,编程判断a,b,c的值能否构成一个三角形&#xff0c;若能构成三角形&#xff0c;则计算并输出三角形的面积&#xff0c;否则提示不能构成三角形。 已知构成三角形的条件是&#xff1a;任意两边之和大于第三边。 解析&#…

jQuery-Validate验证插件的使用步骤【详解】

jQuery-Validate验证插件的使用步骤详解 1. 写在前面2. 效果展示3. Validate环境的搭建4. Validate基本方法的使用5. 实现错误消息的本地化6. 实现远程验证7. 自定义验证方法8. 验证表单完整版8.1 Html表单8.2 表单验证js逻辑8.3 表单验证css样式 1. 写在前面 我们知道&#x…

windows11经常断网WiFi

解决方法&#xff1a;从官方网站下载&#xff0c;更新WiFi驱动程序&#xff0c;

Linux:apache优化(2)—— 网页传输压缩

网页传输压缩 客户端在请求httpd服务器数据&#xff0c;httpd服务器在返回数据包给客户端时&#xff0c;先对返回的数据进行压缩&#xff0c;压缩之后再传输 作用&#xff1a;配置 Apache 的网页压缩功能&#xff0c;是使用 Gzip 压缩算法来对 Apache 服务器发布的网页内容进行…

AI又进化了,AI 写代码工具

今年 AI 的发展可谓一日千里&#xff0c;相信不少同学应该都用过 AI 来帮助自己提高开发效率吧&#xff1f; 比如让 AI 根据注释生成代码、解释整段代码、提供技术问题的答疑、修改 Bug、生成单元测试等等。 在 12 月 28 日刚刚结束的 WAVE SUMMIT 深度学习开发者大会上&…

STM32CubeMX教程8 TIM 通用定时器 - 输出比较

目录 1、准备材料 2、实验目标 3、实验流程 3.0、前提知识 3.1、CubeMX相关配置 3.1.1、时钟树配置 3.1.2、外设参数配置 3.1.3、外设中断配置 3.2、生成代码 3.2.1、外设初始化函数调用流程 3.2.2、外设中断函数调用流程 3.2.3、添加其他必要代码 4、常用函数 5…

Mysql 容易忘的 sql 指令总结

目录 一、操作数据库的基本指令 二、查询语句的指令 1、基本查询语句 2、模糊查询 3、分支查询 4、 分组查询 5、分组查询 6、基本查询总结&#xff1a; 7、子查询 8、连接查询 三、MySQL中的常用函数 1、时间函数 2、字符串函数 3、聚合函数 4、运算函数 四、表…

Leetcode 63 不同路径 II

题意理解&#xff1a; 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish”&#xff09;。 要求&#xff1a;机器人只能…

Jmeter学习总结(4)——提取接口响应内容JSON Extractor

后置提取常见的方式&#xff1a;正则表达式和JSON Extractor。 而接口响应大多是JSON格式。 在JSON提取器之前&#xff0c;可以根据响应结果去编写所需要的JSON表达式&#xff0c;在结果树中选择JSON PATH TESTER。 {"server_time": 1232333333333,"data&quo…

基于ssm的4S店预约保养系统开发+vue论文

目 录 目 录 I 摘 要 III ABSTRACT IV 1 绪论 1 1.1 课题背景 1 1.2 研究现状 1 1.3 研究内容 2 2 系统开发环境 3 2.1 vue技术 3 2.2 JAVA技术 3 2.3 MYSQL数据库 3 2.4 B/S结构 4 2.5 SSM框架技术 4 3 系统分析 5 3.1 可行性分析 5 3.1.1 技术可行性 5 3.1.2 操作可行性 5 3…

双语!性能优越|融合黏菌和差分变异的量子哈里斯鹰算法SDMQHHO

前面的文章里卡卡介绍了哈里斯鹰优化算法(Harris Hawks Optimization, HHO).HHO是 Heidari等[1]于2019年提出的一种新型元启发式算法&#xff0c;设计灵感来源于哈里斯鹰在捕食猎物过程中的合作行为以及突然袭击的狩猎风格&#xff0c;具有需调参数少、原理简单易实现、局部搜索…