html+css+javascript 入门级代码写的水果机 -------没有概率算法

最新推荐文章于 2025-05-27 22:12:22 发布
最新推荐文章于 2025-05-27 22:12:22 发布
阅读量1k 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/lurenjiazrj/p/8365616.html
本文介绍了一个简单的水果机游戏界面布局与交互逻辑实现。使用HTML和CSS进行页面布局，通过JavaScript实现了游戏的开始、计分及投币等功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水果机</title>
    <style>
        *{margin: 0;padding: 0;}
        ul{
            list-style: none;
            display: flex;
            justify-content: space-between;
        }
        li{
            float: left;
        }
        img{
            width: 50px;
            height: 50px;}
        .box{
            width:540px;
            height:800px;
            margin:0 auto;
            border: 2px black solid;
        }
        table{
            border: 3px #777777 solid;
            margin: 0 auto;
        }
        .borderBlack{
            border: 2px black solid;
        }
        .num{
            width: 30px;
        }
        .sBtn{
            width: 15px;
        }
        #shili{
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>
<body>
<div class="box" id='0'>
    <table border="0" cellspacing="0" cellpadding="0"
        <tr>
            <td id='1' class="borderBlack"><img src="images/logo_01.gif" alt=""></td>
            <td id='2' class="borderBlack"><img src="images/logo_02.gif" alt=""></td>
            <td id='3' class="borderBlack"><img src="images/logo_03.gif" alt=""></td>
            <td id='4' class="borderBlack"><img src="images/logo_04.gif" alt=""></td>
            <td id='5' class="borderBlack"><img src="images/logo_05.gif" alt=""></td>
            <td id='6' class="borderBlack"><img src="images/logo_06.gif" alt=""></td>
            <td id='7' class="borderBlack"><img src="images/logo_07.gif" alt=""></td>
            <td id='8' class="borderBlack"><img src="images/logo_08.gif" alt=""></td>
        </tr>
        <tr>
            <td id='28' class="borderBlack"><img src="images/logo_01.gif" alt=""></td>
            <td colspan="6" rowspan="6">
                倍率如下：</br>
                7：X2</br>
                其他：X3</br>
                BAR：X50  一注bar需要十点积分</br>
            </td>
            <td id='9' class="borderBlack"><img src="images/logo_09.gif" alt=""></td>
        </tr>
        <tr>
            <td id='27'class="borderBlack"><img src="images/logo_09.gif" alt=""></td>
            <td id='10'class="borderBlack"> <img src="images/logo_01.gif" alt=""></td>
        </tr>
        <tr>
            <td id='26' class="borderBlack"> <img src="images/logo_08.gif" alt=""></td>
            <td id='11' class="borderBlack"><img src="images/logo_02.gif" alt=""></td>
        </tr>
        <tr>
            <td id='25' class="borderBlack"><img src="images/logo_07.gif" alt=""></td>
            <td id='12' class="borderBlack"><img src="images/logo_03.gif" alt=""></td>
        </tr>
        <tr>
            <td id='24' class="borderBlack"><img src="images/logo_06.gif" alt=""></td>
            <td id='13' class="borderBlack"><img src="images/logo_04.gif" alt=""></td>
        </tr>
        <tr>
            <td id='23' class="borderBlack"><img src="images/logo_05.gif" alt=""></td>
            <td id='14' class="borderBlack"><img src="images/logo_05.gif" alt=""></td>
        </tr>
        <tr>
            <td id='22' class="borderBlack"><img src="images/logo_04.gif" alt=""></td>
            <td id='21' class="borderBlack"><img src="images/logo_03.gif" alt=""></td>
            <td id='20' class="borderBlack"><img src="images/logo_02.gif" alt=""></td>
            <td id='19' class="borderBlack"><img src="images/logo_01.gif" alt=""></td>
            <td id='18' class="borderBlack"><img src="images/logo_09.gif" alt=""></td>
            <td id='17' class="borderBlack"><img src="images/logo_08.gif" alt=""></td>
            <td id='16' class="borderBlack"><img src="images/logo_07.gif" alt=""></td>
            <td id='15' class="borderBlack"><img src="images/logo_06.gif" alt=""></td>
        </tr>
    </table>
    <p><input type="button" id='start' value="开始"/></p>
    <div id='shili'>
        <img src="images/logo_01.gif" alt="" />
        <img src="images/logo_02.gif" alt="" />
        <img src="images/logo_03.gif" alt="" />
        <img src="images/logo_04.gif" alt="" />
        <img src="images/logo_05.gif" alt="" />
        <img src="images/logo_06.gif" alt="" />
        <img src="images/logo_07.gif" alt="" />
        <img src="images/logo_08.gif" alt="" />
        <img src="images/logo_09.gif" alt="" />
    </div>
    <ul id='setbtn'>
        <li>
            <p><input type="button" id="" value="+" class="sBtn"/>
            <input type="button" id="" value="-" class="sBtn"/></p>
            <p><input type="text" id="" value="" class="num" /></p>
        </li>
        <li>
            <p><input type="button" id="" value="+" class="sBtn"/><input type="button" id="" value="-" class="sBtn"/></p>
            <p><input type="text" id="" value="" class="num"/></p>
        </li>
        <li>
            <p><input type="button" id="" value="+" class="sBtn"/><input type="button" id="" value="-" class="sBtn"/></p>
            <p><input type="text" id="" value="" class="num"/></p>
        </li>
        <li>
            <p><input type="button" id="" value="+" class="sBtn"/><input type="button" id="" value="-" class="sBtn"/></p>
            <p><input type="text" id="" value="" class="num"/></p>
        </li>
        <li>
            <p><input type="button" id="" value="+" class="sBtn"/><input type="button" id="" value="-" class="sBtn"/></p>
            <p><input type="text" id="" value="" class="num"/></p>
        </li>
        <li>
            <p><input type="button" id="" value="+" class="sBtn"/><input type="button" id="" value="-" class="sBtn"/></p>
            <p><input type="text" id="" value="" class="num"/></p>
        </li>
        <li>
            <p><input type="button" id="" value="+" class="sBtn"/><input type="button" id="" value="-" class="sBtn"/></p>
            <p><input type="text" id="" value="" class="num"/></p>
        </li>
        <li>
            <p><input type="button" id="" value="+" class="sBtn"/><input type="button" id="" value="-" class="sBtn"/></p>
            <p><input type="text" id="" value="" class="num"/></p>
        </li>
        <li>
            <p><input type="button" id="" value="+" class="sBtn"/><input type="button" id="" value="-" class="sBtn"/></p>
            <p><input type="text" id="" value="" class="num"/></p>
        </li>
    </ul>
    <div>
        <input type="text" value='100' id='coin' readonly="readonly"/><input type="button" value="投币" id='insertCoins'/>
    </div>
