微信小程序?qū)崿F(xiàn)掃雷游戲
更新時(shí)間：2022年09月08日 16:27:19 作者：楓渝浪天下
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)掃雷游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)掃雷游戲的具體代碼，供大家參考，具體內(nèi)容如下
實(shí)驗(yàn)小提醒，打開(kāi)微信小程序模板時(shí)，一定要看清楚，要選js模板，不要選ts模板，因?yàn)閠s中對(duì)數(shù)據(jù)類(lèi)型檢查更嚴(yán)格，同樣的代碼在ts中可能無(wú)法運(yùn)行！
實(shí)驗(yàn)內(nèi)容：
編寫(xiě)如下掃雷游戲，基本要求如下：
（1）方塊數(shù)為10行7列；
（2）有游戲計(jì)時(shí)（計(jì)時(shí)單位為秒）；
（3）有一個(gè)“開(kāi)始游戲”按鈕，按該按鈕能重新開(kāi)始一局游戲。
可依據(jù)個(gè)人能力自由發(fā)揮點(diǎn)：
（1）讓玩家可以自由設(shè)定方塊數(shù)；
（2）讓玩家可以自由設(shè)定地雷數(shù)；
實(shí)驗(yàn)效果：
程序優(yōu)勢(shì)：
1、必須點(diǎn)擊開(kāi)始游戲，才能點(diǎn)擊方塊，避免用戶(hù)誤碰影響玩的體驗(yàn)
2、游戲玩到中途，可以新開(kāi)一局，也可以在點(diǎn)擊新開(kāi)一局后，點(diǎn)擊取消，繼續(xù)玩
3、可以點(diǎn)擊設(shè)置，設(shè)置行數(shù)，列數(shù)或者地雷數(shù)任意一個(gè)參數(shù)，游戲怎么玩兒，由你定
代碼目錄：
這里面index目錄下面四個(gè)文件，放的是掃雷相關(guān)的代碼； 而setUp目錄中的四個(gè)文件放的是設(shè)置頁(yè)面相關(guān)的代碼！
實(shí)驗(yàn)代碼：
index目錄下的代碼文件
index.wxml
<!--index.wxml-->
<view class="time">
? <view class="using-time">當(dāng)前用時(shí)：{{timeformat}}</view>
? ?<view class="start-game" bindtap="start"> 開(kāi)始游戲 </view>
? ?
</view>
<view bindtap="setUp" class="set-up">設(shè)置</view>
<view class="main">
? <view wx:for="{{bts}}" wx:for-item="itemRow" class="yy">?
? ? <view wx:for="{{itemRow}}" wx:for-item="bt" class="xx" id="{{bt.id}}" style="background-color:{{bt.bgcolor}};color:{{bt.ftcolor}}" bindtap="click">
? ? ? ?{{bt.text}}
? ? </view>
? </view>
</view>index.js
Page({
? data: {
? ? bts: null, //9*6數(shù)組 ?54個(gè)方塊，根方塊有關(guān)的屬性全部存儲(chǔ)起來(lái)
? ? timer:null,
? ? hour:0,
? ? minute:0,
? ? second:0,
? ? timeformat:'00:00:00',
? ? clickButton:false,
? ? cancelButton:false
? },
? ?start:function(){
? ? var that=this
? ? clearInterval(that.data.timer);
? ? ?wx.showModal({
? ? ? ? title:'提示',
? ? ? ? content:'開(kāi)始游戲',
? ? ? ?showCancel:true,
? ? ? ?
? ? ? ? 如何讓用戶(hù)點(diǎn)擊取消按鈕后，還能繼續(xù)玩(已解決)
? ? ? ? success(res){
? ? ? ? ? // 剛開(kāi)局點(diǎn)擊取消后，什么也不做
? ? ? ? ? if(res.cancel ){
? ? ? ? ? ? if(!that.data.cancelButton){
?
? ? ? ? ? ? }else{
? ? ? ? ? ? ?that.data.timer = setInterval(that.counter,1000)
? ? ? ? ? ? }
?
? ? ? ? ? ? // 點(diǎn)擊確定后，初始化界面，并回調(diào)時(shí)間函數(shù)
? ? ? ? ? }else{
? ? ? ? ? ? that.data.cancelButton = true
? ? ? ? ? ? that.init()
? ? ? ? ? ? // clearInterval(this.data.timer)
? ? ? ? ? ? that.data.timer = setInterval(that.counter,1000)
? ? ? ? ? ? that.data.clickButton = true
? ? ? ? ? }
? ? ? ? }?
? ??
? ? ?})
? ? ? ?
? ??
? ?},
? ? second:'',
? ? minute:'',
? ? hour:'',
? ?counter:function(){
? ? ?var second = this.data.second
? ? ?var minute = this.data.minute
? ? ?var hour = this.data.hour
? ? ?this.setData({
? ? ? ?second:second+1
? ? ?})
? ? ?if(second == 60){
? ? ? ?this.setData({
? ? ? ? ?second:0,
? ? ? ? ?minute:minute+1
? ? ? ?})
? ? ?}
? ? ?if(minute == 60){
? ? ? ?this.setData({
? ? ? ? ?minute:0,
? ? ? ? ?hour:hour+1
? ? ? ?})
? ? ?}
? ? ?// 下面三個(gè)全局變量用于保證時(shí)間格式
? ? ?this.second = second
? ? ?this.minute = minute
? ? ?this.hour = hour
? ? ?if(second < 10){
? ? ? ?this.second="0"+second
? ? ?}
? ? ?if(minute < 10){
? ? ? ?this.minute = "0"+minute
? ? ?}
? ? ?if(hour < 10){
? ? ? ?this.hour="0"+hour
? ? ?}
?
? ??
? ? ?this.setData({
? ??
? ? ? ?timeformat:this.hour+":"+this.minute+":"+this.second
? ? ?})
? ?},
? ?// 跳轉(zhuǎn)到設(shè)置頁(yè)面的函數(shù)
? ? setUp:function () {
? ? ? wx.navigateTo({
? ? ? ? url: '../index/setUp/setUpPage',
? ? ? })
? ? ? // 設(shè)置完以后應(yīng)該重新開(kāi)始游戲
? ? ? this.defaultRow = 10
? ? ? this.defaultColumn = 7
? ? ? this.defaultDilei = 10
? ? ? this.init()
? ? },
? ? // 設(shè)置默認(rèn)數(shù)據(jù)，用戶(hù)不設(shè)置也能玩
? ?defaultRow:10,
? ?defaultColumn:7,
? ?defaultDilei:10,
? //初始化函數(shù)
? init: function () {
? ? //初始化時(shí)間
? ? this.counter()
?
? ? ?// 下面代碼用于獲取全局變量數(shù)據(jù)(只能函數(shù)中用)
? ? var app = getApp()
? ? var setRow = app.globalData.row
? ? var setColumn = app.globalData.column
? ? var setDilei = app.globalData.dilei
?
? ? this.setData({
? ? ? hour:0,
? ? ? minute:0,
? ? ? second:0,
? ? ? timeformat:"00"+":"+"00"+":"+"00"
? ? })
?
? ? // 檢查用戶(hù)修改了哪方面數(shù)據(jù)
? ? if(typeof(setRow) != 'undefined'){
? ? ? this.defaultRow = setRow
? ? }
? ? if(typeof(setColumn) != 'undefined'){
? ? ? this.defaultColumn = setColumn
? ? }
? ? if(typeof(setDilei) != 'undefined'){
? ? ? this.defaultDilei = setDilei
? ? }
?
? ? //生成指定行和列的方塊數(shù)組，并初始化
? ? var ds = new Array()
? ? for (var i = 0; i <this.defaultRow; i++) {
? ? ? ds[i] = new Array();
? ? ? for (var j = 0; j < this.defaultColumn; j++) {
? ? ? ? ds[i][j] = {
? ? ? ? ? id: "" + i + j, //方塊id
? ? ? ? ? bgcolor: "yellow", //方塊背景色
? ? ? ? ? ftcolor: "red", //方塊文字顏色
? ? ? ? ? text: "", //方塊顯示的文本信息
? ? ? ? ? dilei: 0 //方塊下是否有雷 0：無(wú)雷，1有雷
? ? ? ? }
? ? ? }
? ? }
? ? this.data.bts=ds;
? ? //隨機(jī)產(chǎn)生地雷
? ? for (var v = 0; v < this.defaultDilei; v++) {
? ? ? var i = Math.floor(Math.random() * (this.defaultRow-1))
? ? ? var j = Math.floor(Math.random() * (this.defaultColumn-1))
? ? ? this.data.bts[i][j].dilei = 1
? ? ? this.data.bts[i][j].text = ""
? ? ? this.data.bts[i][j].ftcolor = "red"
? ? }
? ? this.setData({ bts: this.data.bts })
? ? this.data.clickButton = false
? ? ?clearInterval(this.data.timer)
? },
? onLoad: function () {
? ? this.counter()
? ? this.init()?
? ??
? },
? countDilei:function(i,j){
? ? ?var N=0
? ? ?if(i>0 && j>0) N=N+this.data.bts[i-1][j-1].dilei//左上?
? ? ?if(i>0) N=N+this.data.bts[i-1][j].dilei//上
? ? ?if(i>0 && j<this.defaultColumn-1) N=N+this.data.bts[i-1][j+1].dilei //右上
? ? ?if(j>0) N=N+this.data.bts[i][j-1].dilei//左
? ? ?if(j<this.defaultColumn-1) N=N+this.data.bts[i][j+1].dilei//右
? ? ?if(i<this.defaultRow-1 && j>0) N=N+this.data.bts[i+1][j-1].dilei
? ? ?if(i<this.defaultRow-1) N=N+this.data.bts[i+1][j].dilei
? ? ?if(i<this.defaultRow-1 && j<this.defaultColumn-1) N=N+this.data.bts[i+1][j+1].dilei
? ? ?return N;
? },
? aotoClick: function (i, j) {
? ? var n = this.countDilei(i, j)
? ? //無(wú)論周?chē)欠裼欣锥际紫葘?dāng)前翻開(kāi)，這樣遞歸才可以作為條件判斷
? ? this.data.bts[i][j].bgcolor = "white"
? ? this.data.bts[i][j].ftcolor = "blue"
? ? //再根據(jù)周?chē)欠裼欣讻Q定是否遞歸
? ? if (n != 0) {
? ? ? this.data.bts[i][j].text = n
? ? }else{//三個(gè)條件：存在、未翻開(kāi)、不是雷
? ? ? if (i > 0 && j > 0 && this.data.bts[i - 1][j - 1].bgcolor == "yellow" && this.data.bts[i - 1][j - 1].dilei != 1) this.aotoClick(i - 1, j - 1) //左上?
? ? ? if (i > 0 && this.data.bts[i - 1][j].bgcolor == "yellow" && this.data.bts[i - 1][j].dilei != 1) this.aotoClick(i - 1, j) //上
? ? ? if (i > 0 && j < this.defaultColumn-1 && this.data.bts[i - 1][j + 1].bgcolor == "yellow" && this.data.bts[i - 1][j + 1].dilei != 1) this.aotoClick(i - 1, j + 1) //右上
? ? ? if (j > 0 && this.data.bts[i][j - 1].bgcolor == "yellow" && this.data.bts[i][j - 1].dilei != 1) this.aotoClick(i, j - 1) //左
? ? ? if (j < this.defaultColumn-1 && this.data.bts[i][j + 1].bgcolor == "yellow" && this.data.bts[i][j + 1].dilei != 1) this.aotoClick(i, j + 1) //右
? ? ? if (i < this.defaultRow-1 && j > 0 && this.data.bts[i + 1][j - 1].bgcolor == "yellow" && this.data.bts[i + 1][j - 1].dilei != 1) this.aotoClick(i + 1, j - 1)
? ? ? if (i < this.defaultRow-1 && this.data.bts[i + 1][j].bgcolor == "yellow" && this.data.bts[i + 1][j].dilei != 1) this.aotoClick(i + 1, j)
? ? ? if (i <this.defaultRow-1 && j <this.defaultColumn-1 && this.data.bts[i + 1][j + 1].bgcolor == "yellow" && this.data.bts[i + 1][j + 1].dilei != 1) this.aotoClick(i + 1, j + 1)
? ? }
? }
? ,
? click: function (e) {
? ? ? ?//要求用戶(hù)必須點(diǎn)擊開(kāi)始游戲 才能開(kāi)始玩
? ? if(this.data.clickButton == false){
? ? ? wx.showModal({
? ? ? ? title:'提示',
? ? ? ? content:'請(qǐng)點(diǎn)擊開(kāi)始游戲，才能玩',
? ? ? ??
? ? ? })
? ? ? return
? ? }
? ? //找到點(diǎn)擊位置
? ? var ds = e.target.id?
? ? var i = Number(ds.substr(0, 1))
? ? var j = Number(ds.substr(1, 2))
? ? ?
? ? // this.data.bts[i][j].bgcolor="white"
? ? // this.data.bts[i][j].text=""
? ? // // this.data.bts[i][j].ftcolor=""
? ? //如果點(diǎn)到地雷
? ? if (this.data.bts[i][j].dilei == 1) {
? ? ? this.data.bts[i][j].bgcolor="white"
? ? ? this.data.bts[i][j].text="*"
? ? ? this.data.bts[i][j].ftcolor="red"
? ? ? wx.showModal({
? ? ? ? title: '提示',
? ? ? ? content: '你點(diǎn)到地雷了，游戲結(jié)束！'+'\n'+'所用時(shí)間為：'+this.data.timeformat,
?
? ? ? })
? ??
? ? ? ? clearInterval(this.data.timer)
? ? ? this.init()
?
? ? }else{ //沒(méi)點(diǎn)到地雷
? ? ? this.aotoClick(i,j)//開(kāi)始遞歸當(dāng)前的周?chē)?
? ? ? //每次點(diǎn)擊后都檢查是否勝利
? ? ? if(this.isVictory()==true){
? ? ? ? wx.showModal({
? ? ? ? ? title: '提示',
? ? ? ? ? content: '恭喜你翻開(kāi)所有地雷！',
? ? ? ? })
? ? ? ? this.init()
?
? ? ? }
? ? }
? ? this.setData({ bts: this.data.bts })
? ?
? },
? isVictory:function(){
? ? var flag = true;
? ? for (var i = 0; i < this.defaultRow; i++) {
? ? ? for (var j = 0; j < this.defaultColumn; j++) {?
? ? ? ? if(this.data.bts[i][j].dilei==0 && this.data.bts[i][j].bgcolor=="yellow")?
? ? ? ? {
? ? ? ? ? flag=false
? ? ? ? ? break
? ? ? ? }
? ? ? }
? ? }
? ? return flag
? }
})index.wxss
.main{
? ? ? display: flex;
? ? ? flex-direction: column;
? ? ? border: 1px solid black;
? ? }
?
? ?.yy{
? ? ?display: flex;
? ? ?flex-direction: row;
? ?}
? .xx{
? ? border: 1px solid black;
? ? width: 100%;
? ? height: 60px;
? ? margin: 2px;
? ? text-align: center;
? ? line-height: 60px;
? ? font-size: 35px;
? }
? ?.time{
? ? ?display: flex;
? ? ?background: blueviolet;
? ? ?padding-left: 2vw;
? ? ?height: 7vh;
? ? ?line-height: 7vh;
? ?}
? ?.using-time{
? ? ?width: 150px;
? ? ?font-weight: 700;
? ?}
? ?.start-game{
? ? ?/* position: relative; */
? ? ?font-size: 15px;
? ? ?padding-left: 80px;
? ? ?font-weight: 700;
? ? ?color: rgb(63, 204, 34);
? ?}
? ?.set-up{
? ? ?padding-left: 85vw;
? ? ?margin-bottom: 2vh;
? ? ?height: 20px;
? ? ?
? ?}setUp目錄下的代碼文件
setUp.wxml (微信中所有頁(yè)面代碼它默認(rèn)名叫 index.wxml,不用管它)
<!--index.wxml--> ? <label class="title">你可以只設(shè)置一個(gè)數(shù)據(jù)，其他數(shù)據(jù)為系統(tǒng)默認(rèn)數(shù)據(jù)</label> <view class="firstNum"> ? ? <!-- <text>請(qǐng)輸入第一個(gè)運(yùn)算數(shù):</text> --> ? ? <label class="text" >請(qǐng)輸入方塊數(shù)的行數(shù): </label> ? ? <input type="digit" bindinput="input1" ? ? style=" border: 2rpx solid #ccc; width:150px; ?margin-left: 5px; "/> </view> <view class="secondNum"> ? ? <text class="text">請(qǐng)?jiān)O(shè)置方塊數(shù)的列數(shù):</text> ? ? <input type="digit" bindinput="input2" ? ? style=" border: 2rpx solid #ccc; width:150px; ?margin-left: 5px;"/> </view> <view class="dilei"> ? ? <text class="text">請(qǐng)?jiān)O(shè)置地雷數(shù):</text> ? ? <input type="digit" bindinput="input3" ? ?style=" border: 2rpx solid #ccc; width:150px; ?margin-left: 5px;"/> </view> ? <button bindtap="jump" class="jump">確定</button>
setUp.js
// index.js
?
const app = getApp()
?
Page({
? // data: {
? // ? ? num1: 0,
? // ? ? num2: 0,
? // ? ? result: 0
? // },
?
? ? ? input1(e) {
? ? ? ? // 下面代碼將本頁(yè)面數(shù)據(jù)傳給全局變量
? ? ? ? // var app = getApp()
? ? ? ? app.globalData.row = e.detail.value
? ? ? // this.setData({
? ? ? // ? ? ? ? num1: parseFloat(e.detail.value)
? ? ? // ? ? })
? ? ? ? ??
? },
? ? ?input2(e) {
? ? ? app.globalData.column = e.detail.value
? ? ? // this.setData({
? ? ? // ? ? ? ? num2: parseFloat(e.detail.value)
? ? ? // ? ? })
? },
? ? input3(e){
? ? ? app.globalData.dilei = e.detail.value
? ? },
?
? jump:function(){
? ? ? wx.navigateTo({
? ? ? ? url: '../index'
? ? ? })
? }
?
})setUp.wxss
/**index.wxss**/
.text{
? font-size: 13px;
? font-weight: 600;
}
.firstNum,
.secondNum {
? margin: 50rpx;
? display: flex;
? flex-direction: row;
? height:50px;
}
.dilei{
? ?display: flex;
? ?font-size: 13px;
? ?font-weight: 600;
? ?padding-left: 18vw;
}
?
.jump{
? background: rgb(204, 19, 221);
? margin-top: 50px;
}
.title{
? font-size: 13px;
? color:crimson;
? padding-left: 6vw;
}由于涉及頁(yè)面?zhèn)鬟f數(shù)據(jù)，所以還有一個(gè)app代碼
app.js
// app.js
App({
? globalData:{
? ? ? row:0,
? ? ? column:0,
? ? ? dilei:0
? },
? onLaunch() {
? ? // 展示本地存儲(chǔ)能力
? ? const logs = wx.getStorageSync('logs') || []
? ? logs.unshift(Date.now())
? ? wx.setStorageSync('logs', logs)
?
? ? // 登錄
? ? wx.login({
? ? ? success: res => {
? ? ? ? // 發(fā)送 res.code 到后臺(tái)換取 openId, sessionKey, unionId
? ? ? }
? ? })
? },
? globalData: {
? ? userInfo: null
? }
})以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
JavaScript設(shè)計(jì)模式中的觀(guān)察者模式
這篇文章主要介紹了JavaScript設(shè)計(jì)模式中的觀(guān)察者模式，觀(guān)察者設(shè)計(jì)模式適用于監(jiān)聽(tīng)一對(duì)多的操作，例如監(jiān)聽(tīng)對(duì)象屬性的修改等等，觀(guān)察者模式能夠降低代碼耦合度，提升可擴(kuò)展性2022-06-06
Webpack實(shí)現(xiàn)多頁(yè)面打包的方法步驟
本文主要介紹了Webpack實(shí)現(xiàn)多頁(yè)面打包的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
在開(kāi)始設(shè)計(jì)你的腳本之前，要考慮的第一件事情就是檢查一下你要為其編寫(xiě)腳本的HTML代碼，看看有什么東西可以幫助你達(dá)到目的。2008-10-10
在javascript中的一些選擇語(yǔ)句，其實(shí)jf語(yǔ)句就是一種，下面舉幾個(gè)不錯(cuò)的示例為大家介紹下，希望對(duì)大家學(xué)習(xí)有所幫助2013-11-11
這篇文章主要介紹了了解Javascript的模塊化開(kāi)發(fā),本文講解了為什么需要模塊化開(kāi)發(fā),模塊化開(kāi)發(fā)的形成原因等內(nèi)容,需要的朋友可以參考下2015-03-03
window.event.srcElement 得到事件源對(duì)象
window.event.srcElement 得到事件源對(duì)象代碼，大家可以參考腳本之家以前發(fā)的代碼，多瀏覽兼容的。2009-05-05
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
大家在開(kāi)發(fā)JavaScript應(yīng)用的時(shí)候，如果遇到這種大量節(jié)點(diǎn)的情況，不妨將DocumentFragment作為一個(gè)備選的方案。2010-06-06
使用?Angular?服務(wù)器端渲染?Transfer?State?Service
這篇文章主要介紹了使用?Angular?服務(wù)器端渲染?Transfer?State?Service,假設(shè)我們使用?Angular?Universal?開(kāi)發(fā)一個(gè)服務(wù)器端渲染的?Angular?應(yīng)用，這個(gè)應(yīng)用會(huì)消費(fèi)一個(gè)第三方的?Restful?API2022-06-06
前端使用crypto-js庫(kù)aes加解密詳細(xì)代碼示例
在前端開(kāi)發(fā)中數(shù)據(jù)的加密和解密是為了保障用戶(hù)隱私和數(shù)據(jù)的安全性而常見(jiàn)的任務(wù),這篇文章主要給大家介紹了關(guān)于前端使用crypto-js庫(kù)aes加解密的相關(guān)資料,需要的朋友可以參考下2024-03-03
echarts幾個(gè)公司內(nèi)部數(shù)據(jù)可視化圖表必收藏
最近公司有一個(gè)需求，要做一個(gè)數(shù)據(jù)可視化的頁(yè)面，所有的圖表都在下面，做這些都是本人自己寫(xiě)的，全部都是真是的項(xiàng)目中的代碼，包含有柱狀圖、折線(xiàn)圖、水球圖以及散點(diǎn)圖，這里直接打出來(lái)給大家練手，希望大家多多支持，如果這篇文章對(duì)您有用的話(huà)必須收藏2022-08-08