社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > H5教程 > HTML5應用-歡樂老虎機的實作程式碼

HTML5應用-歡樂老虎機的實作程式碼

黄舟
發布： 2017-03-18 15:32:22
原創
8698 人瀏覽過

                         上一篇文章中，我介紹了HTML5應用程式的簡易播放器，這篇文章中介紹一個比較複雜的HTML5遊戲-老虎機。 寒假在家玩老虎機輸了些許錢，所以自己就萌生了寫個老虎機的遊戲。開始打算用Visual C++寫的，但是考慮到HTML5的<canvas>物件的簡單性，就打算用HTML5寫了。 同時也用ASP語言寫了個伺服器，如果遊戲可以推廣的話，自己可以當莊家，讓大家玩喔！ 但千萬不要聚眾賭博哦！

           言歸正傳，遊戲的介面如下：


##     其實遊戲本身應該是蠻簡單的，以下根據幾個模組解說一下:      一：使用者介面

#       遊戲中有圖片與繪製的長方形、圓形。在開始編寫之前應該準備好遊戲所需的圖片。我自己用PS簡單畫了幾個，然後用VC寫個小程式將圖片進行反色、放縮處理就得到了全部圖片:例如自己畫了幾個:

       

            

           

   其次關於介面押分、啟動、投幣、分數、點數等,首先需要標籤:

