この記事では、ゲームの非常に優れたソースコードであるJSミニゲームの剣フリップのソースコードについて説明します。参照のためにそれを共有してください。詳細は次のとおりです。
1。ゲームの紹介：
これは、合計10レベルのフロップペアリングゲームです。
1.ゲームは42枚のカードから9枚のカードをランダムに描画してプレイします。各グループは2枚のカードで、合計18枚のカードがあります。
2。連続して2つの同一のものに目を向けるのは勝利です。 9つのグループすべてが回転すると、合格します。 2つの連続した写真に頼らない場合は、再度回す必要があります。
3.ゲームには10レベルがあり、指定された時間内にチャレンジで成功します。
4.レベルが指定された時間内に通過しない場合、ゲームは現在のレベルから続きます。
5.ゲーム内のカードの写真と音楽は、Daewooが所有しています。
6. HTML5、Chrome、Firefoxをサポートするブラウザが必要です。
ゲームの写真：
完全なサンプルコードをダウンロードするには、ここをクリックしてください。
2。JavaScriptパーツ：
/**妖精の剣フリップゲーム*日付：2013-02-24*著者：fdipzone* ver 1.0*/windol.onload = function（）{var gameimg = ['images/start.png'、 'images/success.png'、 'images/fail.png'、 'images/clear.png'、 'image/cardbg.jpg']; for（var i = 1; i <= card.get_total（）; i ++）{gameimg.push（ 'images/card' + i + '.jpg'）; } var callback = function（）{card.init（）; } img_preload（gameimg、callback）;}/** card class*/var card =（function（total、cardnum）{var gametime = [0,65,55,50,45,40,35,30,25,20]; //プレイ時間あたりのプレイ時間ターム= 8; LevelData = [] /ゲームstart = create（）; turnall（）; i <=合計; i ++）{carddata.push（i）; } //（var i = 0; i <n; i ++）{var curcard = carddata.splice（math.random（）*carddata.length、1）.pop（）; leveldata.push（{'cardno'：curcard、 'turn'：0}、{'cardno'：curcard、 'turn'：0}）; } //ランダムな注文ゲームカードleveldata = shuffle（leveldata）を生成します。 } //カードshow = function（）{var cardhtml = ''; for（var i = 0; i <leveldata.length; i ++）{cardhtml+= '<div>'; cardhtml + = '<div id = "card' + i + '">'; cardhtml + = '<div> <img src = "images/card' + leveldata [i] ['cardno'] + '.jpg"> </div>'; cardhtml += '<div> <img src = "images/cardbg.jpg"> </div>'; cardhtml += '</div>'; cardhtml += '</div>'; } sethtml（ 'Gameplane'、cardhtml）; } // flip all turnall = function（）{for（var i = 0; i <leveldata.length; i ++）{turn_animate（i）; }} // flip animation turn_animate = function（key）{var obj = $ _tag（ 'div'、 'card' + key）; var cardfont、カードバック。 if（getClass（obj [0]）。indexof（ 'out'）！= -1）{cardfont = obj [0];カードバック= obj [1]; } else {cardfont = obj [1];カードバック= obj [0]; } setClass（CardBack、 'List Flip Out'）; var et = setimeout（function（）{setclass（cardfont、 'list Flip in'）;}、225）; } //クリックイベントset_event = function（）{var o = $ _tag（ 'div'、 'gameplane'）; for（var i = 0、count = o.length; i <count; i ++）{if（getclass（o [i]）== 'card viewport-flip'）{o [i] .onclick = function（）{turn（this.id）; }}}} // time start process = function（）{is_lock = 0; var curtime = Gametime [level]; sethtml（ 'livetime'、curtime）; var et = setInterval（function（）{if（matchnum == cardnum）{clearinterval（et）; return;} curtime-; sethtml（ 'livetime'、curtime）; if（curtime == 0）{clearInterval（et）; is_over = 1; message（ 'fail'、start）;}、1000）; } //ゲームメッセージアニメーションメッセージ= function（type、callback）{is_lock = 1; var message = $（ 'message'）; var processed = 0; var Opacity = 0; var soundtime = {'start'：1500、 'success'：4000、 'fail'：6000、 'clear'：4000}; disp（ 'message'、 'show'）; setClass（message、 'message_' + type）; setopacity（メッセージ、不透明度）; setposition（メッセージ、 'left'、0）; SetPosition（メッセージ、 'Top'、390）; if（type == 'start'）{bgsound（type、true）; } else {bgsound（type）; } var et = setInterval（function（）{var message_left = getposition（message、 'left'）; processed = processed + 25; if（processed> = 500 && processed <= 750）{ofacity = ofacity + 10; setposition（message、 'left'、message_left + 30）; setopacity（メッセージ、不透明）;処理<= Soundtime = Ofacity-10、メッセージ+35） }}、25）; } // flopターン= function（id）{if（is_lock == 1）{return; } var key = parseint（id.replace（ 'card'、 ''））; if（leveldata [key] ['turn'] == 0）{//開いていないif（first == -1）{// first turn_animate（key）; first = key; levelData [key] ['turn'] = 1; } else {// 2番目のturn_animate（key）; levelData [key] ['turn'] = 1; check_turn（key）; }}} // flopが成功しているかどうかを確認しますcheck_turn = function（key）{is_lock = 1; if（leveldata [first] ['cardno'] == leveldata [key] ['cardno']）{//成功したmatchnum ++; if（matchnum == cardnum）{var et = setimeout（function（）{message（ 'success'、levelup）;}、225）; } first = -1; IS_LOCK = 0; } else {//ペアリングが失敗し、開いたカードvar et = setimeout（）{turn_animate（first）; leveldata [first] ['turn'] = 0; turn_animate（key）; leveldata [key] ['turn'] = 0; first = -1; if（is_over == 0）{is_lock = 0;};}}}}}> 0）; }} // pass leveleup = function（）{if（level <gametime.length-1）{level ++; sethtml（ 'level'、level）;始める（）; } else {clear（）; }} //すべてCLEAR = function（）{level = 1;を渡します。 disp（ 'levelplane'、 'hide'）; disp（ 'process'、 'hide'）; sethtml（ 'Gameplane'、 ''）;メッセージ（ 'clear'、init）; } //音楽再生bgsound = function（file、loop）{var id = 'audioplayer'; if（typeof（file）！= 'undefined'）{if（typeof（loop）== 'undefined'）{loop = false; } var audiofile = []; audiofile ['mp3'] = 'music/' + file + '.mp3'; audiofile ['ogg'] = 'music/' + file + '.ogg'; audioplayer（id、audiofile、loop）; } else {audioplayer（id）; }} //ゲームプレイTips = function（type）{disp（ 'tips'、type）; } //カードの総数を取得get_total = function（）{return total; } // parameter reset = function（）{disp（ 'levelplane'、 'show'）; sethtml（ 'level'、level）; disp（ 'process'、 'show'）; sethtml（ 'livetime'、 ''）; sethtml（ 'Gameplane'、 ''）; is_lock = 1; is_over = 0; first = -1; matchnum = 0; } return this;}）（42,9）;この記事の説明には、JavaScriptゲームデザインの全員が学習するための特定の参照値があると思います。