この記事の例では、JS ミニゲーム フェアリー ソード フロップのソース コードを説明しています。これは非常に優れたゲーム ソース コードです。皆さんの参考に共有してください。詳細は以下の通りです。
1. ゲームの紹介:
これは合計 10 レベルのカード マッチング ゲームです。
1. ゲームは 42 枚のカードからランダムに 9 枚を選択し、各グループに 2 枚の同じカードがあり、合計 18 枚のカードがプレイされます。
2. 同じものを 2 つ続けて裏返すと、9 つのグループすべてが裏返されるとレベルクリアです。同じものが 2 つ連続して見つからない場合は、もう一度裏返す必要があります。
3. ゲームには 10 のレベルがあり、指定された時間内にレベルを通過すると、チャレンジが成功したことになります。
4. 指定された時間内にレベルをクリアできなかった場合、ゲームは現在のレベルから続行されます。
5. ゲーム内のカード画像および音楽は大宇株式会社が所有します。
6. HTML5 をサポートするブラウザが最適に動作します。
ゲームの写真:
完全なサンプルコードについては、ここをクリックしてくださいこのサイトからダウンロードしてください。
2. Javascript 部分:
/** 仙剑翻牌游戏 * Date: 2013-02-24 * Author: fdipzone * Ver 1.0 */ window.onload = function(){ var gameimg = [ 'images/start.png', 'images/success.png', 'images/fail.png', 'images/clear.png', 'images/cardbg.jpg', 'images/sword.png' ]; 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,60,55,50,45,40,35,30,25,20]; // 每关的游戏时间 var turntime = 8; // 观看牌时间 var level = 1; // 当前关卡 var carddata = []; // 记录牌的数据 var leveldata = []; // 当前关卡牌数据 var is_lock = 0; // 是否锁定 var is_over = 0; // 游戏结束 var first = -1; // 第一次翻开的卡 var matchnum = 0; // 配对成功次数 // 初始化 init = function(){ tips('show'); $('startgame').onclick = function(){ tips('hide'); start(); } } // 开始游戏 start = function(){ reset(); create(cardnum); show(); var curtime = turntime; setHtml('livetime', curtime); var et = setInterval(function(){ if(curtime==0){ clearInterval(et); turnall(); set_event(); message('start', process); return ; } if(curtime==turntime){ turnall(); } curtime--; setHtml('livetime', curtime); }, 1000) } // 随机抽取N张牌 create = function(n){ carddata = []; leveldata = []; // 创建所有牌 for(var i=1; i<=total; i++){ carddata.push(i); } // 抽取牌 for(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 class="cardplane">'; cardhtml += '<div class="card viewport-flip" id="card' + i + '">'; cardhtml += '<div class="list flip out"><img src="/static/imghwm/default1.png" data-src="images/cardbg.jpg" class="lazy" + leveldata[i]['cardno'] + '.jpg" alt="JSミニゲーム フェアリーソードフロップ ソースコード詳細解説_JavaScriptスキル" ></div>'; cardhtml += '<div class="list flip"><img src="/static/imghwm/default1.png" data-src="images/cardbg.jpg" class="lazy" alt="JSミニゲーム フェアリーソードフロップ ソースコード詳細解説_JavaScriptスキル" ></div>'; cardhtml += '</div>'; cardhtml += '</div>'; } setHtml('gameplane', cardhtml); } // 全部翻转 turnall = function(){ for(var i=0; i<leveldata.length; i++){ turn_animate(i); } } // 翻转动画 turn_animate = function(key){ var obj = $_tag('div', 'card' + key); var cardfont, cardback; if(getClass(obj[0]).indexOf('out')!=-1){ cardfont = obj[0]; cardback = obj[1]; }else{ cardfont = obj[1]; cardback = obj[0]; } setClass(cardback, 'list flip out'); var et = setTimeout(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); } } } } // 计时开始 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); } // 游戏讯息动画 message = 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(message, opacity); setPosition(message, 'left', 0); setPosition(message, '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){ opacity = opacity+10; setPosition(message, 'left', message_left + 30); setOpacity(message, opacity); }else if(processed>=soundtime[type] && processed<=soundtime[type]+250){ opacity = opacity-10; setPosition(message, 'left', message_left + 35); setOpacity(message, opacity); }else if(processed>soundtime[type]+250){ disp('message','hide'); clearInterval(et); if(typeof(callback)!='undefined'){ callback(); } } },25); } // 翻牌 turn = function(id){ if(is_lock==1){ return ; } var key = parseInt(id.replace('card','')); if(leveldata[key]['turn']==0){ // 未翻开 if(first==-1){ // 第一次翻 turn_animate(key); first = key; leveldata[key]['turn'] = 1; }else{ // 第二次翻 turn_animate(key); leveldata[key]['turn'] = 1; check_turn(key); } } } // 检查是否翻牌成功 check_turn = function(key){ is_lock = 1; if(leveldata[first]['cardno']==leveldata[key]['cardno']){ // 配对成功 matchnum ++; if(matchnum==cardnum){ var et = setTimeout(function(){ message('success', levelup); }, 225); } first = -1; is_lock = 0; }else{ // 配对失败,将翻开的牌翻转 var et = setTimeout(function(){ turn_animate(first); leveldata[first]['turn'] = 0; turn_animate(key); leveldata[key]['turn'] = 0; first = -1; if(is_over==0){ is_lock = 0; } }, 300); } } // 过关 levelup = function(){ if(level<gametime.length-1){ level ++; setHtml('level', level); start(); }else{ clear(); } } // 全部通关 clear = function(){ level = 1; disp('levelplane','hide'); disp('process', 'hide'); setHtml('gameplane',''); message('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; } // 重置参数 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 ゲーム デザインを学ぶすべての人にとって一定の参考価値があると信じています。

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1)ページを更新せずにコンテンツを変更できます。2)Domapiを介してWebページを操作する、3)アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4)ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1)CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2)ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1)Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2)ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3)電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4)node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1)cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2)Cは、Bytecodeの生成と実行を担当します。 3)Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1)DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2)node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1)DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2)ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3)サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1)エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2)実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3)ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境

Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)
