首頁  >  文章  >  web前端  >  使用javascript如何實現數位配對遊戲

使用javascript如何實現數位配對遊戲

亚连
亚连原創
2018-06-20 17:25:432208瀏覽

下面小編就為大家分享一篇javascript實現數位配對遊戲的實例講解,具有很好的參考價值,希望對大家有幫助。一起跟著小編過來看看吧

遊戲效果如下圖:

使用javascript如何實現數位配對遊戲

規則:

在4X5的格子中,有隨機的互不相等的10個數,每個資料有兩份(也就是20個數,有兩兩相等的十對),隨機分佈在20個格子中。遊戲開始,彈出二十個數的序列。每次點擊格子會顯示目前格子中的資料並暫時保留顯示,直到下一次點擊,如果下一次點擊顯示的資料與保留的資料不同,則之前點擊保留的資料會消失(仍然存在於該格子但不顯示)。如果連續點擊顯示的兩個資料一樣,則兩個資料都會顯示並且不會再消失。

直到所有資料都透過連續點擊相同資料的方式顯示出來,就算遊戲結束,報出遊戲用時。此時可以點擊開始遊戲或刷新來繼續。

分析:

1:二十個格子對應二十個數據,產生兩組相等的十個隨機數並放入數組,數組下標決定顯示位置。

2:每個格子的狀態的三種:資料隱藏,暫時保留資料和永久顯示。資料隱藏的格子透過點擊的下一個狀態是暫時保留。暫時保留資料的格子透過點擊下一次狀態是永久顯示或資料隱藏,這裡要根據連續兩次取得的資料是否相等來判斷。永久顯示之後狀態已經不可變,只能永久顯示出來,此時對點擊是無效的。

3 :計時從點擊開始按鈕之後,點擊第一個格子時開始。直到遊戲完成或點擊刷新重開,期間計時器無法停止。 4 :得出,這裡需要一個布林值,記錄遊戲是否已經開始,已經開始的遊戲對開始按鈕應該拒絕,計時器運行直到遊戲完成。遊戲完成時,改變布林值,計時器停止工作,顯示遊戲用時,開始按鈕可用。

實作:

表格透過script創建,其中的元素先預設顯示為「」空字串。透過對應的點擊來顯示。 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三十個數的隨機序列陣列

var NEW_START = true;
  var times = 0;
  var trans = [];
  var numArr = [];

透過ID取得到元素的方法:

 function $(id) {
  return document.getElementById(id);
   }

下面透過函數取得到二十個隨機數,兩兩相等的十組(可參見:產生指定範圍隨機數)

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标签
    $(&#39;end&#39;).innerHTML = &#39;&#39;;
    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表示已經開始,需要確保只在遊戲進行中時才計時。每秒鐘呼叫自身一次,並透過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表示已經開始不可創造新遊戲。計時開始。

後面的點擊事件就需要判斷點擊的格子來處理不同的邏輯:

點擊已永久顯示的元素,不處理return。 點選剛顯示但不是永久顯示的元素,也不處理return。

###(注意這裡判斷是不是同一元素是直接透過狀態值在trans中將索引index找出後比較)######點選未顯示元素,取得值,與前一個顯示的元素比較:######相等,都會將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 = $(&#39;img&#39; + 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) {
      $(&#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 + "秒";
    }
   }

通过数组和表格的配合,实现使用javascript如何實現數位配對遊戲,加深对表格创建和数组的运用。处理逻辑和数据显示分离,根据状态值做到不同显示的状态。

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

相关文章:

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

在Nginx中如何配置多站点vhost

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

使用mock.js生成随机数据

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

以上是使用javascript如何實現數位配對遊戲的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn