移动软件开发实验四

一、实验目标

1、综合应用所学知识创建完整的拼图游戏项目；2、熟练掌握<canvas>组件。

二、实验步骤

项目创建

创建一个空白的项目

页面配置

视图设计

1.导航栏设计

2.选关页面设计

index.wxml

index.wxss

3.游戏页面设计

wxml

wxss

结果如图：

逻辑实现

1.选关逻辑

在js文件里添加chooseLevel函数：

chooseLevel:function(e){

let level=e.currentTarget.dataset.level

wx.navigateTo({

url:"../game/game?level="+level

})

},

2.游戏页面逻辑

①显示提示图

js代码如下:

onLoad(options) { url='/images/'+options.level this.setData({url:url}) },

效果：

②游戏主体逻辑

初始化拼图画面。传统做法是随机抽取画面中的任意两个方块，然后交换彼此位置，在进行足够多次数的交换后基本可以实现随机打乱的效果。但是这种方法有一个弊端，就是有时候会陷入无解的死局。因此可以考虑从空白方块的所在位置入手，每次随机让它和周围的邻近方块交换位置，这样可以通过方块反向移动回到最初始状态（确保本局有解），并且在交换足够多的次数后也可以实现随机打乱的效果。

shuffle:function () {

num=[

['00','01','02'],

['10','11','12'],

['20','21','22']

]

var row=2

var col=2

for(var i=0;i<100;i++){

var direction=Math.round(Math.random()*3)

if(direction==0){

if(row!=0){

numrow=numrow-1

numrow-1='22'

row-=1

}

}

else if(direction==1){

if(row!=2){

numrow=numrow+1

numrow+1='22'

row+=1

}

}

else if(direction==2){

if(col!=0){

numrow=numrow

numrow='22'

col-=1

}

}

else if(direction==3){

if(col!=2){

numrow=numrow

numrow='22'

col+=1

}

}

}

},

上述代码表示使用for循环进行了100次打乱,开发者可以根据自己的需求更改循环次数。每次使用Math.random()方法从上下、左、右4个方向中随机产生一个方向,之后如果符合条件则交换空白方块和图片方块的位置。

再在js文件下添加下列函数：

drawCanvas: function () { let ctx=this.ctx ctx.clearRect(0,0,300,300) for(var i=0;i<3;i++){ for(var j=0;j<3;j++){ if(numi!='22'){ var row=parseInt(numi/10) var col=numi%10 ctx.drawImage(url,colw,roww,w,w,jw,iw,w,w) } } } ctx.draw() },

最后在game.js的onLoad函数中调用自定义函数shuffle和drawCanvas。对应的js代码片段添加如下：

onLoad(options) { url='/images/'+options.level this.setData({url:url}) this.ctx=wx.createCanvasContext('myCanvas') this.shuffle() this.drawCanvas() },

③移动被点击的方块。修改game.wxml页面中的画布组件(<canvas>)，为其绑定触摸事件。

在game.js文件添加自定义函数 touchBox，用于实现图片方块的移动，对应的JS（pages/game/game.js）代码片段添加如下：

touchBox:function (e) {

if(this.data.isWin){

return

}

var x=e.changedTouches[0].x

var y=e.changedTouches[0].y

var row=parseInt(y/w)

var col=parseInt(x/w)

if(numrow!='22'){

this.moveBox(row,col)

this.drawCanvas()

if(this.isWin()){

let ctx=this.ctx

ctx.drawImage(url,0,0)

ctx.setFillStyle('E63404')

ctx.setTextAlign('center')

ctx.setFontSize(60)

ctx.fillText('游戏成功',150,150)

ctx.draw()

}

}

},

moveBox: function (i, j) {

if (i > 0) {

if (numi - 1 == '22') {

numi - 1 = numi

numi = '22'

return

}

}

if (i < 2) {

if (numi + 1 == '22') {

numi + 1 = numi

numi = '22'

return

}

}

if (j > 0) {

if (numi == '22') {

numi = numi

numi = '22'

return

}

}

if (j < 2) {

if (numi == '22') {

numi = numi

numi = '22'

return

}

}

},

3.判断游戏成功

首先在game.js文件中的data中添加初始数据 isWin，用于标记游戏成功与否。对应的JS（pages/game/game.js）代码片段添加如下：

4.重新开始游戏

修改game.wxml代码，为“重新开始”按钮追加自定义函数的点击事件。

在game.js文件中添加 restartGame函数，用于重新开始游戏。

restartGame:function(){

this.setData({isWin:false})

this.shuffle()

this.drawCanvas()

},

效果如图：

三、程序运行结果

四、问题总结与体会

实验中经常打错字或者大小写切换不对。导致改bug时要找好久

本次实验教会了我canvas组件的用法