<canvas id="mycanvas" width="900" height="650" onclick="dealclick(con)" onmousemove="dealmove(con)" style="border:1px solid yellow;">
Your brower does not support canvas of HTML5!
</canvas>
登入後複製
<span style="font-size:18px;">  
</span>
登入後複製
*****创建显示线条框架的函数***************/
function showFrame(con, x, y, space)
 {
     con.beginPath();
     con.lineWidth = 1;
     con.moveTo(x, y-1); con.lineTo(x + space * 7, y-1);
     con.moveTo(x, y + space); con.lineTo(x + space * 7, y + space);
     con.moveTo(x, y + space * 6-1); con.lineTo(x + space * 7-1, y + space * 6);
     con.moveTo(x, y + space * 7); con.lineTo(x + space * 7, y + space * 7);
     con.moveTo(x, y); con.lineTo(x, y + space * 7);
     con.moveTo(x+space , y); con.lineTo(x + space, y + space * 7);
     con.moveTo(x + space * 6, y); con.lineTo(x + space * 6, y + space * 7);
     con.moveTo(x + space * 7, y); con.lineTo(x + space * 7, y + space * 7);
         con.closePath();
     con.stroke();
}
/********************************************/
/****创建显示某个特定图片的函数*************/
function showImage(i, flag,x,y,con) //1为西瓜，0为小西瓜，2为黑西瓜，3为黑小西瓜
 {
     var img = new Image();
    switch (i) 
  {
      case 1: if (flag == 1)
              img.src = "苹果.png";
          else
              if (flag == 0)
                  img.src = "小苹果.png";
              else
                  if (flag == 3)
                      img.src = "黑苹果.bmp";
                  else
                      img.src = "黑小苹果.bmp";
          break;
      case 2:
          if (flag == 1)
              img.src = "橙子.png";
          else
              if (flag == 0)
                  img.src = "小橙子.png";
              else
                  if (flag == 3)
                      img.src = "黑橙子.bmp";
                  else
                      img.src = "黑小橙子.bmp";
          break;
      case 3:
          if (flag == 1)
              img.src = "芒果.png";
          else
              if (flag == 0)
                  img.src = "小芒果.png";
              else
                  if (flag == 3)
                      img.src = "黑芒果.bmp";
                  else
                      img.src = "黑小芒果.bmp";
          break;
      case 4:
          if (flag == 1)
              img.src = "铃铛.png";
          else
              if (flag == 0)
                  img.src = "小铃铛.png";
              else
                  if (flag == 3)
                      img.src = "黑铃铛.bmp";
                  else
                      img.src = "黑小铃铛.bmp";
          break;
      case 5:
          if (flag == 1)
              img.src = "西瓜.png";
          else
              if (flag == 0)
                  img.src = "小西瓜.png";
              else
                  if (flag == 3)
                      img.src = "黑西瓜.bmp";
                  else
                      img.src = "黑小西瓜.bmp";
          break;
      case 6:
          if (flag == 1)
              img.src = "双星.png";
          else
              if (flag == 0)
                  img.src = "小双星.png";
              else
                  if (flag == 3)
                      img.src = "黑双星.bmp";
                  else
                      img.src = "黑小双星.bmp";
          break;
      case 7:
          if (flag == 1)
              img.src = "双七.png";
          else
              if (flag == 0)
                  img.src = "小双七.png";
              else
                  if (flag == 3)
                      img.src = "黑双七.bmp";
                  else
                      img.src = "黑小双七.bmp";
          break;
      case 8:
          if (flag == 1)
              img.src = "大王.png";
          else
              if (flag == 0)
                  img.src = "小王.png";
              else
                  if (flag == 3)
                      img.src = "黑大王.bmp";
                  else
                      img.src = "黑小王.bmp";
          break;
      case 9:
          if (flag == 1)
              img.src = "机会.png";
          else
              img.src = "黑机会.bmp";
      default: break;
  }
  img.onload = function () {
      con.drawImage(img, x, y);
  }
}
/********************************************************************/
/**************显示得分与积分***********************/
function showScore(con, win_score, score) {
    con.save();
    con.font = "40px impact";
    con.fillStyle = "red";
    con.fillText("得分", 160, 35);
    con.fillText("积分", 400, 35);
    con.fillStyle = "#3DD369";
    con.fillRect(160, 42, 74, 35);
    con.fillRect(400, 42, 74, 35);
    var str = win_score.toString();
    con.font = "30 宋体";
    con.fillStyle = "red";
    con.fillText(str, 160, 70);
    str = score.toString();
    con.fillText(str, 400, 70);
    con.restore();
}
/**************创建显示大小的函数**************/
function showBigSmall(con)  //大小
{
    con.save();
    con.beginPath();
    var g = con.createRadialGradient(230, 320, 0, 230, 320, 20); //创建渐变颜色
    g.addColorStop(0.2, "#C8EE2B"); //黄
    g.addColorStop(0.8, "#BCC1AC"); //
    con.fillStyle = g;
    con.arc(230, 320, 20, 0, Math.PI * 2, true);
    con.fill();
    con.closePath();
    con.restore();
    con.save();
    con.beginPath();
    var g1 = con.createRadialGradient(370, 320, 0, 370, 320, 20); //创建渐变颜色
    g1.addColorStop(0.2, "#C8EE2B"); //黄
    g1.addColorStop(0.8, "#BCC1AC"); //
    con.fillStyle = g1;
    con.arc(370, 320, 20, 0, Math.PI * 2, true);
    con.fillStyle = "";
    con.fill();
    con.closePath();
    con.fillStyle = "black"; con.font = "30px 楷体";
    con.fillText("大", 215, 330);
    con.fillText("小", 355, 330);
    con.restore();
}
/*******创建显示投币与退币的函数****************/
function showGiveQuit(con) //投与退
{
    con.save();
    con.beginPath();
    var g = con.createRadialGradient(200, 260, 0, 200, 260, 15); //创建渐变颜色
    g.addColorStop(0.2, "#C8EE2B"); //黄
    g.addColorStop(0.8, "#BCC1AC"); //
    con.fillStyle = g;
    con.arc(200, 260, 15, 0, Math.PI * 2, true);
    con.fill();
    con.closePath();
    con.restore();
    con.save();
    con.beginPath();
    var g1 = con.createRadialGradient(400, 260, 0, 400, 260, 15); //创建渐变颜色
    g1.addColorStop(0.2, "#C8EE2B"); //黄
    g1.addColorStop(0.8, "#BCC1AC"); //
    con.fillStyle = g1;
    con.arc(400, 260, 15, 0, Math.PI * 2, true);
    con.fill();
    con.closePath();
    con.restore();
    con.save();
    con.beginPath();
    g1 = con.createRadialGradient(300, 235, 0, 300, 235, 15); //创建渐变颜色
    g1.addColorStop(0.2, "#C8EE2B"); //黄
    g1.addColorStop(0.8, "#BCC1AC"); //
    con.fillStyle = g1;
    con.arc(300, 235, 15, 0, Math.PI * 2, true);
    con.fill();
    con.closePath();
    con.fillStyle = "black"; con.font = "30px 楷体";
    con.fillText("退币", 170, 235); con.fillText("投币", 370, 235);con.fillText("启动", 270, 210);
    con.restore();
}

