以下のエディターは、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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
