基于js和html的骰子游戏

news2024/11/24 0:05:17

介绍:

  • 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.coloradmin.cn/o/1343695.html

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

相关文章

【Linux系统编程二十五】:线程概念(Linux中的轻量级进程)

【Linux系统编程二十五】&#xff1a;线程概念(Linux中的轻量级进程&#xff09; 一.线程的概念1.地址空间是资源窗口 二.线程初步理解1.进程执行分支(内部运行)2.执行粒度更细3.重构进程概念&#xff1a;系统资源分配的基本实体4.重构线程概念&#xff1a;系统调度的基本单位5…

TCP/IP的网络层(即IP层)之IP地址和网络掩码,在视频监控系统中的配置和应用

在给客户讲解我们的AS-V1000视频监控平台的时候&#xff0c;有的客户经常会配置错误IP地址的掩码和网关&#xff0c;导致出现一些网路问题。而在视频监控系统中&#xff0c;IP地址和子网掩码是用于标识网络中设备的重要标识符。IP地址被用来唯一地标识一个网络设备&#xff0c;…

ubuntu下编译obs-studio遇到的问题记录

参考的是这篇文档&#xff1a;Build Instructions For Linux obsproject/obs-studio Wiki GitHub 在安装OBS dependencies时&#xff0c; sudo apt install libavcodec-dev libavdevice-dev libavfilter-dev libavformat-dev libavutil-dev libswresample-dev libswscale-d…

如何在 NAS 上安装 ONLYOFFICE 文档?

文章作者&#xff1a;ajun 导览 ONLYOFFICE 文档 是一款开源办公套件&#xff0c;其是包含文本文档、电子表格、演示文稿、表单、PDF 查看器和转换工具的协作性编辑工具。它高度兼容微软 Office 格式&#xff0c;包括 .docx、.xlsx 、.pptx 、pdf等文件格式&#xff0c;并支持…

再见2023,你好2024

再见2023&#xff0c;你好2024 生活1月 悲伤与治愈2~4月 运动与偏爱5月 体验与美食6月 婚礼与热爱7~8月 就医与别离9~11月 陪伴与暖房12月 体验&新生 运动追剧读书总结 生活 生活是一个修罗场&#xff0c;来世间一场&#xff0c;要经历丰腴有趣的人生。去体验各种滋味&…

我的机器学习起步如何Getting Started

学习技巧和原则 先通过经典书籍进行科普知名机器学习网站根据书籍或网站的目录&#xff0c;先泛读、再选择有兴趣的部分重点精读、后至于反复读知行合一 起步Getting Started 周志华版《机器学习》&#xff0c;又名西瓜书 可以作为科普书籍&#xff0c;需要主动略过对于理论…

搭建flink集群 —— 筑梦之路

Apache Flink 是一个框架和分布式处理引擎&#xff0c; 用于在无边界和有边界数据流上进行有状态的计算。 Flink 能在所有常见集群环境中运行&#xff0c;并能以内存速度和任意规模进行计算。 Flink并没有依靠自身实现所有分布式系统需要解决的问题&#xff0c; 而是在已有集群…

vue连接本地服务器

vue 连接本地服务器做后端。 后端服务 使用springboot新建一个基于restful的接口&#xff0c;访问如下的地址&#xff0c;返回值。 vue构建 新建一个vue项目&#xff0c;安装访问服务器的插件。 npm install axios vue-axios --save 修改main.js使用axios&#xff0c;最终…

Linux 内核学习笔记: hlist 的理解

前言 最近阅读 Linux 内核时&#xff0c;遇到了 hlist&#xff0c;这个 hlist 用起来像是普通的链表&#xff0c;但是为何使用 hlist&#xff0c;hlist 是怎么工作的&#xff1f; 相关代码 hlist_add_head(&clk->clks_node, &core->clks); /*** clk_core_link_…

很实用的ChatGPT网站——httpchat-zh.com

很实用的ChatGPT网站——http://chat-zh.com/ 今天介绍一个好兄弟开发的ChatGPT网站&#xff0c;网址[http://chat-zh.com/]。这个网站功能模块很多&#xff0c;包含生活、美食、学习、医疗、法律、经济等很多方面。下面简单介绍一些部分功能与大家一起分享。 登录和注册页面…