/********创建显示界面的函数**************/
function showSurface(con, x, y, space)
 {
     // showFrame(con, x, y, space); //显示主框架
     con.save();
     showBeilv(con, y - 80, space);
     con.restore();
     con.save();
     showImage(2, 1, x, y, con); 
     showImage(4, 1, x + space, y, con); 
     showImage(8, 0, x + 2 * space, y, con); 
     showImage(8, 1, x + 3 * space, y, con);
     showImage(1, 1, x + 4 * space, y,con); 
     showImage(1, 0, x + 5 * space, y, con); 
     showImage(3, 1, x + 6 * space, y, con);
     showImage(4,0,x,y+space,con);showImage(1,1,x,y+2*space,con);
     showImage(6,0,x,y+4*space,con);
     showImage(6,1,x,y+5*space,con); 
     showImage(3,1,x,y+6*space,con);
     showImage(5, 1, x + 6 * space, y + space, con); 
     showImage(5, 0, x + 6 * space, y + 2 * space, con); 
     showImage(1, 1, x + 6 * space, y + 4 * space, con);
     showImage(2, 0, x + 6 * space, y + 5 * space, con); 
     showImage(2, 1, x + 6 * space, y + 6 * space, con);
     showImage(3, 0, x + space, y + 6 * space, con); 
     showImage(1, 1, x + 2 * space, y + 6 * space, con); 
     showImage(7, 1, x + 3 * space, y + 6 * space, con);
     showImage(7, 0, x + 4 * space, y + 6 * space, con); 
     showImage(4, 1, x + 5 * space, y + 6 * space, con);
     showImage(9, 1, x, y + 3 * space, con); 
     showImage(9, 1, x + 6 * space, y + 3 * space, con);
     con.restore();
     con.save();
     showFrame(con, x, y, space);
     con.restore();
     con.save();
     showLight(con, 0);
     con.restore();
     con.save();
     showGiveQuit(con);
     con.restore();
     init_param();
    // gain_score = 200; score = 20;
     con.save();
     showScore(con, gain_score, score);
     con.restore();
     con.save();
     showYafen(yafen, con, y, space);
     con.restore();
     con.save();
     showBigSmall(con);
     con.restore();
}
/*************************************************/
/***********创建显示说明和倍率的函数*******************/
function showBeilv(con,y,space)
 {
     con.save();
     var str;
     con.fillStyle = "black"; con.lineWidth = 3; con.font = "40px 汉仪丫丫体简";
     str = "*100"; showImage(8, 1, 620, y, con);con.fillText(str, 700, y + 50);
     str = "*40"; showImage(7, 1, 620, y + space, con);con.fillText(str, 700, y + 50 + space);
     str = "*30"; showImage(6, 1, 620, y + 2 * space, con); con.fillText(str, 700, y + 50 + 2*space);
     str = "*20"; showImage(5, 1, 620, y + 3 * space, con); con.fillText(str, 700, y + 50 + 3*space);
     str = "*20"; showImage(4, 1, 620, y + 4 * space, con); con.fillText(str, 700, y + 50 + 4*space);
     str = "*15"; showImage(3, 1, 620, y + 5 * space, con); con.fillText(str, 700, y + 50 + 5*space);
     str = "*10"; showImage(2, 1, 620, y + 6 * space, con); con.fillText(str, 700, y + 50 + 6*space);
     str = "*5"; showImage(1, 1, 620, y + 7 * space, con); con.fillText(str, 700, y + 50 + 7*space);
     con.restore();

}
/*********************************************/
/******创建显示各个压分大小的函数**************/
function showYafen(yafen,con,y,space) 
{
    con.save();
    con.fillStyle = "#3DD369";
    for (var i = 0; i < 8; i++)
        con.fillRect(780, y + i * space - 60, 60, 40);
    con.fillStyle = "red"; con.font = "40px 楷体";
    for (var j = 0; j < 8; j++) {
        var str = yafen[7-j].toString();
        con.fillText(str, 780, y + j * space - 28);
    }
    //其次创建8个按钮
    con.restore();
    con.save();
    for (var m = 0; m < 8; m++) 
    {
        con.beginPath();
        var g = con.createRadialGradient(860, y+m*space-40, 0, 860, y+m*space-40, 15); //创建渐变颜色
        g.addColorStop(0.2, "#C8EE2B"); //黄
        g.addColorStop(0.8, "#BCC1AC"); //
        con.fillStyle = g;
        con.arc(860, y + m * space - 40, 15, 0, Math.PI * 2, true); con.fill(); con.closePath();
    }
    con.restore();

}
/***********************************************/
/***************显示指示灯的亮灭*************/
function showLight(con, flag) //等
{
   con.save();
   if (flag == 0) //等灭
   {
       var g = con.createRadialGradient(300, 50, 0, 300, 50, 25); //创建渐变颜色
       g.addColorStop(0.2, "black"); //黄
       g.addColorStop(0.8, "white"); //
       con.fillStyle = g;
       con.arc(300, 50, 25, 0, Math.PI * 2, true); con.fill();
   }
   else //等亮
   {
       var g1 = con.createRadialGradient(300, 50, 0, 300, 50, 25); //创建渐变颜色
       g1.addColorStop(0.2, "red"); //黄
       g1.addColorStop(0.8, "white"); //
       con.fillStyle = g1;
       con.arc(300, 50, 25, 0, Math.PI * 2, true); con.fill();
   }
   con.restore();
}
/*************************
登入後複製
 

 二：

事件處理

#####   ## #### 在標籤中加入了onclick="dealclick(con)"程式碼，這是整個事件處理。 ###############    其實事件處理包含幾個步驟: 根據座標找出對應的事件（因為遊戲中有押分、啟動、投幣等多個事件），然後再處理對應的事件。 ############       dealclick(con)函數如下:######
function dealclick(con) 
    {
        var posx = event.clientX;
        var posy = event.clientY;
        var flag = getPos(posx, posy); //获得对应的事件序号
        //alert(posx.toString()+" "+posy.toString()+"    "+flag.toString());
        if (flag == 0)   //表示不是兴趣区域
            return;
        if (flag >= 1 && flag <= 8) //对应的事件是压分
        {
            deal_yafen_event(flag,con);
            return;
        }
        if (flag >= 9) //对应事件
        {
            switch (flag) //
            {
                case 9: deal_quit_event(con); break; //退币事件
                case 10: deal_give_event(con); break;  //投币事件
                case 11: begin_event(con); break; //启动事件
                case 12: choseBig(); break;    //选大
                case 13: choseSmall(); break; ;     //选小
                case 14: LRevent(1); break;
                case 15: LRevent(0); break;
            }
        }

    }
登入後複製
######     ###### 其中getPos事件是找出對應事件代號的## ####
/****根据坐标寻找对应位置的函数************/
function getPos(posx, posy) 
{
    if (posx < 200 || posx > 1100 || posy < 20 || posy > 670)
        return 0;  //返回零，不在canvas范围中
    if (posx >= 1035 && posx <= 1075)   //表示在yafen的横坐标范围中
    {
        for (var i = 1; i <= 8; i++)  //1-8也分别是序号
        {
            if (posy > Y + (i - 1) * 80 - 35 && posy < Y + (i - 1) * 80 - 5)
                return 9 - i;    //注意1-8分别对应苹果-大王的位置
        }
        return 0;
    }
    if (posx >= 385 && posx <= 615)  //在事件启动范围中
    {
        if (posx >= 385 && posx <= 415 && posy >= 265 && posy <= 295)
            return 9; //退币对应事件9
        if (posx >= 585 && posx <= 615 && posy >= 265 && posy <= 295)
            return 10; //投币对应事件10
        if (posx >= 485 && posx <= 515 && posy >= 240 && posy <= 270)
            return 11; //启动对应事件11
        if (posx >= 410 && posx <= 250+200 && posy >= 320 && posy <= 360)
            return 12; //选大
        if (posx >= 550 && posx <= 590 && posy >= 320 && posy <= 360)
            return 13; //选小
        if (posx >= 235+200 && posx <= 270+200 && posy >= 410 && posy <= 430)
            return 14; //左移
        if (posx >= 340 + 200 && posx <= 375 + 200 && posy >= 410 && posy <= 430)
            return 15; //右移
             
    }
    return 0;

}
登入後複製
######     ######### 關於對應的押分，選大、選小事件其實都是比較簡單的， 可以簡單說一下選大選小中關於控制機率的演算法， 例如控制莊家贏的機率是70%；可以利用var num=Math.random(); if(num<0.7)就算莊家贏,return true. 這都是比較簡單的。 ###############      最複雜的其實就是啟動事件。 玩過老虎機的朋友都知道，燈的閃爍、閃爍有快慢。 js中只有###set###Interval() 函數處理定時問題，所以寫字時比較複雜#######
/********************处理起动事件***************/
    function begin_event(con) //启动事件
    {
        if (isOK == false)
            return; //表示上一次的启动还没有完成
        var g=0;
        for (var e = 0; e < 8; e++)
            g += yafen[e];
        if (g == 0)
            return;  //表示没有压分
        if (gain_score != 0) //如果右边有钱先将钱转到右边
        {
            score += gain_score;
            gain_score = 0;
            showScore(con, gain_score, score);
            return;
        }
        if (repeatYafen == true) //表示重复上次的压分不变
        {
            showYafen(yafen, con, Y, 80); //显示压分
            var totalyafen=0;
            for (var a = 0; a < 8; a++)
                totalyafen += yafen[a];
            if (totalyafen > score) //表示余额不足
                return;
            else
                score -= totalyafen; //扣分；
            showScore(con, gain_score, score);
        } 
        for (n = 0; n < 6; n++)
            time[n] = 0;
        n = count = 0;
         var id = getTheOne(0);  //获取本次中奖的号码
        // var id = 17; //用于实验
         var id2, id3;
         isOK = false;//表示进入闪烁模式
        if (id >= 0 && id <= 15)//没有中机会
        {
            id2 = getOnlyOne(id);  //得到在屏幕中的序号
            aim_pos1 = id2;
            light_flash(id,id2, 0, con);  //灯闪烁
        }
        if (id == 16)  //中了左机会
        {
            id2 = getTheOne(1); //再次获得序号
            id3 = getOnlyOne(id2); //得到在屏幕中的序号
            aim_pos1 = id3; //记录新的启示序号
            light_flash(id, 0, 1, con);
           // alert(aim_pos1.toString());
        }
        if (id == 17)  //中了右机会
        {
            id2 = getTheOne(1);  //在次获得序号
            id3 = getOnlyOne(id2); //得到在屏幕中的位置
            aim_pos1 = id3;
            //alert(id3.toString());
            light_flash(id, 12, 2, con);
        }

    }
    /******************************************/
