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

微信小程序實現(xiàn)拼圖游戲

 更新時間:2021年07月23日 14:14:26   作者:流楚丶格念  
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)拼圖游戲,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序實現(xiàn)拼圖游戲的具體代碼,供大家參考,具體內(nèi)容如下

頁面展示

項目鏈接

微信小程序實現(xiàn)拼圖游戲

項目設計

首頁面

wxml

<!--index.wxml-->
<view class="container">
  <!-- 標題 -->
  <view class="title">游戲選關</view>

  <!-- 關卡列表 -->
  <view class="levelBox">
    <view class="box" wx:for="{{levels}}" wx:key="levels{{index}}" bindtap="chooseLevel" data-level="{{item}}">
      <image src="/images/{{item}}"></image>
      <text>第{{index+1}}關</text>
    </view>
  </view>

</view>

wxss

/**index.wxss**/
/* 關卡區(qū)域列表 */
.levelBox{
  width: 100%;
}

/* 單個關卡區(qū)域 */
.box{
  width: 50%;
  float: left;
  margin: 25rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 選關圖片 */
image{
  width: 260rpx;
  height: 260rpx;
}
//index.js
Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    levels: [
      'pic01.jpg',
      'pic02.jpg',
      'pic03.jpg',
      'pic04.jpg',
      'pic05.jpg',
      'pic06.jpg'
    ]

  },

  /**
   * 自定義函數(shù)--游戲選關
   */
  chooseLevel: function(e) {
    // console.log(e.currentTarget.dataset.level)
    // 獲取選關圖片
    let level = e.currentTarget.dataset.level

    // 跳轉游戲頁面
    wx.navigateTo({
      url: '../game/game?level='+level,
    })

  },
})

游戲頁面

wxml

<!--pages/game/game.wxml-->
<view class="container">
  <!-- 頂端提示圖 -->
  <view class="title">提示圖</view>
  <image src="{{url}}"></image>

  <!-- 游戲區(qū)域 -->
  <canvas canvas-id="myCanvas" bindtouchstart="touchBox"></canvas>

  <!-- 重新開始按鈕 -->
  <button type="warn" bindtap="restartGame">重新開始</button>
</view>

wxss

/* pages/game/game.wxss */
/* 提示圖 */
image{
  width: 250rpx;
  height: 250rpx;
}

/* 游戲畫布區(qū)域 */
canvas{
  border: 1rpx solid;
  width: 300px;
  height: 300px;
}

js

// pages/game/game.js
// 方塊的初始位置
var num = [
  ['00', '01', '02'],
  ['10', '11', '12'],
  ['20', '21', '22']
]

// 方塊的寬度
var w = 100

