javascript实现水果机小游戏

水果机也叫老虎机，这个属于一种赌博类型游戏，玩家通过投币，来赌这把会出什么水果。我写的这款老虎机游戏。当下完赌注，压注之后，开启摇杆会随机匹配一个水果出来，会对应赌注增加/减少 。和真实老虎机还是有很多问题的。比如点击，压注之前摇杆隐藏，通杀。这里没有，庄家角色没有被匹配进来，毕竟是三四个小时写的东西，回头想想确实差了很多东西。不过效果看起来是不错的。

laohu.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js实现老虎机游戏</title>
</head>
<style>
    table{
        margin-left:400px;
       /* border-collapse: collapse;*/
        border:1px solid #999;
        float: left;
    }
    table td{
        width:40px;
        height:40px;
        text-align: center;
        background: #ffffff;
        border: 5px solid #eee;
        padding: 5px;
        font-family: "微软雅黑";
        font-style: normal;
        font-weight:bolder;

        font-size: 24px;
        color: red;

    }
   /* table td:first-child{
        border: 5px solid red;
    }*/
    table td img{
        width: 100%;
        height: 100%;;
    }
   .go{
       display: block;

       background: orange;
       color: #ffffff;
       font-family: "Times New Roman", Times, serif;
       font-size: 1em;
       text-align: center;
       margin: 10px auto;
       width: 150px;
       height:150px;
       line-height: 150px;
       border-radius: 50%;
       text-decoration: none;
       font-family: "Times New Roman", Times, serif;
       font-weight: bold;
       font-style: normal;
       font-size: 40px;;
   }
    .go:active{
        border:3px solid #999999;
    }
    #div1{
        width: 420px;
        height: 440px;
        border: 1px dashed #0eff45;
        float: left;
    }
    span{
        display: inline-block;
    }

    .title{
        display: inline-block;
        width: 130px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border-bottom: 1px solid red;
        font-weight: bold;
    }
    span.main{
        width: 130px;
        height: 40px;
        text-align: center;
        line-height: 30px;
        border-bottom: 1px solid #06581f;
    }
    .colorR{
        color: red;
        font-weight: bold;
    }
    span input{
        margin: 5px 0px;
        width: 100%;
        height: 90%;
    }
    .p1{
        margin-top: 30px;
        margin-left: 10px;
    }
    .p1 span{
        color: #FF0000;
        margin-right: 5px;
        font-size: 1em;
        font-weight: bold;
    }
    .p2{
        color: #999;
        font-size: 0.75em;
        margin-top: 25px;
        margin-left: 10px;
    }
    .yazhu{
        display: block;
        width: 200px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 5px;
        background: #0eff45;
        color: #ffffff;
        text-decoration: none;
        margin: 10px auto;
    }
    .yazhu:active{
        border: 3px solid #cccccc;
    }
</style>
<body>