登入後複製

主要介绍一下利用setInterval（）介绍一下如何实现递增的延时，如老虎机灯快停时闪烁的越来越慢。可能我的方法不太好，大家可以参考一下

/*****************闪烁函数1*********************/
    function flash1() //闪烁
    {
       var k=0;
        if (n <count - 5) //这段时间内正常闪烁
        {
            if (n == 0)
                showImageId(aim_pos, con, 0);
            else {
                 k = (aim_pos - 1 + n) % 24;
                showImageId(k, con, 1);
                k = (k + 1) % 24;
                showImageId(k, con, 0);
            }
            showLight(con, n % 2); flashSound();
            flashSound();
            n++;
        }
        else  //延时闪烁
        {
            switch(time[0]) //位置
            {
                case 0: time[0]++; 
                k = (aim_pos - 1 + n) % 24; 
                showImageId(k, con, 1); 
                k = (k + 1) % 24; 
                showImageId(k, con, 0); 
                flashSound(); 
                showLight(con, n % 2); 
                n++; 
                break;
             case 1: time[1]++;
                     if(time[1]==2) //时间到
                     {
                         k = (aim_pos - 1 + n) % 24; 
                         showImageId(k, con, 1); 
                         k = (k + 1) % 24; 
                         showImageId(k, con, 0); 
                         showLight(con, n % 2); 
                         flashSound();
                        time[0]++; n++;
                     }break;
             case 2:time[2]++;
                    if(time[2]==3) //时间到
                    {
                        k = (aim_pos - 1 + n) % 24; 
                        showImageId(k, con, 1); 
                        k = (k + 1) % 24; 
                        showImageId(k, con, 0); 
                        showLight(con, n % 2); 
                        flashSound();
                        time[0]++; n++;
                    }break;
             case 3:time[3]++;
                    if(time[3]==4) //时间到
                    {
                        k = (aim_pos - 1 + n) % 24; 
                        showImageId(k, con, 1); 
                        k = (k + 1) % 24; 
                        showImageId(k, con, 0); 
                        showLight(con, n % 2); 
                        flashSound();
                        time[0]++; n++;
                    }break;
             case 4:
                    time[4]++;
                    if(time[4]==5) //时间到
                    {
                        k = (aim_pos - 1 + n) % 24; 
                        showImageId(k, con, 1); 
                        k = (k + 1) % 24; 
                        showImageId(k, con, 0); 
                        showLight(con, n % 2); 
                        flashSound();
                        time[0]++; n++;
                    } break;
                case 5: time[5]++;
                    if (time[5] == 6) //时间到
                    {
                        k = (aim_pos - 1 + n) % 24; 
                        showImageId(k, con, 1); 
                        k = (k + 1) % 24; 
                        showImageId(k, con, 0); 
                        showLight(con, n % 2); 
                        flashSound();
                        clearInterval(jsq); 
                        showLight(con, 1); 
                        flashSound();
                        aim_pos = aim_pos1; 
                        //更新起始位置
                        countGainScore(0, con, aim_pos1); 
                        repeatYafen = true; 
                        //设置默认是重复压分模式
                        isOK = true;
                    }
            }
        }
    }
