ホームページ >ウェブフロントエンド >H5 チュートリアル >ハッピースロットマシンのHTML5アプリケーション実装コード
ハッピースロットマシンのHTML5アプリケーション実装コード
- 黄舟オリジナル
- 2017-03-18 15:32:228788ブラウズ
上記のブログ投稿では、
Html5 の単純なプレーヤーを紹介しましたが、このブログ投稿では、より複雑な HTML5 ゲーム スロット マシンを紹介します。 冬休み中に家でスロットマシンをプレイしてお金を失ってしまったので、スロットマシンのゲームを書くことを思いつきました。当初はVisual C++で書く予定でしたが、HTML5のfd8b5c2a0a135958b16248c08bfb67c8objectのシンプルさを考慮してHTML5で書くことにしました。 同時に、ASP 言語でサーバーも作成しました。ゲームを宣伝できれば、私がバンカーになってみんなにプレイしてもらうことができます。 ただし、グループで集まってギャンブルをしないでください。游戏 游戏
、ゲームのインターフェースは次のとおりです:
実際、ゲーム自体は非常にシンプルなはずです以下の説明は、いくつかのモジュールに従って説明されています:
: ユーザーインターフェース 
絵 があります。書き始める前に、ゲームに必要な画像を準備する必要があります。私は単にPSでいくつかを描いた後、VCを使用して小さなプログラムを書き、写真を反転してスケーリングしてすべての写真を取得しました。たとえば、私は自分でいくつか描きました。 ️ポイントのベット、スタート、コイン、得点、ポイントなど、最初に 5ba626b379994d53f7acf72a64f9b697 タグが必要です: rrreええええええ
イベント処理全体である onclick="dealclick(con)" コードを 5ba626b379994d53f7acf72a64f9b697 タグに追加しました。
実際、イベント処理にはいくつかのステップが含まれます: 座標に従って対応するイベントを見つけて (ゲームにはポイントの賭け、開始、コインの生成などの複数のイベントがあるため)、対応するイベントを処理します。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() 関数のみがタイミングの問題を処理するため、記述はより複雑になります 主要介绍一下利用setInterval（）介绍一下如何实现递增的延时，如老虎机灯快停时闪烁的越来越慢。可能我的方法不太好，大家可以参考一下 游戏中需要游戏背景音乐。 这需要用到html5中的b97864c2e0ef2353a16c4d64c7734e92标签，然后通过js来控制声音的播放与暂停 在游戏界面中先载入： 然后利用js来控制， 例如介绍一下选大选小时赢时候的背景音乐 然后在自己需要控制的地方加入播放函数即可。 四：游戏bug 由于HTML5还不够成熟，因此浏览器对其支持能力不够好。例如背景音乐，长期使用定时器播放后浏览器会失去对b97864c2e0ef2353a16c4d64c7734e92的支持能力。 由于游戏是在浏览器中运行的，所以效率相比vc++的程序比较低。 如何脚本过于复杂会直接崩溃。/********************处理起动事件***************/
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);
}
}
/******************************************//*****************闪烁函数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;
}
}
}
}
三:背景音乐 <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>
var win = document.getElementById("win");
function winSound() //
{
win.currentTime = 0; //置于当前
win.play();
}
以上がハッピースロットマシンのHTML5アプリケーション実装コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。