<script>
    /**
     * 1:苹果 2：苹果梨 3：橘子 4：瓜子 5：杏仁 6：南瓜 7：花生
     * 8：香蕉
     * @type {*[]}
     */
    //搭建地图数组 数据结构
    var tiger =[
            [1,1,1,2,3,3,3],
            [1,0,0,0,0,0,4],
            [4,0,0,0,0,0,4],
            [6,0,0,0,0,0,4],
            [5,0,0,0,0,0,6],
            [4,0,0,0,0,0,7],
            [1,1,2,1,7,7,8]
    ];

    //搭建 表格地图函数
     function tabArr(arr){
         var oTab =document.createElement("table");
         oTab.setAttribute("border","1");
         oTab.setAttribute("id","tab");
         for(var i =0;i<arr.length;i++){
             var atr =document.createElement("tr");
             oTab.appendChild(atr);
             for(var j =0;j<arr[i].length;j++){
                 var atd1 =oTab.getElementsByTagName("tr")[i];
                 var atd = document.createElement("td");
                 atd1.appendChild(atd);

                 if(arr[i][j]==1) {
                     oTab.getElementsByTagName("tr")[i].getElementsByTagName("td")[j].innerHTML = '' +
                             '![](../javascript/jquery/img/pinguo.png)';
                 }
                 else if(arr[i][j]==2) {
                     oTab.getElementsByTagName("tr")[i].getElementsByTagName("td")[j].innerHTML = '' +
                             '![](../javascript/jquery/img/pl.png)';
                 }
                 else if(arr[i][j]==3) {
                     oTab.getElementsByTagName("tr")[i].getElementsByTagName("td")[j].innerHTML = '' +
                             '![](../javascript/jquery/img/juzi.png)';
                 }
                 else if(arr[i][j]==4) {
                     oTab.getElementsByTagName("tr")[i].getElementsByTagName("td")[j].innerHTML = '' +
                             '![](../javascript/jquery/img/guazi.png)';
                 }
                 else if(arr[i][j]==5) {
                     oTab.getElementsByTagName("tr")[i].getElementsByTagName("td")[j].innerHTML = '' +
                             '![](../javascript/jquery/img/xingren.png)';
                 }
                 else if(arr[i][j]==6) {
                     oTab.getElementsByTagName("tr")[i].getElementsByTagName("td")[j].innerHTML = '' +
                             '![](../javascript/jquery/img/nangua.png)';
                 }
                 else if(arr[i][j]==7) {
                     oTab.getElementsByTagName("tr")[i].getElementsByTagName("td")[j].innerHTML = '' +
                             '![](../javascript/jquery/img/huasheng.png)';
                 }
                 else if(arr[i][j]==8) {
                     oTab.getElementsByTagName("tr")[i].getElementsByTagName("td")[j].innerHTML = '' +
                             '![](../javascript/jquery/img/xiangjiao.png)';
                 }
                 else if(arr[i][j]==0){
                     oTab.getElementsByTagName("tr")[i].getElementsByTagName("td")[j].innerHTML = ' ';
                 }
             }
         }
         document.body.appendChild(oTab);
          oTab.getElementsByTagName("tr")[2].getElementsByTagName("td")[2].innerHTML='中';
          oTab.getElementsByTagName("tr")[2].getElementsByTagName("td")[4].innerHTML='奖';
          oTab.getElementsByTagName("tr")[4].getElementsByTagName("td")[2].innerHTML='水';
          oTab.getElementsByTagName("tr")[4].getElementsByTagName("td")[4].innerHTML='果';
     }
    tabArr(tiger);
    //alert(document.getElementsByTagName("td").length);
    //搭建 环形跑道数组
    function huaXing(){
        //这个函数，有待提升复用性
      var num =-1;
      var hArr =[];
        for(var i=0;i<1000;i++){
            if(num<6){
                num++;
                hArr.push(num);
            }
            else if(num>=6&&num<48){
                num+=7;
                hArr.push(num);
            }
        }
        //console.log(num) ==48 很好，我想要的数值
        for(var j =1000;j>0;j--){
            if(num<49&&num>42){
                num--;
                hArr.push(num);

            }
            if(j<=42){
                j-=6;
                hArr.push(j-1);
            }
        }
        return hArr;
    }
    var paodao =huaXing();
    //初始化 跑道第一个格子
   var MyTd = document.getElementsByTagName("td");
              MyTd[0].style.border='5px solid red';
    //alert(paodao.length)
    //跑马灯跑道函数
    var timeId =null; // 定时器变量
    var iSpeed =50; //定时器时间
    function paomaFun(){
        var xunhuan=0;    //记录当前跑到哪里了
        var num =0;       // 跑多少次，第一轮定时器停止
        var MaNum =0;     //第二次定时器停止初始值
        var MathTg =Math.floor((Math.random()*20)*5);
        alert(MathTg)
       // var MathRodom =Math.floor(Math.random()*10); //将要停止。。
        clearInterval(timeId);
            timeId=setInterval(function(){
                xunhuan++;
                num++;
                for(var i =0;i<MyTd.length;i++){
                    MyTd[i].style.border='';
                }
                MyTd[paodao[xunhuan]].style.border='5px solid red';
                if(xunhuan==paodao.length-1){
                    xunhuan=0;
                }
                 if(num==MathTg){
                     clearInterval(timeId);
                     iSpeed+=100;
                     clearInterval(t);
                     var t =setInterval(function(){
                          MaNum++;
                         xunhuan++;
                          for(var i =0;i<MyTd.length;i++) {
                              MyTd[i].style.border = '';
                          }
                          MyTd[paodao[xunhuan]].style.border='5px solid red';
                         if(xunhuan==paodao.length-1){
                              xunhuan=0;
                         }
                         if(MaNum==10){
                             clearInterval(t);
                             //当跑完了，计算一个，当前被选中td 在双数组中的索引值
                             tdIndex(tiger)
                             iSpeed=50;
                         }
                     },iSpeed);
                 }
            },iSpeed);
    }
    // 统计所有赌注金额
    function yazhu(){
        var oDiv =document.getElementById("div1");
        var aInput =oDiv.getElementsByTagName("input");
        var totalSpan =document.getElementById("totalSpan").innerHTML;
        var str=0;
        for(var i =0;i<aInput.length;i++){
            str+=parseInt(aInput[i].value);
        }
        //alert(totalSpan)
        if(parseInt(totalSpan)>str&&str!=0){
            var str1 =parseInt(totalSpan)-str
            document.getElementById("totalSpan").innerHTML=str1;
            document.getElementById("chaqian").innerHTML='';
        }else if(str==0){
            document.getElementById("chaqian").innerHTML='请输入您的赌注！';
        }else{
            document.getElementById("chaqian").innerHTML='余额不足！';
        }
    }
    //老虎机停止，查看当前td的索引
    function tdIndex(arr){
        var oTab= document.getElementById("tab");
        var aTr =oTab.getElementsByTagName("tr");
        var totalSpans=document.getElementById("totalSpan").innerHTML;
        var aIpt =document.getElementById("div1").getElementsByTagName("input");
        var ijImg;
        oTab.getElementsByTagName("tr")[3].getElementsByTagName("td")[3].style.border='5px solid yellow';
        var pasIntTot =parseInt(totalSpans);
        for(var i =0;i<aTr.length;i++){
            var aTd =aTr[i].getElementsByTagName("td");
            for(var j =0;j<aTd.length;j++){
                if(aTd[j].style.border=='5px solid red'){
                    //alert(arr[i][j]); =====这里判断一下，
                    if(arr[i][j]==1){
                        ijImg=aTd[j].innerHTML;
                        aTr[3].getElementsByTagName("td")[3].innerHTML=ijImg;
                        pasIntTot+=parseInt(aIpt[4].value);
                        document.getElementById("totalSpan").innerHTML=pasIntTot;
                        //alert(pasIntTot)
                    }
                    else if(arr[i][j]==2){
                        ijImg=aTd[j].innerHTML;
                        aTr[3].getElementsByTagName("td")[3].innerHTML=ijImg;
                        pasIntTot+=(parseInt(aIpt[2].value)*3);
                        document.getElementById("totalSpan").innerHTML=pasIntTot;
                        //alert(pasIntTot)
                    }
                    else if(arr[i][j]==3){
                        ijImg=aTd[j].innerHTML;
                        aTr[3].getElementsByTagName("td")[3].innerHTML=ijImg;
                        pasIntTot+=parseInt(aIpt[4].value);
                        document.getElementById("totalSpan").innerHTML=pasIntTot;
                       // alert(pasIntTot)
                    }
                    else if(arr[i][j]==4){
                        ijImg=aTd[j].innerHTML;
                        aTr[3].getElementsByTagName("td")[3].innerHTML=ijImg;
                        pasIntTot+=parseInt(aIpt[4].value);
                        document.getElementById("totalSpan").innerHTML=pasIntTot;
                       // alert(pasIntTot)
                    }
                    else if(arr[i][j]==5){
                        ijImg=aTd[j].innerHTML;
                        aTr[3].getElementsByTagName("td")[3].innerHTML=ijImg;
                        pasIntTot+=(parseInt(aIpt[3].value)*4);
                        document.getElementById("totalSpan").innerHTML=pasIntTot;
                        // alert(pasIntTot)
                    }
                    else if(arr[i][j]==6){
                        ijImg=aTd[j].innerHTML;
                        aTr[3].getElementsByTagName("td")[3].innerHTML=ijImg;
                        pasIntTot+=(parseInt(aIpt[1].value)*3);
                        document.getElementById("totalSpan").innerHTML=pasIntTot;
                        // alert(pasIntTot)
                    }
                    else if(arr[i][j]==7){
                        ijImg=aTd[j].innerHTML;
                        aTr[3].getElementsByTagName("td")[3].innerHTML=ijImg;
                        pasIntTot+=parseInt(aIpt[4].value);
                        document.getElementById("totalSpan").innerHTML=pasIntTot;
                        // alert(pasIntTot)
                    }
                    else if(arr[i][j]==8){
                        ijImg=aTd[j].innerHTML;
                        aTr[3].getElementsByTagName("td")[3].innerHTML=ijImg;
                        pasIntTot+=(parseInt(aIpt[0].value)*5);
                        document.getElementById("totalSpan").innerHTML=pasIntTot;
                        // alert(pasIntTot)
                    }

                }
            }
        }
    }