</div>
</body>
</html>
<script src="index.js"></script>

js部分

 

  1 var startbtn=document.getElementById("start");
  2 var ID=1;
  3 var IDX=0;
  4 var resultID=0;
  5 startbtn.onclick=function(){
  6     //开始部分
  7     var a=Math.round(Math.random()*20+20);
  8     var b=0;
  9     var time;
 10     time=setInterval(function(){
 11         b++;
 12         if(b==a){
 13             resultID=ID;
 14             clearInterval(time);
 15             caculate();
 16         }else{
 17             if(ID>28){
 18                 ID=1;
 19                 var returnBack=document.getElementById(IDX.toString());
 20                 returnBack.style.border='2px black solid';
 21                 IDX=0;
 22                 var pickedImg = document.getElementById(ID.toString());
 23                 pickedImg.style.border='2px red solid';
 24                 
 25             }else{
 26                 var pickedImg = document.getElementById(ID.toString());
 27                 pickedImg.style.border='2px red solid';
 28                 var returnBack=document.getElementById(IDX.toString());
 29                 returnBack.style.border='2px black solid';
 30                 ID++;
 31                 IDX++;
 32             }    
 33         }
 34     },100)        
 35 }    
 36 
 37     var ulSetBtn=document.getElementById("setbtn").children;
 38     //初始化
 39     for(var i=0;i<ulSetBtn.length;i++){
 40         var p=ulSetBtn[i].lastElementChild;
 41         p.firstElementChild.value=0;
 42         p.firstElementChild.setAttribute("readonly",'readonly');
 43     }
 44     //计分器初始化并添加监听事件
 45     for (let i =0;i<ulSetBtn.length;i++){    
 46         var btn00=ulSetBtn[i].firstElementChild.firstElementChild;
 47         btn00.addEventListener('click',function(){
 48             var x=ulSetBtn[i].lastElementChild.firstElementChild;
 49                 x.value=parseInt(x.value)+1;
 50                 if(i!=7){
 51                     coin.value=parseInt(coin.value)-1;
 52                 }else{
 53                     coin.value=parseInt(coin.value)-10;
 54                 }                
 55         })
 56         var btn01=ulSetBtn[i].firstElementChild.lastElementChild;
 57         btn01.addEventListener('click',function(){
 58             var x=ulSetBtn[i].lastElementChild.firstElementChild;
 59             if(x.value>0){
 60                 x.value=parseInt(x.value)-1;
 61                 coin.value=parseInt(coin.value)+1;
 62             }
 63         })
 64     }
 65     //投币部分
 66     var insertCoins=document.getElementById("insertCoins");
 67     var coin=document.getElementById("coin");
 68     insertCoins.onclick=function(){
 69         coin.value=parseInt(coin.value)+100;
 70     }
 71     //清算得分
 72     function caculate(){
 73         var result=(resultID-1)%8
 74         switch(result){
 75             case 0 :
 76             var x=ulSetBtn[0].lastElementChild.firstElementChild;
 77                 coin.value=parseInt(coin.value)+parseInt(x.value)*2;
 78                 break;
 79             case 1 :
 80             var x=ulSetBtn[1].lastElementChild.firstElementChild;
 81                 coin.value=parseInt(coin.value)+parseInt(x.value)*3;
 82                 break;
 83             case 2 :
 84             var x=ulSetBtn[2].lastElementChild.firstElementChild;
 85                 coin.value=parseInt(coin.value)+parseInt(x.value)*3;
 86                 break;
 87             case 3 :
 88             var x=ulSetBtn[3].lastElementChild.firstElementChild;
 89                 coin.value=parseInt(coin.value)+parseInt(x.value)*3;
 90                 break;
 91             case 4 :
 92             var x=ulSetBtn[4].lastElementChild.firstElementChild;
 93                 coin.value=parseInt(coin.value)+parseInt(x.value)*3;
 94                 break;
 95             case 5 :
 96             var x=ulSetBtn[5].lastElementChild.firstElementChild;
 97                 coin.value=parseInt(coin.value)+parseInt(x.value)*3;
 98                 break;
 99             case 6 :
100             var x=ulSetBtn[6].lastElementChild.firstElementChild;
101                 coin.value=parseInt(coin.value)+parseInt(x.value)*3;
102                 break;
103             case 7 :
104             var x=ulSetBtn[7].lastElementChild.firstElementChild;
105                 coin.value=parseInt(coin.value)+parseInt(x.value)*50;
106                 break;
107             case 8 :
108             var x=ulSetBtn[8].lastElementChild.firstElementChild;
109                 coin.value=parseInt(coin.value)+parseInt(x.value)*2;
110                 break;
111         }
112         for(var i=0;i<ulSetBtn.length;i++){
113         var p=ulSetBtn[i].lastElementChild;
114         p.firstElementChild.value=0;}
115     }
116

 

