2023年夏季《移动软件开发》实验报告
一、实验目标
1、综合应用所学知识创建完整的拼图游戏项目;2、熟练掌握<canvas>组件。
二、实验步骤
步骤一 app设置
wxss文件里设置container css
步骤二 页面设计
标题 关卡盒子
然后 设计游戏界面
需要在这里面添加 并且在app.json中进行设置
他就会有game这个文件夹和game.wxml文件了
wxss样式如下
步骤三 逻辑实现
搭建好了游戏界面回到首页去做选关界面
在js中写这个函数并把他绑定到关卡box上
跳转后:
步骤四 游戏页逻辑
图片就可以正常显示了
在做下面拼图区,先设置方块的位置参数等
然后做一个打乱函数
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++){ var direction = Math.round(Math.random() * 3) if (direction == 0){ if (row != 0){ num[row][col] = num[row - 1][col] num[row - 1][col] = '22' row -= 1 } } else if (direction == 1){ if (row != 2){ num[row][col] = num[row + 1][col] num[row + 1][col] = '22' row += 1 } } else if (direction == 2){ if (col != 0){ num[row][col] = num[row][col - 1] num[row][col - 1] = '22' col -= 1 } } else if (direction == 3){ if (col != 2){ num[row][col] = num[row][col + 1] num[row][col + 1] = '22' col += 1 } } } },
随机调换一百次就可以了,然后把打乱后的结果打在画布上
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 (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() },
在加在onload函数里
onLoad: function (options) { //更新图片路径地址提示图 url = '/images/'+options.level //更新提示图的地址 this.setData({url:url}) //创建画布上下文 this.ctx=wx.createCanvasContext('myCanvas') //打乱方块顺序 this.shuffle() //绘制画布内容 this.drawCanvas() },
好了 只不过现在还不能玩 要完成点击使他移动的功能
我们把touch和move都写在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 (num[row][col] != '22'){ this.moveBox(row, col) 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() } } }, //移动被点击的方块 moveBox: function(i, j){ if (i > 0){ if (num[i - 1][j] == '22'){ num[i - 1][j] = num[i][j] num[i][j] = '22' return } } if (i < 2){ if (num[i + 1][j] == '22'){ num[i + 1][j] = num[i][j] num[i][j] = '22' return } } if (j > 0){ if (num[i][j - 1] == '22'){ num[i][j - 1] = num[i][j] num[i][j] = '22' return } } if (j < 2){ if (num[i][j + 1] == '22'){ num[i][j + 1] = num[i][j] num[i][j] = '22' return } } },
可以移动了 移动了几格
然后再data里加入win_flag
data: { isWin: false },
然后加win的判断函数
isWin: function(){ for (var i = 0; i < 3; i++){ for ( var j = 0; j < 3; j++){ if (num[i][j] != i * 10 + j){ return false } } } this.setData({isWin:true}) return true },
最后试着把他拼完
游戏成功
最后只需要把重新开始做完就可以了
只需要把winflag设置成false重新打乱并且重新布置到画布里就可以了
restartGame: function(){ this.setData({isWin: false}) this.shuffle() this.drawCanvas() },
记得把它绑在button上
最后就可以重新来了
三、程序运行结果
四、问题总结与体会
本次拼图游戏,学到了三点:第一点是创建另一个页面的操作,需要设置并且选择编译的模式
第二点是canvas组件的使用 第三点是用js的函数实现小游戏这个有点复杂的操作,也用到了canvas的touch监听
就是游戏有点难。。。