搜索
首页web前端H5教程HTML5应用-欢乐老虎机的实现代码

HTML5应用-欢乐老虎机的实现代码

黄舟
黄舟
Mar 18, 2017 pm 03:32 PM

                         在上面一篇博文中，我介绍了HTML5应用的简易播放器，这篇博文中介绍一个比较复杂的HTML5游戏-老虎机。 寒假在家玩老虎机输了些许钱，所以自己就萌生了写个老虎机的游戏。开始打算用Visual C++编写的，但是考虑到HTML5的3856173a0eceb679792f65a38e1fcb00对象的简便性，就打算用HTML5编写了。 同时还用ASP语言编写了个服务器，如果游戏可以推广的话，自己可以做庄家，让大家玩哦！ 但千万不要聚众赌博哦！

           言归正传，游戏的界面如下：


     其实游戏本身应该是挺简单的，以下根据几个模块解说一下:

      一：用户界面

       游戏中有图片和5ba626b379994d53f7acf72a64f9b697绘制的矩形、圆形。在开始编写前应该准备好游戏所需要的图片。我自己用PS简单画了几个，然后用VC写个小程序将图片进行反色、放缩处理就得到了全部图片:例如自己画了几个:

                                 

               其次关于界面押分、启动、投币、得分、积分等,首先需要5ba626b379994d53f7acf72a64f9b697标签:

<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();
}
/*************************

   二：事件处理

    在5ba626b379994d53f7acf72a64f9b697标签中加入了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(num1e5bd252a854f1b743360c1291f76db0标签，然后通过js来控制声音的播放与暂停

     在游戏界面中先载入：

 <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还不够成熟，因此浏览器对其支持能力不够好。例如背景音乐，长期使用定时器播放后浏览器会失去对b97864c2e0ef2353a16c4d64c7734e92的支持能力。 由于游戏是在浏览器中运行的，所以效率相比vc++的程序比较低。 如何脚本过于复杂会直接崩溃。

以上是HTML5应用-欢乐老虎机的实现代码的详细内容。更多信息请关注PHP中文网其他相关文章！

声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
相关文章
H5代码的基础：密钥元素及其目的H5代码的基础：密钥元素及其目的Apr 23, 2025 am 12:09 AM

HTML5的关键元素包括、、、、、等，用于构建现代网页。1.定义头部内容，2.用于导航链接，3.表示独立文章内容，4.组织页面内容，5.展示侧边栏内容，6.定义页脚，这些元素增强了网页的结构和功能性。

HTML5和H5：了解常见用法HTML5和H5：了解常见用法Apr 22, 2025 am 12:01 AM

HTML5和H5没有区别，H5是HTML5的简称。1.HTML5是HTML的第五个版本，增强了网页的多媒体和交互功能。2.H5常用于指代基于HTML5的移动网页或应用，适用于各种移动设备。

HTML5：现代网络的基础（H5）HTML5：现代网络的基础（H5）Apr 21, 2025 am 12:05 AM

HTML5是超文本标记语言的最新版本，由W3C标准化。HTML5引入了新的语义化标签、多媒体支持和表单增强，提升了网页结构、用户体验和SEO效果。HTML5引入了新的语义化标签，如、、、等，使网页结构更清晰，SEO效果更好。HTML5支持多媒体元素和，无需第三方插件，提升了用户体验和加载速度。HTML5增强了表单功能，引入了新的输入类型如、等，提高了用户体验和表单验证效率。

H5代码：编写清洁有效的HTML5H5代码：编写清洁有效的HTML5Apr 20, 2025 am 12:06 AM

如何写出干净高效的HTML5代码？答案是通过语义化标签、结构化代码、性能优化和避免常见错误。1.使用语义化标签如、等，提升代码可读性和SEO效果。2.保持代码结构化和可读性，使用适当缩进和注释。3.优化性能，通过减少不必要的标签、使用CDN和压缩代码。4.避免常见错误，如标签未闭合，确保代码有效性。

H5：如何增强网络上的用户体验H5：如何增强网络上的用户体验Apr 19, 2025 am 12:08 AM

H5通过多媒体支持、离线存储和性能优化提升网页用户体验。1）多媒体支持：H5的和元素简化开发，提升用户体验。2）离线存储：WebStorage和IndexedDB允许离线使用，提升体验。3）性能优化：WebWorkers和元素优化性能，减少带宽消耗。

解构H5代码：标签，元素和属性解构H5代码：标签，元素和属性Apr 18, 2025 am 12:06 AM

HTML5代码由标签、元素和属性组成：1.标签定义内容类型，用尖括号包围，如。2.元素由开始标签、内容和结束标签组成，如内容。3.属性在开始标签中定义键值对，增强功能，如。这些是构建网页结构的基本单位。

了解H5代码：HTML5的基本原理了解H5代码：HTML5的基本原理Apr 17, 2025 am 12:08 AM

HTML5是构建现代网页的关键技术，提供了许多新元素和功能。1.HTML5引入了语义化元素如、、等，增强了网页结构和SEO。2.支持多媒体元素和，无需插件即可嵌入媒体。3.表单增强了新输入类型和验证属性，简化了验证过程。4.提供了离线和本地存储功能，提升了网页性能和用户体验。

H5代码：Web开发人员的最佳实践H5代码：Web开发人员的最佳实践Apr 16, 2025 am 12:14 AM

H5代码的最佳实践包括：1.使用正确的DOCTYPE声明和字符编码；2.采用语义化标签；3.减少HTTP请求；4.使用异步加载；5.优化图像。这些实践能提升网页的效率、可维护性和用户体验。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热门文章

刺客信条阴影：贝壳谜语解决方案
3 周前ByDDD
Windows 11 KB5054979中的新功能以及如何解决更新问题
2 周前ByDDD
在哪里可以找到原子中的起重机控制钥匙卡
3 周前ByDDD
<🎜>：死铁路 - 如何完成所有挑战
4 周前ByDDD
Atomfall指南：项目位置，任务指南和技巧
4 周前ByDDD
显示更多

热工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合，这些列表在安全评估过程中经常使用，都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表，帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上，他就可以访问到所需的每种类型的列表。

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里
7659
15
CakePHP 教程
1393
52
C# 教程
1205
24
steam的账户名称是什么格式
91
11
win11激活密钥永久
73
19
显示更多