</script>
<div id="div1">
    <span class="title">水果</span>
    <span class="title">赌注</span>
    <span class="title">赔率</span>
    <span class="main">香蕉</span>
    <span class="main"><input type="text" value="0" /></span>
    <span class="main colorR">5倍</span>
    <span class="main">南瓜</span>
    <span class="main"><input type="text" value="0"/></span>
    <span class="main colorR">3倍</span>
    <span class="main">苹果+梨</span>
    <span class="main"><input type="text" value="0"/></span>
    <span class="main colorR">3倍</span>
    <span class="main">杏仁</span>
    <span class="main"><input type="text" value="0"/></span>
    <span class="main colorR">4倍</span>
    <span class="main">其他水果</span>
    <span class="main"><input type="text" value="0"/></span>
    <span class="main colorR">1倍</span>
    <p class="p1">您当前金额为：<span id="totalSpan">100000</span>$   
      <span id="chaqian"></span>
    </p>
    <p class="p2">注意事项：点击压注 ===> 开始摇杆 </p>
    <a href="javascript:yazhu();" class="yazhu">压注！</a>
</div>
<div style="clear: both"></div>
<a href="javascript:paomaFun();" class="go">摇杆</a>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,053评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,527评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,779评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,685评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,699评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,609评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,989评论 3赞 396
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,654评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,890评论 1赞 298
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,394评论 4赞 319
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,976评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2赞 342

推荐阅读更多精彩内容

  • 聊聊生儿生女那些事
    国家二胎政策一放开，身边大肚子如雨后春笋般冒出来。这些响应国家号召生二宝的父母，大多数的想法是想给大宝生个儿时的玩...
    正好闲聊阅读 436评论 0赞 1
  • 如何与我们的不良情绪做朋友
    如何与我们的不良情绪做朋友 每个人都有不良情绪的时刻，抑或烦躁、抑或不知道自己想要什么，什么都不想干，看书看不进去...
    欣语的成长日常阅读 516评论 0赞 2
  • 《解忧杂货铺》
    看了一半《解忧杂货铺》，感觉跟封面的引导语很不同，可能是注意的点不同吧。 每个故事都很长，讲述的都...
    悠米泐阅读 209评论 0赞 0
  • 我想要你陪着我
    夜晚，静谧，朦胧…… 一个人走在人流稀少的公园里，一阵风吹过，暖暖的，柔柔的，像极了你的抚摸，你的暖语，脑海...
    阿勇的故事阅读 765评论 0赞 0