以下のエディターは、JavaScript でデジタル マッチング ゲームを実装する方法の例を共有します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。エディターをフォローして見てみましょう
ゲームの効果は下の図に示すとおりです:
ルール:
4X5 グリッドには、次の 10 個の乱数があります。互いに等しくない場合、各データの 2 つのコピー (つまり、20 個の数値、10 個の等しいペア) が 20 個のグリッドにランダムに分散されます。ゲームが開始され、20 個の数字がポップアップ表示されます。グリッドをクリックするたびに、現在のグリッド内のデータが表示され、次のクリックまで一時的に保持されます。次のクリックで表示されたデータが保持されているデータと異なる場合、前回のクリックで保持されていたデータは消えます。グリッドには存在しますが、表示されません)。連続クリックで表示される 2 つのデータが同じ場合、両方のデータが表示され、再度消えることはありません。
同じデータをクリックし続けて全てのデータが表示されるまでは、ゲームオーバーになってもゲーム時間を報告します。この時点で、「ゲームの開始」または「更新」をクリックして続行できます。
分析:
1: 20 個のグリッドが 20 個のデータに対応します。10 個の等しい乱数のセットが 2 つ生成され、配列の添字によって表示位置が決定されます。
2: 各グリッドの 3 つの状態: データ非表示、一時的なデータ保持、永続的な表示。データ非表示グリッドは、次回クリックしても一時的に保持されます。データを一時的に保持したグリッドは、次回クリックすることで永続的に表示されるか、データが非表示になります。 2回連続して取得したデータが等しいかどうかで判定されます。永続表示後はステータスの変更ができなくなり、永続表示のみが可能となります。
3: スタートボタンをクリックした後、最初のグリッドをクリックすると計時が開始されます。ゲームが完了するか、[更新] をクリックして再起動するまで、タイマーを停止することはできません。
4: ここでは、ゲームが開始されたかどうかを記録するためにブール値が必要であることになります。すでに開始されているゲームのスタート ボタンは拒否され、ゲームが完了するまでタイマーが実行されます。ゲームが完了したら、ブール値を変更すると、タイマーの動作が停止し、ゲーム時間が表示され、スタート ボタンが使用可能になります。
実装:
テーブルはスクリプトを通じて作成され、テーブル内の要素はデフォルトで最初に "" 空の文字列として表示されます。該当のクリックにより表示されます。 CSS スタイルは自分で設定できます。
<table border:1> <script> var rowlength = 4; var collength = 5; var str = ''; for (var i = 0; i < rowlength; i++) { str += '<tr>' for (var j = 0; j < collength; j++) { //这里将每个td的id拼接为imgxx xx为元素索引 var index = i * collength + j; var id = "img" + index; //注意这里字符串 每个''是一个字符串进行输出 str += '<td id="' + id + '" onclick="showImg(' + index + ')">'; str += '</td>'; } str += '</tr>' } document.write(str); </script> </table>
NEW_START はゲームを開始できるかどうかを記録する変数です。
times は経過時間を記録します。
trans は、配列内の各グリッドの反転状態を 0: 非表示 - に記録します。 1:表示(反転可能) -2:表示(反転不可)。つまり、配列の各要素には 0、1、2 の 3 つの値しかありません)
numArr は 30 個の数値のランダムなシーケンス配列です
var NEW_START = true; var times = 0; var trans = []; var numArr = [];
ID で要素を取得するメソッド:
function $(id) { return document.getElementById(id); }
以下、関数を通じて20個の乱数を取得し、同じ数のグループを10個(参照: 指定範囲の乱数を生成する)
function getNum() { var index = 0; var arrLength = rowlength * collength / 2; var arr = new Array(); while (index < arrLength) { var flag = true; var num = parseInt(Math.random() * 100); for (var i in arr) { if (arr[i] == num || arr[i] < 1) { flag = false; } } if (flag == true) { arr[index] = num; index++; } } //alert(arr.length); //arr是十个互不相等的随机数 // newArr数组就是每个随机数都有两个的数组 var newArr = new Array(); for (var i = 0; i < arrLength; i++) { newArr[i] = arr[i]; newArr[arrLength + i] = arr[i]; } return newArr; }
テーブルを作成し、乱数の配列を生成する 以上が準備です。
具体的なロジックは次のとおりです:
ゲームを開始するにはクリック関数
<input type="button" id="startButton" value="开始游戏" onclick="init()">
ゲーム関連のパラメーターは、すでに開始されている場合は初期化する必要があることに注意してください。拒否される。並べ替え関数を使用して配列要素をシャッフルし、ランダム性を実現します。
function init() { //如果已经开始 拒绝点击 if (NEW_START == false) { return; } //结束时用于显示时间的h4标签 $('end').innerHTML = ''; var count = rowlength * collength; //将每个格子的数据隐藏 初始化每个格子的翻转状态 for (var i = 0; i < count; i++) { $('img' + i).innerHTML = ''; trans[i] = 0; } //将游戏用时置为0 times = 0; $('gametime').innerHTML = times + '秒'; //获取随机的三十个数的随机序列数组 注意排序函数的使用 numArr = getNum().sort(function () { return Math.random() - 0.5; }); alert("已生成随机数,按表格顺序排列:" + numArr); }
タイミング機能
最初のグリッドをクリックすると、タイミングを開始する必要があります。 NEW_START=false は、すでに開始されていることを意味します。ゲームの進行中にのみタイマーが開始されるようにする必要があります。 1 秒に 1 回自分自身を呼び出し、innerHTML を通じてリアルタイムで経過時間を表示します。
用时:<span id="gametime">0秒</span> function countTime() { if (NEW_START == false) { setTimeout('countTime()', 1000); $('gametime').innerHTML = times + "秒"; times++; } }
各グリッドのクリック機能 (超重要)
開始前にグリッドをクリックすることを拒否します (効果はありません)。ゲームに入り、最初のグリッドをクリックすると、ゲームが開始され、ステータスが変わります。 NEW_START=false は、新しいゲームが開始され、作成できないことを意味します。タイミングが始まります。
後続のクリック イベントでは、別のロジックを処理するためにクリックされたグリッドを決定する必要があります:
永続的に表示されている要素をクリックすると、リターンは処理されません。
表示されたばかりで永続的に表示されていない要素をクリックしても、リターンは処理されません。
(同じ要素が同じ要素であるかどうかを判断するために、インデックスインデックスが状態値を介してトランスで直接検出され、比較されることに注意してください)
表示されていない要素をクリックし、値を取得し、以前の要素と比較します表示される要素:
それらが等しい場合、すべてが変わります。trans の対応するインデックスのステータス値は 2 に変更されます。これは、
の永続的な表示が変化することを意味します。trans で新しくクリックされた要素の対応するインデックスのステータス値は、次のようになります。 1 (一時的に保持) に変更され、前にクリックされた要素のインデックス値は 0 (非表示にする必要があります) になります。
ステータス値を設定したら、すぐに表示を更新する必要があります(refreshUI関数)。表示更新時はステータス値を記録した配列transを基に動作します。
function showImg(index) { //未点击开始,还未初始化,退出 if (numArr[0] == undefined) { return; } //初次点击进入,开启计时 if (NEW_START) { NEW_START = false; countTime(); } //1-点击已经彻底显示的元素 退出 if (trans[index] == 2) { return; } //将点击的格子的元素显示出来,并改变翻转状态 //alert(index); //alert(numArr) var clickEle = $('img' + index); clickEle.innerHTML = numArr[index]; //已点击元素的index var transIndex; for (var i in trans) { if (trans[i] == 1) { transIndex = i; } } //2-如果点击的是刚刚已显示元素 if (transIndex == index) { trans[index] = 1; return; } //3-点击新元素 与先前显示元素对比 两种情况-相等 不等 else { if (numArr[transIndex] == numArr[index]) { trans[transIndex] = 2; trans[index] = 2; } else { trans[transIndex] = 0; trans[index] = 1; } } refreshUI(); }
ステータス値に応じて表示される関数refreshUI
を設定します根据trans中每个元素的值,改变对应索引的格子的值。注意,如果格子的数据永久显示,需要记录已经永久显示的格子的数量,当等于所有格子数量时,表示已经全部显示。需要判定游戏结束,显示出游戏用时。
function refreshUI() { //此处用fore循环会最后存在一个undefined //count记录已经被彻底显示的个数 var count = 0; for (var i = 0; i < trans.length; i++) { if (trans[i] == 0) { $('img' + i).innerHTML = ''; } if (trans[i] == 1) { $('img' + i).innerHTML = numArr[i]; } if (trans[i] == 2) { $('img' + i).innerHTML = numArr[i] count++; } } if (count == collength * rowlength) { NEW_START = true; var endTime = times; $('end').innerHTML = '用时' + endTime + '秒!!游戏结束,点击开始游戏继续'; $('gametime').innerHTML = endTime + "秒"; } }
通过数组和表格的配合,实现JavaScriptを使った数字当てゲームの実装方法,加深对表格创建和数组的运用。处理逻辑和数据显示分离,根据状态值做到不同显示的状态。
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
以上がJavaScriptを使った数字当てゲームの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。


ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

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

SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン

SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

WebStorm Mac版
便利なJavaScript開発ツール

SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!