转载于:https://www.cnblogs.com/lurenjiazrj/p/8365616.html

低代码平台如何加速AI原生应用开发？
AI天才研究院
07-11 350
我想做一个AI应用，但不会写复杂的Python代码，也不懂深度学习，能行吗？本文将聚焦“低代码平台”与“AI原生应用”的结合，说明低代码如何解决AI开发中的“技术门槛高、流程繁琐、迭代慢”三大痛点，范围覆盖从“ idea 到上线”的全流程。本文将按照“问题引入→核心概念解释→流程对比→实战演示→趋势展望”的逻辑展开，用“做蛋糕”的类比贯穿始终，让你像理解“如何做蛋糕”一样理解“如何用低代码做AI应用”。AI原生应用：从设计之初就以AI为核心驱动力的应用（如ChatGPT），而非传统应用加“AI插件”；
目标检测YOLO系列从入门到精通技术详解100篇-【目标检测】数字图像处理
getusushu的博客
12-11 1379
随着高清采集、高清传输、高清解码和显示设备的不断升级，极大地满足了人们对高清画质的需求。高清设备带来的高分辨率提升了视频清晰度，但仍不能保证在所有情况下都能看的清楚，看的明白，比如雨天、雾霾等恶劣天气或者夜间低照度环境下，虽百万像素也只能望图兴叹，无可奈何了；又如为了节省带宽而采用高压缩比编码带来的分块效应，造成图像质量下降。
欢乐水果机网页前端html代码
06-20
欢乐水果机网页前端html代码 完整的项目代码，解压后在浏览器打开html页面就能玩。 js、css、html代码元素全部完成，解压就能使用。 移植一下就是完整的项目！
水果机的几率设计
weixin_34402090的博客
06-29 3973
水果机有8种基本图形： A、苹果 B、橙子 C、木瓜 D、铃铛 E、西瓜 F、星星 G、777 H、大百 每一种对应有“小样图形”，中奖倍数是：3.然后左右分别有一个“幸运位置”，可产生跳跃，闪烁等效果。 总体情况如下：   图形 赔率 标准化 最小公倍数 苹果 5 120 ...
HTML5 jquery仿水果老虎机抽奖特效代码.rar
07-10
HTML5 jquery仿水果老虎机抽奖特效代码,jquery的调用引入的是jquery-1.11.1.min.js版本，模拟出完全 动感十足的网页在线抽奖动画，和水果机的形式是一模一样的，修改一上，可为你的网站增加一个这种类似的抽奖功能。 　　本代码在兼容HTML5的浏览器中效果更佳，比如Chrome或火狐或IE10 。
利用原生JS写成小游戏——欢乐水果机
qq_45847045的博客
04-22 4612
利用原生JS写成小游戏——欢乐水果机 简介： 玩家点击某个押注物品则在该物品上下注。点击开始则游戏开始，如果没有下注则不能开始游戏。 游戏中的物品有八中，分别为：苹果、西瓜、柠檬、橙子、铃铛、77、双星、BAR。 在放行游戏区左右方为押注区，每种物品下方有加减号按钮，每次点 击加号增加一个筹码注金，反之减号就减少一个筹码注金 开始： 开始键 奖励：GOOD LUCK 由于这个时低配版的，我就没有按...
H5水果机，一个网络版的lao hu ji
aipingtang2282的博客
05-20 1646
(由于服务器迁移原因，该游戏已经下架) 炳秀广告 该游戏为h5小游戏，纯属娱乐，技术探讨，相关技术在文章结尾，欢迎探讨交流 花了几天时间开发了这款水果lao hu ji，更新了几个版本，还有不足的地方，由于时间有限暂时没有继续更新新版本 　　未完成的功能如下： 　　1、按钮的交互UI特效和声音 　　2、跑马灯效果 　　3、转盘转动的声音及中奖声音 　　4、加载页面完善(...
Less 前端开发中的响应式导航栏实现
最新发布
小白菜的博客
05-27 1061
在移动互联网时代，一个网站的导航栏需要同时适配 PC 大屏、平板、手机等不同尺寸的设备。传统 CSS 开发中，响应式样式往往需要重复编写大量代码，维护成本高。而 Less 作为一款 CSS 预处理器，通过变量、混合（Mixin）、嵌套等特性，能显著提升样式代码的可维护性。本文将聚焦“如何用 Less 高效实现响应式导航栏”，覆盖 Less 核心功能的使用、响应式设计的关键技巧，以及完整的开发实战。
Java Web从入门到实战
m0_67393342的博客
07-30 2777
操作系统：管理计算机硬件与软件资源的计算机程序，同时也是计算机系统的内核与基石。主流操作系统Linux发展历程Linux特点Linux与其它操作系统的区别Linux发行商和常见发行版先安装虚拟机，再安装CentosVmware简介Vmware下载：https://www.vmware.com/cn.htmlCentOS镜像下载：https://www.centos.org/download/ 高速下载地址简介：SecureCRT是一款支持SSH（SSH1和SSH2）的终端仿真程序，简单地说是Windows下
1000套安卓（Android）毕业设计（带论文）、大作业、实例快速下载 （Android Studio）
web13618542420的博客
05-30 5488
ctrl+F 快速定位 序号 类型 项目名称 1 毕业设计 毕业设计-基于安卓Android学生考勤信息管理系统.zip 2 毕业设计 毕业设计-安卓Android教务选课成绩管理系统.zip 3 毕业设计 114基于Android的理财记账本20141215+论文+需求文档+演示视频.zip.zip 4 毕业设计 Android科大讯飞语音识别.zip 5 毕业设计 基于android的点餐系统.zip.zip 6 毕业设计 Android客户端与服务器端的json数据交互(服务端客户端) .zip .
水果机游戏源码
11-07
这是一款水果机的游戏源码，可以直接用，希望能帮到你们。
水果app Html纯静态页面(自己写的)
03-19
水果app Html纯静态页面(自己写的)
水果机源码
08-25
欢迎我们的水果机器源码的到来为各位朋友带来欢乐！
H5二开水果机源码/服务安装linux7x
02-07
配置环境开始 服务安装linux7x 服务器环境： Nginx MySQL 5.6 php5.6 安装拓展redis Swoole PHP5.6禁用函数全删 1.创建网站绑定域名 PHP版本选择5.6 压缩源码并上传解压 格式用ZIP 名称用英文 解压出来 2.创建数据库并上传导入 3.根目录里 编辑myerweima.php修改里面的域名 这里标注域名的地方修改为你的域名 /WangYa找到config.php修改数据库用户名密码 /WangYa找到conn.php修改里面的域名 这里一键替换，比较多 /WangYa/temp/Game找到server_laohujiK 修改为你的IP服务器ip 端口不变 后台登录地址 域名/admin 账号admin 密码123456 进入后台：游戏中心，点击游戏管理 点击编辑 服务器列表处 里面的IP替换为你的服务器IP 端口不变 微信登陆接口和支付对接 支付对接：/zpay/src 编辑zpay_config.php 填入Z支付ID和密钥 前端需开通Z支付的微信登陆接口，绑定域名，才能进去
HTML5好看的水果蔬菜在线商城网站源码2
09-18
资源描述： HTML5好看的水果蔬菜在线商城网站源码2，水果蔬菜在线商城源码，最全商城模板，水果蔬菜模板，一款大气的网上蔬菜店/水果店购物商城HTML模板，内置十四个模板页面，覆盖各种商城需求页面，酷炫的界面效果，简易的整体风格，实现了商店的所需功能，登录，注册，网格列表，信息列表，我的订单，轮播图，表单，导航菜单，购物车，列表等，注释完整，代码规范，各种风格都有，代码上手简单，代码独立，可以直接运行使用。也可直接预览效果。 效果演示地址： https://blog.youkuaiyun.com/weixin_43151418/article/details/142059220 资源使用： 点击 index.html 直接查看效果
使用常用的机器学习算法对水果数据集进行分类（逻辑回归、决策树、KNN、SVM等）
白话机器学习
12-28 1351
使用常用的机器学习算法对水果数据集进行分类（逻辑回归、决策树、KNN、SVM等）
XNA 做一个水果机的游戏
weixin_33832340的博客
08-01 294
XNA下在电脑里也有一年了，不过只是刚刚下载来时看看，前两天突然想做个小游戏，于是又重新安装了XNA的3.0CTP 看了看，比C++/DirectX的流程自然是简单许多，做出来的游戏也很是流畅，不必去担心API也不用去想复杂的效果实现细节 只要将算法搞好，坐标搞对，就成了。   总体来看XNA还是不错 下载地址  http://www.microsoft.com/do...
canvas实现水果机游戏
F_eve的博客
04-06 632
这是html和js代码，需要导入jquery，和重置样式表。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>FruitGame</title> <lin
水果机H5抽奖
ICode联盟
10-07 339
下载地址响应式布局，即插即用 dd:
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值