Mac Pycharm在Debug模式报编码(SyntaxError)错误

1. 错误信息&#xff1a; Traceback (most recent call last):File "/Library/Developer/CommandLineTools/Library/Frameworks/Python3.framework/Versions/3.9/lib/python3.9/tokenize.py", line 330, in find_cookieline_string line.decode(utf-8) UnicodeDeco…

【持续更新ing】uniapp+springboot实现个人备忘录系统【前后端分离】

目录 &#xff08;1&#xff09;项目可行性分析 &#xff08;2&#xff09;需求描述 &#xff08;3&#xff09;界面原型 &#xff08;4&#xff09;数据库设计 &#xff08;5&#xff09;后端工程 接下来我们使用uniappspringboot实现一个简单的前后端分离的小项目----个…

numpy数组03-数组的计算

一.数组与数字之间进行计算 numpy中的数组与数字进行计算是广播形式&#xff0c;数组-*/数字&#xff0c;则数组中的每一个数字都会进行相应的四则运算。 1.1数组与数字之间的四则运算 示例代码如下&#xff1a; import numpy as npa np.arange(24) b a.reshape(4, 6) pr…

Flutter BottomSheet 拖动分两段展示

第一段 第二段 实现思路 通过 GestureDetector 的 Drag 方法&#xff0c;动态改变Dialog的高度&#xff0c;通过设置一个最大高度和最小高度分成两层进行展示 实现 常用的展示BottomSheet的方法为 showModalBottomSheet /// 设置最高最好以高度的比例进行设置&#xff0c;方…

mongoose中http server服务器解决“Access-Control-Allow-Origin mongoose”跨域问题

问题 使用mongoose做http服务器&#xff0c;自己构造的浏览器端jquery在访问server时&#xff0c;会遇到&#xff1a; Access to XMLHttpRequest at http://127.0.0.1:8000/ from origin null has been blocked by CORS policy: No Access-Control-Allow-Origin header is pr…

Shell脚本-bin/bash: 解释器错误: 没有那个文件或目录-完整路径执行-“/”引发的脑裂

引起该不适的一种可能以及解决方案&#xff0c;网上较多&#xff0c;比如&#xff1a; 但按以上方式操作&#xff0c;并经过查看&#xff0c;发现仍然未能解决问题。 因为两种方式执行&#xff0c;有一种能成功&#xff0c;有一种不能&#xff0c;刚开始未怀疑是文件问题&…

基于OpenAI的Whisper构建的高效语音识别模型:faster-whisper

1 faster-whisper介绍 faster-whisper是基于OpenAI的Whisper模型的高效实现&#xff0c;它利用CTranslate2&#xff0c;一个专为Transformer模型设计的快速推理引擎。这种实现不仅提高了语音识别的速度&#xff0c;还优化了内存使用效率。faster-whisper的核心优势在于其能够在…

分布式系统架构设计之分布式系统实践案例和未来展望

分布式系统在过去的几十年里经历了长足的发展&#xff0c;从最初的简单分布式架构到今天的微服务、云原生等先进架构&#xff0c;取得了丰硕的成果。本文将通过实际案例分享分布式系统的架构实践&#xff0c;并展望未来可能的发展方向。 一、实践案例 1、微服务化实践 背景 …

【HarmonyOS开发】案例-记账本开发

OpenHarmony最近一段时间&#xff0c;简直火的一塌糊度&#xff0c;学习OpenHarmony相关的技术栈也有一段时间了&#xff0c;做个记账本小应用&#xff0c;将所学知识点融合记录一下。 1、记账本涉及知识点 基础组件&#xff08;Button、Select、Text、Span、Divider、Image&am…

SpringBoot项目部署及多环境

1、多环境 2、项目部署上线 原始前端 / 后端项目宝塔Linux容器容器平台 3、前后端联调 4、项目扩展和规划 多环境 程序员鱼皮-参考文章 本地开发&#xff1a;localhost&#xff08;127.0.0.1&#xff09; 多环境&#xff1a;指同一套项目代码在把不同的阶段需要根据实际…