자바스크립트를 사용하여 숫자 맞추기 게임을 구현하는 방법

아래 편집자는 JavaScript로 디지털 매칭 게임을 구현하는 방법에 대한 예를 공유할 것입니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다. 편집기를 따라 살펴보겠습니다

게임 효과는 아래 그림과 같습니다.

규칙:

4X5 그리드에는 10개의 임의의 숫자가 있습니다. 서로 같지 않은 경우 각 데이터의 복사본이 2개(즉, 20개의 숫자, 10개의 동일한 쌍) 20개의 그리드에 무작위로 배포됩니다. 게임이 시작되고 일련의 20개의 숫자가 나타납니다. 그리드를 클릭할 때마다 현재 그리드의 데이터가 표시되며, 다음 클릭 시 표시된 데이터가 유지된 데이터와 다를 경우 이전 클릭 시 유지된 데이터는 사라집니다. 그리드에는 존재하지만 표시되지는 않습니다). 연속 클릭으로 표시되는 두 데이터가 동일한 경우 두 데이터가 모두 표시되며 다시 사라지지 않습니다.

동일한 데이터를 계속 클릭하여 모든 데이터가 표시될 때까지 게임이 종료되더라도 게임 시간이 보고됩니다. 이 시점에서 게임 시작 또는 새로 고침을 클릭하여 계속할 수 있습니다.

분석:

1: 20개의 그리드는 20개의 데이터에 해당합니다. 10개의 동일한 난수 세트 2개가 생성되어 배열 첨자가 표시 위치를 결정합니다.

2: 각 그리드의 세 가지 상태: 데이터 숨기기, 임시 데이터 보존 및 영구 표시. 데이터 숨겨진 그리드는 다음 클릭 시 일시적으로 유지됩니다. 일시적으로 데이터를 유지하는 그리드는 다음 번 클릭 시 데이터가 영구적으로 표시되거나 숨겨집니다. 두 번 연속으로 얻은 데이터가 동일한지 여부에 따라 판단됩니다. 영구 표시 후에는 상태를 더 이상 변경할 수 없으며 영구적으로만 표시할 수 있습니다. 이때는 클릭에 대해서는 유효하지 않습니다.

3: 시작 버튼을 클릭한 후 첫 번째 그리드를 클릭하면 타이밍이 시작됩니다. 게임이 완료되거나 새로 고침을 클릭하여 다시 시작할 때까지 타이머를 중지할 수 없습니다.

4: 게임이 시작되었는지 기록하려면 여기에 부울 값이 필요합니다. 이미 시작된 게임의 시작 버튼은 거부되어야 하며 게임이 완료될 때까지 타이머가 실행됩니다. 게임이 완료되면 부울 값을 변경하면 타이머 작동이 중지되고 게임 시간이 표시되며 시작 버튼을 사용할 수 있게 됩니다.

구현:

테이블은 스크립트를 통해 생성되며, 테이블의 요소는 기본적으로 먼저 "" 빈 문자열로 표시됩니다. 해당 클릭으로 표시됩니다. CSS 스타일은 직접 설정할 수 있습니다.

<table border:1>
  <script>
   var rowlength = 4;
   var collength = 5;
   var str = &#39;&#39;;
   for (var i = 0; i < rowlength; i++) {
    str += &#39;<tr>&#39;
    for (var j = 0; j < collength; j++) {
     //这里将每个td的id拼接为imgxx xx为元素索引
     var index = i * collength + j;
     var id = "img" + index;
     //注意这里字符串 每个&#39;&#39;是一个字符串进行输出
      str += &#39;<td id="&#39; + id + &#39;" onclick="showImg(&#39; + index + &#39;)">&#39;;
     str += &#39;</td>&#39;;
    }
    str += &#39;</tr>&#39;
   }
   document.write(str);
  </script>
 </table>

NEW_START는 게임을 시작할 수 있는지 여부를 기록하는 변수입니다.

times는 경과 시간을 기록합니다.

