一、实验目标
1.结合所学知识创建完整的推箱子游戏游戏项目;能够在开发过程中熟练掌握真机预览、调试等操作。
二、实验步骤
本次实验类似实验4拼图游戏,只不过在游戏逻辑上有所不同——后者需要对箱子位置以及是否可推动有判定之类
- 首先,本次实验有两个页面:index页面主要是选关并进入关卡;game页面就是具体的游戏画面,且分为上游戏界面区以及下操作区——含wasd以及重新开始
- index页面有一个title和选关页面。可以用wx:for创造多个关卡并在后续绑定具体的游戏页面![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images
/20230724024159.png?origin_url=image.png&pos_id=img-2MB8JEop-1693885323824)下代码是index页面的前端样式
<view class='levelBox'>
<view class='box' wx:for='{{levels}}' wx:key='levels{{index}}' bindtap='chooseLevel' data-level='{{index}}'>
<image src='/images/{{item}}'></image>
<text>第{{index+1}}关</text>
</view>
- 然后就是game页面。如前所说,上部分是游戏画布,下部分是游戏操作。与之前不同的是,画布并不是整个图片,而是icon。为此,需要创建对应的二维数组,以数组元素来判断采用什么样的素材——后续游戏逻辑也是操作数组元素完成修改后,再据此绘制图像。![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images
/20230724024159.png?origin_url=image-1.png&pos_id=img-s9p3Bvf4-1693885323825)下代码是向右移动的逻辑实现,其它方向大同小异
right:function(){
if(col<7){
if(map[row][col+1]!=1 && box[row][col+1]!=4){
col=col+1
}
else if(box[row][col+1] ==4){
if(col+1<0){
if(map[row][col+2]!=1 && box[row][col+2] !=4){
box[row][col+2]=4
box[row][col+1]=0
col=col+1
}
}
}
this.drawCanvas()
this.checkWin()
}
},
- 最后的部分是完善。比如完成游戏的提示以及重新开始游戏的实现等等
三、程序运行结果
![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images
/20230724024159.png?origin_url=image-2.png&pos_id=img-9bilpedm-1693885323826)
![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images
/20230724024159.png?origin_url=image-3.png&pos_id=img-E1tcNVWn-1693885323826)