// 圖片的初始地址
var url = '/images/pic01.jpg'

Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    isWin: false

  },

  /**
   * 自定義函數(shù)--隨機打亂方塊順序
   */
  shuffle: function() {
    // 先令所有方塊回歸初始位置
    num = [
      ['00', '01', '02'],
      ['10', '11', '12'],
      ['20', '21', '22']
    ]

    // 記錄當前空白方塊的行和列
    var row = 2
    var col = 2

    // 隨機打亂方塊順序100次
    for (var i = 0; i < 100; i++) {
      // 隨機生成一個方向:上0,下1,左2,右3
      var direction = Math.round(Math.random() * 3)

      // 上:0
      if (direction == 0) {
        // 空白方塊不能在最上面一行
        if (row != 0) {
          // 交換位置
          num[row][col] = num[row - 1][col]
          num[row - 1][col] = '22'

          // 更新空白方塊的行
          row -= 1
        }
      }

      // 下:1
      if (direction == 1) {
        // 空白方塊不能在最下面一行
        if (row != 2) {
          // 交換位置
          num[row][col] = num[row + 1][col]
          num[row + 1][col] = '22'

          // 更新空白方塊的行
          row += 1
        }
      }

      // 左:2
      if (direction == 2) {
        // 空白方塊不能在最左邊一列
        if (col != 0) {
          // 交換位置
          num[row][col] = num[row][col - 1]
          num[row][col - 1] = '22'

          // 更新空白方塊的列
          col -= 1
        }
      }

      // 右:3
      if (direction == 3) {
        // 空白方塊不能在最右邊一列
        if (col != 2) {
          // 交換位置
          num[row][col] = num[row][col + 1]
          num[row][col + 1] = '22'

          // 更新空白方塊的列
          col += 1
        }
      }

    }

  },

  /**
   * 自定義函數(shù)--繪制畫布內(nèi)容
   */
  drawCanvas: function() {
    let ctx = this.ctx

    // 清空畫布
    ctx.clearRect(0, 0, 300, 300)

    // 使用雙重for循環(huán)語句繪制3x3拼圖
    for (var i = 0; i < 3; i++) {
      for (var j = 0; j < 3; j++) {
        if (num[i][j] != '22') {
          // 獲取行和列
          var row = parseInt(num[i][j] / 10)
          var col = num[i][j] % 10

          // 繪制方塊
          ctx.drawImage(url, col * w, row * w, w, w, j * w, i * w, w, w)
        }
      }
    }

    ctx.draw()
  },

  /**
   * 自定義函數(shù)--監(jiān)聽點擊方塊事件
   */
  touchBox: function(e) {
    // 如果游戲已經(jīng)成功,不做任何操作
    if (this.data.isWin) {
      // 終止本函數(shù)
      return
    }

    // 獲取被點擊方塊的坐標x和y
    var x = e.changedTouches[0].x
    var y = e.changedTouches[0].y
    // console.log('x:'+x+',y:'+y)

    // 換算成行和列
    var row = parseInt(y / w)
    var col = parseInt(x / w)

    // 如果點擊的不是空白位置
    if (num[row][col] != '22') {
      // 嘗試移動方塊
      this.moveBox(row, col)

      // 重新繪制畫布內(nèi)容
      this.drawCanvas()

      // 判斷游戲是否成功
      if (this.isWin()) {
        // 在畫面上繪制提示語句
        let ctx = this.ctx

        // 繪制完整圖片
        ctx.drawImage(url, 0, 0)

        // 繪制文字
        ctx.setFillStyle('#e64340')
        ctx.setTextAlign('center')
        ctx.setFontSize(60)
        ctx.fillText('游戲成功', 150, 150)
        ctx.draw()
      }
    }
  },

  /**
   * 自定義函數(shù)--移動被點擊的方塊
   */
  moveBox: function(i, j) {
    // 情況1:如果被點擊的方塊不在最上方,檢查可否上移
    if (i > 0) {
      // 如果方塊的上方是空白
      if (num[i - 1][j] == '22') {
        // 交換當前被點擊的方塊和空白的位置
        num[i - 1][j] = num[i][j]
        num[i][j] = '22'
        return
      }
    }

    // 情況2:如果被點擊的方塊不在最下方,檢查可否下移
    if (i < 2) {
      // 如果方塊的下方是空白
      if (num[i + 1][j] == '22') {
        // 交換當前被點擊的方塊和空白的位置
        num[i + 1][j] = num[i][j]
        num[i][j] = '22'
        return
      }
    }

    // 情況3:如果被點擊的方塊不在最左側,檢查可否左移
    if (j > 0) {
      // 如果方塊的左側是空白
      if (num[i][j - 1] == '22') {
        // 交換當前被點擊的方塊和空白的位置
        num[i][j - 1] = num[i][j]
        num[i][j] = '22'
        return
      }
    }

    // 情況4:如果被點擊的方塊不在最右側,檢查可否右移
    if (j < 2) {
      // 如果方塊的右側是空白
      if (num[i][j + 1] == '22') {
        // 交換當前被點擊的方塊和空白的位置
        num[i][j + 1] = num[i][j]
        num[i][j] = '22'
        return
      }
    }
  },

  /**
   * 自定義函數(shù)--判斷游戲是否成功
   */
  isWin: function() {
    // 使用雙重for循環(huán)檢查整個數(shù)組
    for (var i = 0; i < 3; i++) {
      for (var j = 0; j < 3; j++) {
        // 如果有方塊位置不對
        if (num[i][j] != i * 10 + j) {
          // 返回假,游戲尚未成功
          return false
        }
      }
    }

    // 游戲成功,更新狀態(tài)
    this.setData({
      isWin: true
    })
    // 返回真,游戲成功
    return true
  },

  /**
   * 自定義函數(shù)--重新開始游戲
   */
  restartGame: function() {
    // 更新游戲狀態(tài)
    this.setData({
      isWin: false
    })

    // 打亂方塊順序
    this.shuffle()

    // 繪制畫布內(nèi)容
    this.drawCanvas()
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function(options) {
    // console.log(options.level)

    // 更新圖片路徑地址
    url = '/images/' + options.level
    // 更新提示圖的地址
    this.setData({
      url: url
    })

    // 創(chuàng)建畫布上下文
    this.ctx = wx.createCanvasContext("myCanvas")

    // 打亂方塊順序
    this.shuffle()

    // 繪制畫布內(nèi)容
    this.drawCanvas()
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow: function() {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面卸載
   */
  onUnload: function() {

  },

  /**
   * 頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 頁面上拉觸底事件的處理函數(shù)
   */
  onReachBottom: function() {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function() {

  }
})

為大家推薦現(xiàn)在關注度比較高的微信小程序教程一篇:《微信小程序開發(fā)教程》小編為大家精心整理的,希望喜歡。

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

相關文章

  • 使用原生js編寫一個簡單的框選功能方法

    使用原生js編寫一個簡單的框選功能方法

    這篇文章主要介紹了使用原生js編寫一個簡單的框選功能方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-05-05
  • JavaScript?深拷貝的循環(huán)引用問題詳解

    JavaScript?深拷貝的循環(huán)引用問題詳解

    如果說道實現(xiàn)深拷貝最簡單的方法,我們第一個想到的就是?JSON.stringify()?方法,因為JSON.stringify()后返回的是字符串,所以我們會再使用JSON.parse()轉換為對象,這篇文章主要介紹了JavaScript?深拷貝的循環(huán)引用問題,需要的朋友可以參考下
    2022-12-12
  • js實現(xiàn)文字向上輪播功能

    js實現(xiàn)文字向上輪播功能

    本文主要分享了javascript實現(xiàn)向上文字輪播功能的示例代碼。具有一定的參考價值,下面跟著小編一起來看下吧
    2017-01-01
  • laydate只顯示時分 不顯示秒的功能實現(xiàn)方法

    laydate只顯示時分 不顯示秒的功能實現(xiàn)方法

    今天小編就為大家分享一篇laydate只顯示時分 不顯示秒的功能實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • 微信小程序實現(xiàn)課程選擇器

    微信小程序實現(xiàn)課程選擇器

    這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)課程選擇器,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • layui動態(tài)渲染生成左側3級菜單的方法(根據(jù)后臺返回數(shù)據(jù))

    layui動態(tài)渲染生成左側3級菜單的方法(根據(jù)后臺返回數(shù)據(jù))

    今天小編就為大家分享一篇layui動態(tài)渲染生成左側3級菜單的方法(根據(jù)后臺返回數(shù)據(jù)),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • js表單元素checked、radio被選中的幾種方法(詳解)

    js表單元素checked、radio被選中的幾種方法(詳解)

    下面小編就為大家?guī)硪黄猨s表單元素checked、radio被選中的幾種方法(詳解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-08-08
  • js 開發(fā)之a(chǎn)utocomplete=

    js 開發(fā)之a(chǎn)utocomplete="off"在chrom中失效的解決辦法

    這篇文章主要介紹了js 開發(fā)之a(chǎn)utocomplete="off"在chrom中失效的解決辦法的相關資料,希望通過本文能幫助到大家,解決遇到這樣的問題,需要的朋友可以參考下
    2017-09-09
  • webpack自動化打包webpack-dev-server的實現(xiàn)

    webpack自動化打包webpack-dev-server的實現(xiàn)

    我們每次改完要打包的資源文件,和配置文件都是是輸入npx webpack命令手動打包的,本文就來介紹一下webpack自動化打包webpack-dev-server的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下
    2023-07-07
  • js replace()去除代碼中空格的實例

    js replace()去除代碼中空格的實例

    下面小編就為大家?guī)硪黄猨s replace()去除代碼中空格的實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-02-02

最新評論