使用vue寫(xiě)掃雷游戲

e10101 發(fā)布于2019-08-02 11:58 / 656人閱讀

摘要：想用剛學(xué)的，寫(xiě)一個(gè)掃雷游戲。。第二步，制造一個(gè)數(shù)組，用來(lái)生成隨機(jī)雷區(qū)。是否是地雷是否是地雷安全區(qū)樣式雷區(qū)樣式大概是這樣子的數(shù)據(jù)第四步，點(diǎn)擊格子，觸發(fā)事件。判斷是否這個(gè)是雷區(qū)。如果安全就顯示綠色，否則顯示紅色。

上班閑來(lái)沒(méi)事做，，心血來(lái)潮。想用剛學(xué)的vue，寫(xiě)一個(gè)掃雷游戲。。好了，直入正題.

第一步，先制作一個(gè)10x10的格子圖。。這個(gè)divcss就不說(shuō)了。。大家都會(huì)。

第二步，制造一個(gè)數(shù)組，用來(lái)生成隨機(jī)雷區(qū)。

let arr = []
for (var i = 0; i < 10; i++) {
  arr.push(Math.floor(Math.random() * 100))
}

第三步，制造一個(gè)json數(shù)組，讓他循環(huán)生成頁(yè)面上的格子。

  let arrs = []
  for (var j = 0; j < 100; j++) {
    let obj = {}
    if (arr.indexOf(j) > -1) {
      obj.isLei = true // 是否是地雷
    } else {
      obj.isLei = false // 是否是地雷
    }
    obj.id = j
    obj.isTrue = false // 安全區(qū)樣式
    obj.isFalse = false // 雷區(qū)樣式
    arrs.push(obj)
  }

大概是這樣子的數(shù)據(jù)

第四步，點(diǎn)擊格子，觸發(fā)事件。判斷是否這個(gè)是雷區(qū)。如果安全就顯示綠色，否則顯示紅色。

toclick (e) {
  console.log(e.isTrue)
  if (e.isLei === true) {
    e.isFalse = true
  } else {
    e.isTrue = true
    this.surPlus = this.surPlus - 1
  }
}

以下是所有代碼：

最后樣子大概就是這樣：

云服務(wù)器 GPU云服務(wù)器掃雷游戲掃雷小游戲 java掃雷游戲開(kāi)發(fā) 掃雷游戲c語(yǔ)言源碼

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/53250.html

相關(guān)文章

使用vue寫(xiě)掃雷游戲

摘要：想用剛學(xué)的，寫(xiě)一個(gè)掃雷游戲。。第二步，制造一個(gè)數(shù)組，用來(lái)生成隨機(jī)雷區(qū)。是否是地雷是否是地雷安全區(qū)樣式雷區(qū)樣式大概是這樣子的數(shù)據(jù)第四步，點(diǎn)擊格子，觸發(fā)事件。判斷是否這個(gè)是雷區(qū)。如果安全就顯示綠色，否則顯示紅色。上班閑來(lái)沒(méi)事做，，心血來(lái)潮。想用剛學(xué)的vue，寫(xiě)一個(gè)掃雷游戲。。好了，直入正題. 第一步，先制作一個(gè)10x10的格子圖。。這個(gè)divcss就不說(shuō)了。。大家都會(huì)。 showImg...

JinB 2019-08-23 13:11 評(píng)論0 收藏0
C語(yǔ)言初階學(xué)習(xí)——掃雷小游戲（遞歸）

摘要：目錄前言前言前期的準(zhǔn)備前期的準(zhǔn)備游戲代碼的具體實(shí)現(xiàn)游戲代碼的具體實(shí)現(xiàn)完整版的掃雷小游戲代碼完整版的掃雷小游戲代碼總結(jié)總結(jié)前言?huà)呃资且豢畲蟊婎?lèi)的益智小游戲，于年發(fā)行。目錄前言前期的準(zhǔn)備游戲代碼的具體實(shí)現(xiàn) 1、text.c 2、game.h 3、game.c 完整版的掃雷小游戲代碼： 1...

zhonghanwen 2021-11-16 11:45 評(píng)論0 收藏0
掃雷小游戲（C語(yǔ)言實(shí)現(xiàn)）

摘要：寫(xiě)在前面我們已經(jīng)寫(xiě)過(guò)了三子棋小游戲肯定沒(méi)玩過(guò)癮，我們?cè)賹?xiě)個(gè)掃雷小游戲吧目錄寫(xiě)在前面認(rèn)識(shí)游戲游戲規(guī)則游戲框架游戲?qū)崿F(xiàn)效果展示全部代碼文件文件文件認(rèn)識(shí)游戲相信大家對(duì)掃雷都不陌生每臺(tái)電腦必備的小游戲游戲規(guī)則就是在規(guī)定的時(shí)間將 ...

Coding01 2021-09-04 16:41 評(píng)論0 收藏0
C/C++游戲項(xiàng)目詳細(xì)教學(xué)：《掃雷》

摘要：掃雷最原始的版本可以追溯到年一款名為方塊的游戲。兩年后，湯姆安德森在的基礎(chǔ)上又編寫(xiě)出了游戲地雷，由此奠定了現(xiàn)代掃雷游戲的雛形。年，微軟公司的羅伯特杜爾和卡特約翰遜兩位工程師在系統(tǒng)上加載了該游戲，掃雷游戲才正式在全世界推廣開(kāi)來(lái)。掃雷最原始的版本可以追溯到1973年一款名為方塊的游戲。不久，...

meteor199 2021-11-12 10:36 評(píng)論0 收藏0
c語(yǔ)言實(shí)現(xiàn)掃雷

摘要：上一篇講了三子棋，今天我們來(lái)講掃雷原理都是一樣的通常我們寫(xiě)代碼的時(shí)候，寫(xiě)之前都要整理分析好邏輯，要做到分段分塊來(lái)寫(xiě)，以便于代碼閱讀和后期維護(hù)這里我將代碼分為三個(gè)文件頭文件通常用來(lái)完成函數(shù)聲明頭文件的引用宏定義變量用于游戲功能函數(shù)的實(shí)現(xiàn)作為上一篇講了三子棋，今天我們來(lái)講掃雷原理都是一樣的； ...

LiangJ 2021-11-12 10:36 評(píng)論0 收藏0