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

更新時(shí)間：2020年10月22日 15:30:34 作者：yunfeather

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)拼圖小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

微信小游戲入門案例——拼圖游戲，供大家參考，具體內(nèi)容如下

涉及內(nèi)容:canvas組件、小程序界面繪圖API

目錄結(jié)構(gòu)：

pages\game\game.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({
 
 /**
 * 頁(yè)面的初始數(shù)據(jù)
 */
 data: {
 isWin: false
 
 },
 
 /**
 * 自定義函數(shù)--隨機(jī)打亂方塊順序
 */
 shuffle: function() {
 // 先令所有方塊回歸初始位置
 num = [
 ['00', '01', '02'],
 ['10', '11', '12'],
 ['20', '21', '22']
 ]
 
 // 記錄當(dāng)前空白方塊的行和列
 var row = 2
 var col = 2
 
 // 隨機(jī)打亂方塊順序100次
 for (var i = 0; i < 100; i++) {
 // 隨機(jī)生成一個(gè)方向：上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)語(yǔ)句繪制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)聽點(diǎn)擊方塊事件
 */
 touchBox: function(e) {
 // 如果游戲已經(jīng)成功，不做任何操作
 if (this.data.isWin) {
 // 終止本函數(shù)
 return
 }
 
 // 獲取被點(diǎn)擊方塊的坐標(biāo)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)
 
 // 如果點(diǎn)擊的不是空白位置
 if (num[row][col] != '22') {
 // 嘗試移動(dòng)方塊
 this.moveBox(row, col)
 
 // 重新繪制畫布內(nèi)容
 this.drawCanvas()
 
 // 判斷游戲是否成功
 if (this.isWin()) {
 // 在畫面上繪制提示語(yǔ)句
 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ù)--移動(dòng)被點(diǎn)擊的方塊
 */
 moveBox: function(i, j) {
 // 情況1：如果被點(diǎn)擊的方塊不在最上方，檢查可否上移
 if (i > 0) {
 // 如果方塊的上方是空白
 if (num[i - 1][j] == '22') {
 // 交換當(dāng)前被點(diǎn)擊的方塊和空白的位置
 num[i - 1][j] = num[i][j]
 num[i][j] = '22'
 return
 }
 }
 
 // 情況2：如果被點(diǎn)擊的方塊不在最下方，檢查可否下移
 if (i < 2) {
 // 如果方塊的下方是空白
 if (num[i + 1][j] == '22') {
 // 交換當(dāng)前被點(diǎn)擊的方塊和空白的位置
 num[i + 1][j] = num[i][j]
 num[i][j] = '22'
 return
 }
 }
 
 // 情況3：如果被點(diǎn)擊的方塊不在最左側(cè)，檢查可否左移
 if (j > 0) {
 // 如果方塊的左側(cè)是空白
 if (num[i][j - 1] == '22') {
 // 交換當(dāng)前被點(diǎn)擊的方塊和空白的位置
 num[i][j - 1] = num[i][j]
 num[i][j] = '22'
 return
 }
 }
 
 // 情況4：如果被點(diǎn)擊的方塊不在最右側(cè)，檢查可否右移
 if (j < 2) {
 // 如果方塊的右側(cè)是空白
 if (num[i][j + 1] == '22') {
 // 交換當(dāng)前被點(diǎn)擊的方塊和空白的位置
 num[i][j + 1] = num[i][j]
 num[i][j] = '22'
 return
 }
 }
 },
 
 /**
 * 自定義函數(shù)--判斷游戲是否成功
 */
 isWin: function() {
 // 使用雙重for循環(huán)檢查整個(gè)數(shù)組
 for (var i = 0; i < 3; i++) {
 for (var j = 0; j < 3; j++) {
 // 如果有方塊位置不對(duì)
 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)聽頁(yè)面加載
 */
 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)聽頁(yè)面初次渲染完成
 */
 onReady: function() {
 
 },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示
 */
 onShow: function() {
 
 },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏
 */
 onHide: function() {
 
 },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載
 */
 onUnload: function() {
 
 },
 
 /**
 * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
 */
 onPullDownRefresh: function() {
 
 },
 
 /**
 * 頁(yè)面上拉觸底事件的處理函數(shù)
 */
 onReachBottom: function() {
 
 },
 
 /**
 * 用戶點(diǎn)擊右上角分享
 */
 onShareAppMessage: function() {
 
 }
})

pages\game\game.wxml

<view class="container">
 <view class="title">
 提示圖
 </view>
 <image src="{{url}}"></image>
 <canvas canvas-id="myCanvas" bindtouchstart="touchBox"></canvas>
 <button type="warn" bindtap="restartGame">重新開始</button>
</view>

pages\game\game.wxss

/* pages/game/game.wxss */
/* 提示圖 */
image{
 width: 250rpx;
 height: 250rpx;
}
 
/* 游戲畫布區(qū)域 */
canvas{
 border: 1rpx solid;
 width: 300px;
 height: 300px;
}

pages\index\index.js

Page({
 
 /**
 * 頁(yè)面的初始數(shù)據(jù)
 */
 data: {
 levels:[
 'pic01.jpg',
 'pic02.jpg',
 'pic03.jpg',
 'pic04.jpg',
 'pic05.jpg',
 'pic06.jpg',
 
 ]
 },
 chooseLevel:function(e){
 let level = e.currentTarget.dataset.level
 wx.navigateTo({
 url: '../game/game?level='+level,
 })
 },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
 */
 onLoad: function (options) {
 
 },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成
 */
 onReady: function () {
 
 },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示
 */
 onShow: function () {
 
 },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏
 */
 onHide: function () {
 
 },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載
 */
 onUnload: function () {
 
 },
 
 /**
 * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
 */
 onPullDownRefresh: function () {
 
 },
 
 /**
 * 頁(yè)面上拉觸底事件的處理函數(shù)
 */
 onReachBottom: function () {
 
 },
 
 /**
 * 用戶點(diǎn)擊右上角分享
 */
 onShareAppMessage: function () {
 
 }
})

pages\index\index.wxml

<view class="container">
 <view class="title">
 游戲選關(guān)
 </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}}關(guān)</text>
 </view>
 </view>
</view>

pages\index\index.wxss

/**index.wxss**/
/* 關(guān)卡區(qū)域列表 */
.levelBox{
 width: 100%;
}
 
/* 單個(gè)關(guān)卡區(qū)域 */
.box{
 width: 50%;
 float: left;
 margin: 25rpx 0;
 display: flex;
 flex-direction: column;
 align-items: center;
}
 
/* 選關(guān)圖片 */
image{
 width: 260rpx;
 height: 260rpx;
}

app.json

{
 "pages":[
 "pages/index/index",
 "pages/game/game"
 ],
 "window":{
 "backgroundTextStyle":"light",
 "navigationBarBackgroundColor": "#E64340",
 "navigationBarTitleText": "拼圖游戲",
 "navigationBarTextStyle":"black"
 },
 "style": "v2",
 "sitemapLocation": "sitemap.json"
}

app.wxss

/**app.wxss**/
/* 頁(yè)面容器樣式 */
.container{
 height: 100vh;
 color: #e64340;
 font-weight: bold;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: space-evenly;
}
 
/* 頂端標(biāo)題樣式 */
.title{
 font-size: 18pt;
}

app.js

App({
 
 /**
 * 當(dāng)小程序初始化完成時(shí)，會(huì)觸發(fā) onLaunch（全局只觸發(fā)一次）
 */
 onLaunch: function () {
 
 },
 
 /**
 * 當(dāng)小程序啟動(dòng)，或從后臺(tái)進(jìn)入前臺(tái)顯示，會(huì)觸發(fā) onShow
 */
 onShow: function (options) {
 
 },
 
 /**
 * 當(dāng)小程序從前臺(tái)進(jìn)入后臺(tái)，會(huì)觸發(fā) onHide
 */
 onHide: function () {
 
 },
 
 /**
 * 當(dāng)小程序發(fā)生腳本錯(cuò)誤，或者 api 調(diào)用失敗時(shí)，會(huì)觸發(fā) onError 并帶上錯(cuò)誤信息
 */
 onError: function (msg) {
 
 }
})

運(yùn)行截圖：