登入後複製


三:背景音乐

游戏中需要游戏背景音乐。 这需要用到html5中的

在游戏界面中先载入：

 <audio src="sound\HP.wav" id="win"></audio><br />   
<audio src="sound\pig.wav" id="lose"></audio><br />
<audio src="sound\CLICK.WAV" id="flash"></audio>
登入後複製

然后利用js来控制， 例如介绍一下选大选小时赢时候的背景音乐

 var win = document.getElementById("win");
function winSound() //
    {
        win.currentTime = 0; //置于当前
        win.play();
    }
登入後複製

  然后在自己需要控制的地方加入播放函数即可。

  四：游戏bug

    由于HTML5还不够成熟，因此浏览器对其支持能力不够好。例如背景音乐，长期使用定时器播放后浏览器会失去对

以上是HTML5應用-歡樂老虎機的實作程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
HTML5，应用，欢乐老虎机
來源：php.cn
上一篇：HTML5應用-實作簡單播放器的範例程式碼分享 下一篇：HTML5應用程式-生日快樂動畫的實現
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
function_exists()無法判定自訂函數 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
來自於 2024-04-29 11:01:01
0
3
2252
google 瀏覽器 手機版顯示的怎麼實現 老師您好，google 瀏覽器怎麼變成手機版樣式的？
來自於 2024-04-23 00:22:19
0
11
2389
子窗口操作父窗口，輸出沒反應 前兩句可執行，最後一句沒辦法應
來自於 2024-04-19 15:37:47
0
1
2002
父視窗沒有輸出 document.onclick = function(){ window.opener.document.write('我是子視窗的輸出');                  ...
來自於 2024-04-18 23:52:34
0
1
1889
關於CSS心智圖的課件在哪？ 課件
來自於 2024-04-16 10:10:18
0
0
1956
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板