欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?qū)崿F(xiàn)掃雷游戲

 更新時間：2022年09月08日 16:27:19   作者：楓渝浪天下  
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)掃雷游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序?qū)崿F(xiàn)掃雷游戲的具體代碼，供大家參考，具體內(nèi)容如下

實驗小提醒，打開微信小程序模板時，一定要看清楚，要選js模板，不要選ts模板，因為ts中對數(shù)據(jù)類型檢查更嚴格，同樣的代碼在ts中可能無法運行！

實驗內(nèi)容：

編寫如下掃雷游戲，基本要求如下：

（1）方塊數(shù)為10行7列；

（2）有游戲計時（計時單位為秒）；

（3）有一個“開始游戲”按鈕，按該按鈕能重新開始一局游戲。

可依據(jù)個人能力自由發(fā)揮點：

（1）讓玩家可以自由設(shè)定方塊數(shù)；

（2）讓玩家可以自由設(shè)定地雷數(shù)；

實驗效果：

程序優(yōu)勢：

1、必須點擊開始游戲，才能點擊方塊，避免用戶誤碰影響玩的體驗

2、游戲玩到中途，可以新開一局，也可以在點擊新開一局后，點擊取消，繼續(xù)玩

3、可以點擊設(shè)置，設(shè)置行數(shù)，列數(shù)或者地雷數(shù)任意一個參數(shù)，游戲怎么玩兒，由你定

代碼目錄：

這里面index目錄下面四個文件，放的是掃雷相關(guān)的代碼； 而setUp目錄中的四個文件放的是設(shè)置頁面相關(guān)的代碼！

實驗代碼：

index目錄下的代碼文件

index.wxml