trans는 각 그리드의 뒤집기 상태를 기록합니다. 0: 숨김 - 1: 표시됨(뒤집힐 수 있음) -2: 표시됨(뒤집힐 수 없음) 즉, 배열의 각 요소에는 0, 1, 2의 세 가지 가능한 값만 있습니다.

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++) {
     $(&#39;img&#39; + i).innerHTML = &#39;&#39;;
     trans[i] = 0;
    }
    //将游戏用时置为0
    times = 0;
    $(&#39;gametime&#39;).innerHTML = times + &#39;秒&#39;;
    //获取随机的三十个数的随机序列数组 注意排序函数的使用
    numArr = getNum().sort(function () {
     return Math.random() - 0.5;
    });
    alert("已生成随机数，按表格顺序排列：" + numArr);
   }

타이밍 기능

첫 번째 그리드를 클릭하면 타이밍을 시작해야 합니다. NEW_START=false는 이미 시작되었음을 의미합니다. 게임이 진행 중일 때만 타이머가 시작되도록 해야 합니다. 1초에 한 번씩 자신을 호출하고 innerHTML을 통해 실시간으로 경과 시간을 표시합니다.

用时：<span id="gametime">0秒</span>
 function countTime() {
    if (NEW_START == false) {
     setTimeout(&#39;countTime()&#39;, 1000);
     $(&#39;gametime&#39;).innerHTML = times + "秒";
     times++;
    }
   }

각 그리드의 클릭 기능(매우 중요)

그리드가 시작되기 전에 클릭하는 것을 거부하세요(효과 없음). 게임에 들어가서 첫 번째 그리드를 클릭하면 게임이 시작되고 상태가 변경됩니다. NEW_START=false는 새 게임이 시작되었으며 생성될 수 없음을 의미합니다. 타이머가 시작됩니다.

다음 클릭 이벤트는 클릭된 그리드를 결정하여 다양한 로직을 처리해야 합니다.

영구적으로 표시된 요소를 클릭하면 반환이 처리되지 않습니다.

방금 표시되었지만 영구적으로 표시되지 않은 요소를 클릭하면 반환이 처리되지 않습니다.

(동일한 요소가 동일한지 확인하려면 인덱스 인덱스를 상태 값을 통해 trans에서 직접 구한 후 비교하세요.)

표시되지 않은 요소를 클릭하여 값을 구한 후 이전과 비교하세요. 표시된 요소:

동일한 경우 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();
   }

상태 값에 따라 새로고침UI

표시되는 함수를 설정하세요.

根据trans中每个元素的值，改变对应索引的格子的值。注意，如果格子的数据永久显示，需要记录已经永久显示的格子的数量，当等于所有格子数量时，表示已经全部显示。需要判定游戏结束，显示出游戏用时。

function refreshUI() {
    //此处用fore循环会最后存在一个undefined
    //count记录已经被彻底显示的个数
    var count = 0;
    for (var i = 0; i < trans.length; i++) {
     if (trans[i] == 0) {
      $(&#39;img&#39; + i).innerHTML = &#39;&#39;;
     }
     if (trans[i] == 1) {
      $(&#39;img&#39; + i).innerHTML = numArr[i];
     }
     if (trans[i] == 2) {
      $(&#39;img&#39; + i).innerHTML = numArr[i]
      count++;
     }
    }
    if (count == collength * rowlength) {
     NEW_START = true;
     var endTime = times;
     $(&#39;end&#39;).innerHTML = &#39;用时&#39; + endTime + &#39;秒！！游戏结束，点击开始游戏继续&#39;;
     $(&#39;gametime&#39;).innerHTML = endTime + "秒";
    }
   }

通过数组和表格的配合，实现자바스크립트를 사용하여 숫자 맞추기 게임을 구현하는 방법，加深对表格创建和数组的运用。处理逻辑和数据显示分离，根据状态值做到不同显示的状态。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在vue中如何实现跳转到之前页面

在Nginx中如何配置多站点vhost

在express+mockjs中如何实现后台数据发送

使用mock.js生成随机数据

使用Node.js如何实现资讯爬虫（详细教程）

위 내용은 자바스크립트를 사용하여 숫자 맞추기 게임을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!