ハッピースロットマシンのHTML5アプリケーション実装コード

上記のブログ投稿では、

Html5 の単純なプレーヤーを紹介しましたが、このブログ投稿では、より複雑な HTML5 ゲーム スロット マシンを紹介します。 冬休み中に家でスロットマシンをプレイしてお金を失ってしまったので、スロットマシンのゲームを書くことを思いつきました。当初はVisual C++で書く予定でしたが、HTML5のcanvas>objectのシンプルさを考慮してHTML5で書くことにしました。 同時に、ASP 言語でサーバーも作成しました。ゲームを宣伝できれば、私がバンカーになってみんなにプレイしてもらうことができます。 ただし、グループで集まってギャンブルをしないでください。游戏 游戏

、ゲームのインターフェースは次のとおりです:

実際、ゲーム自体は非常にシンプルなはずです以下の説明は、いくつかのモジュールに従って説明されています:

: ユーザーインターフェース

ゲームには、 によって描画された

絵 があります。書き始める前に、ゲームに必要な画像を準備する必要があります。私は単にPSでいくつかを描いた後、VCを使用して小さなプログラムを書き、写真を反転してスケーリングしてすべての写真を取得しました。たとえば、私は自分でいくつか描きました。 ️ポイントのベット、スタート、コイン、得点、ポイントなど、最初に タグが必要です: rrreええええええ

2: イベント処理

イベント処理全体である onclick="dealclick(con)" コードを タグに追加しました。

実際、イベント処理にはいくつかのステップが含まれます: 座標に従って対応するイベントを見つけて (ゲームにはポイントの賭け、開始、コインの生成などの複数のイベントがあるため)、対応するイベントを処理します。

Dealclick(con) 関数は次のとおりです:

<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>

getPos イベントは、対応するイベント コードを見つけることです

<span style="font-size:18px;">  
</span>

対応するベットに関しては、big または 実際には、小さなイベントは比較的単純です。たとえば、銀行家の勝利確率を var num=Math.random() で制御するアルゴリズムについて簡単に説明します。 ; if(num

最も複雑なのは、実はスタートアップ イベントです。 スロットマシンをプレイしたことのある友人は、ライトがさまざまな速度で点滅することを知っています。 js の

setInterval() 関数のみがタイミングの問題を処理するため、記述はより複雑になります

/********************处理起动事件***************/
    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 中国語 Web サイトの他の関連記事を参照してください。