<!--index.wxml-->
<view class="time">
? <view class="using-time">當(dāng)前用時：{{timeformat}}</view>
? ?<view class="start-game" bindtap="start"> 開始游戲 </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個方塊，根方塊有關(guān)的屬性全部存儲起來
? ? 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:'開始游戲',
? ? ? ?showCancel:true,
? ? ? ?
? ? ? ? 如何讓用戶點擊取消按鈕后，還能繼續(xù)玩(已解決)
? ? ? ? success(res){
? ? ? ? ? // 剛開局點擊取消后，什么也不做
? ? ? ? ? if(res.cancel ){
? ? ? ? ? ? if(!that.data.cancelButton){
?
? ? ? ? ? ? }else{
? ? ? ? ? ? ?that.data.timer = setInterval(that.counter,1000)
? ? ? ? ? ? }
?
? ? ? ? ? ? // 點擊確定后，初始化界面，并回調(diào)時間函數(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
? ? ? ?})
? ? ?}
? ? ?// 下面三個全局變量用于保證時間格式
? ? ?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è)置頁面的函數(shù)
? ? setUp:function () {
? ? ? wx.navigateTo({
? ? ? ? url: '../index/setUp/setUpPage',
? ? ? })
? ? ? // 設(shè)置完以后應(yīng)該重新開始游戲
? ? ? this.defaultRow = 10
? ? ? this.defaultColumn = 7
? ? ? this.defaultDilei = 10
? ? ? this.init()
? ? },
? ? // 設(shè)置默認數(shù)據(jù)，用戶不設(shè)置也能玩
? ?defaultRow:10,
? ?defaultColumn:7,
? ?defaultDilei:10,
? //初始化函數(shù)
? init: function () {
? ? //初始化時間
? ? 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"
? ? })
?
? ? // 檢查用戶修改了哪方面數(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：無雷，1有雷
? ? ? ? }
? ? ? }
? ? }
? ? this.data.bts=ds;
? ? //隨機產(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)
? ? //無論周圍是否有雷都首先將當(dāng)前翻開，這樣遞歸才可以作為條件判斷
? ? this.data.bts[i][j].bgcolor = "white"
? ? this.data.bts[i][j].ftcolor = "blue"
? ? //再根據(jù)周圍是否有雷決定是否遞歸
? ? if (n != 0) {
? ? ? this.data.bts[i][j].text = n
? ? }else{//三個條件：存在、未翻開、不是雷
? ? ? 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) {
? ? ? ?//要求用戶必須點擊開始游戲 才能開始玩
? ? if(this.data.clickButton == false){
? ? ? wx.showModal({
? ? ? ? title:'提示',
? ? ? ? content:'請點擊開始游戲，才能玩',
? ? ? ??
? ? ? })
? ? ? return
? ? }
? ? //找到點擊位置
? ? 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=""
? ? //如果點到地雷
? ? 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: '你點到地雷了，游戲結(jié)束！'+'\n'+'所用時間為：'+this.data.timeformat,
?
? ? ? })
? ??
? ? ? ? clearInterval(this.data.timer)
? ? ? this.init()
?
? ? }else{ //沒點到地雷
? ? ? this.aotoClick(i,j)//開始遞歸當(dāng)前的周圍
? ? ? //每次點擊后都檢查是否勝利
? ? ? if(this.isVictory()==true){
? ? ? ? wx.showModal({
? ? ? ? ? title: '提示',
? ? ? ? ? content: '恭喜你翻開所有地雷！',
? ? ? ? })
? ? ? ? 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  (微信中所有頁面代碼它默認名叫 index.wxml,不用管它)

<!--index.wxml-->
?
<label class="title">你可以只設(shè)置一個數(shù)據(jù)，其他數(shù)據(jù)為系統(tǒng)默認數(shù)據(jù)</label>
<view class="firstNum">
? ? <!-- <text>請輸入第一個運算數(shù):</text> -->
? ? <label class="text" >請輸入方塊數(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">請設(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">請設(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) {
? ? ? ? // 下面代碼將本頁面數(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;
}

由于涉及頁面?zhèn)鬟f數(shù)據(jù)，所以還有一個app代碼

app.js

// app.js
App({
? globalData:{
? ? ? row:0,
? ? ? column:0,
? ? ? dilei:0
? },
? onLaunch() {
? ? // 展示本地存儲能力
? ? const logs = wx.getStorageSync('logs') || []
? ? logs.unshift(Date.now())
? ? wx.setStorageSync('logs', logs)
?
? ? // 登錄
? ? wx.login({
? ? ? success: res => {
? ? ? ? // 發(fā)送 res.code 到后臺換取 openId, sessionKey, unionId
? ? ? }
? ? })
? },
? globalData: {
? ? userInfo: null
? }
})

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • JavaScript設(shè)計模式中的觀察者模式

    JavaScript設(shè)計模式中的觀察者模式

    這篇文章主要介紹了JavaScript設(shè)計模式中的觀察者模式，觀察者設(shè)計模式適用于監(jiān)聽一對多的操作，例如監(jiān)聽對象屬性的修改等等，觀察者模式能夠降低代碼耦合度，提升可擴展性
    2022-06-06
  • Webpack實現(xiàn)多頁面打包的方法步驟

    Webpack實現(xiàn)多頁面打包的方法步驟

    本文主要介紹了Webpack實現(xiàn)多頁面打包的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-01-01
  • 不唐突的JavaScript的七條準則整理收集

    不唐突的JavaScript的七條準則整理收集

    在開始設(shè)計你的腳本之前，要考慮的第一件事情就是檢查一下你要為其編寫腳本的HTML代碼，看看有什么東西可以幫助你達到目的。
    2008-10-10
  • javascript中的if語句使用介紹

    javascript中的if語句使用介紹

    在javascript中的一些選擇語句，其實jf語句就是一種，下面舉幾個不錯的示例為大家介紹下，希望對大家學(xué)習(xí)有所幫助
    2013-11-11
  • 了解Javascript的模塊化開發(fā)

    了解Javascript的模塊化開發(fā)

    這篇文章主要介紹了了解Javascript的模塊化開發(fā),本文講解了為什么需要模塊化開發(fā),模塊化開發(fā)的形成原因等內(nèi)容,需要的朋友可以參考下
    2015-03-03
  • window.event.srcElement 得到事件源對象

    window.event.srcElement 得到事件源對象

    window.event.srcElement 得到事件源對象代碼，大家可以參考腳本之家以前發(fā)的代碼，多瀏覽兼容的。
    2009-05-05
  • JavaScript Tips 使用DocumentFragment加快DOM渲染速度

    JavaScript Tips 使用DocumentFragment加快DOM渲染速度

    大家在開發(fā)JavaScript應(yīng)用的時候，如果遇到這種大量節(jié)點的情況，不妨將DocumentFragment作為一個備選的方案。
    2010-06-06
  • 使用?Angular?服務(wù)器端渲染?Transfer?State?Service

    使用?Angular?服務(wù)器端渲染?Transfer?State?Service

    這篇文章主要介紹了使用?Angular?服務(wù)器端渲染?Transfer?State?Service,假設(shè)我們使用?Angular?Universal?開發(fā)一個服務(wù)器端渲染的?Angular?應(yīng)用，這個應(yīng)用會消費一個第三方的?Restful?API
    2022-06-06
  • 前端使用crypto-js庫aes加解密詳細代碼示例

    前端使用crypto-js庫aes加解密詳細代碼示例

    在前端開發(fā)中數(shù)據(jù)的加密和解密是為了保障用戶隱私和數(shù)據(jù)的安全性而常見的任務(wù),這篇文章主要給大家介紹了關(guān)于前端使用crypto-js庫aes加解密的相關(guān)資料,需要的朋友可以參考下
    2024-03-03
  • echarts幾個公司內(nèi)部數(shù)據(jù)可視化圖表必收藏

    echarts幾個公司內(nèi)部數(shù)據(jù)可視化圖表必收藏

    最近公司有一個需求，要做一個數(shù)據(jù)可視化的頁面，所有的圖表都在下面，做這些都是本人自己寫的，全部都是真是的項目中的代碼，包含有柱狀圖、折線圖、水球圖以及散點圖，這里直接打出來給大家練手，希望大家多多支持，如果這篇文章對您有用的話必須收藏
    2022-08-08

最新評論