中国海洋大学2023年夏季《移动软件开发》实验报告4
Info: 韩翔 21020007023
Date: 2023-08-29
项目创建
- 不使用云服务
- 语言：javascript（使用javascript template）
页面配置
删除和修改文件：
-
删除utils文件夹及其内部所有内容
-
删除pages文件夹下的logs目录及其内部所有内容
-
删除index.wxml和index.wxss中的全部代码
-
删除index.js中的全部代码，并且输入关键词page生成模板（可借助自动补齐）
-
删除app.wxss中的全部代码
-
删除app.js中的全部代码，并且输入关键词app生成模板（可借助自动补齐）
同时需要将素材图片导入。在目录中点击目录结构上方的+号来创建文件夹，并命名为images。导入后的图片略。
视图设计
通过修改app.json中的代码，调整导航栏的效果。代码如下：
{
"window": {
"navigationBarBackgroundColor": "#E64340",
"navigationBarTitleText": "拼图游戏"
}
}
上述代码可以更改导航栏内背景色为珊瑚红色，字体为白色（需要单独设置字体颜色，并非默认，可能与版本有关）
设置公共样式：
在app.wxss中设置页面窗口和顶端标题的公共样式：
.container {
height: 100vh;
color: #E64340;
font-weight: bolo;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
}
.title {
font-size: 18pt;
}
在首页设计中，使用<view>容器设置顶端标题和关卡列表：
WXML:
<view class='container'>
<view class='title'>游戏选关</view>
<view class='levelBox'>
<view class='box'>
<image src='/images/images/pic01.jpg'></image>
<text>第1关</text>
</view>
</view>
</view>
WXSS:
.levelBox{
width: 100%;
}
.box{
width: 50%;
float: left;
margin: 25rpx 0;
display: flex;
flex-direction: column;
align-items: center;
}
image {
width: 260rpx;
height: 260rpx;
}
此时可以显示一个标题和临时关卡：
通过补充game文件夹中的WXML和WXSS代码，实现跳转页的设计：
WXML:
<view class='container'>
<view class='title'>提示图</view>
<image src='/images/images/pic01.jpg'></image>
<canvas canvas-id = 'myCanvas'></canvas>
<button type='warn'>
重新开始
</button>
</view>
WXSS:
image {
width: 250rpx;
height: 250rpx;
}
canvas {
border: 1rpx solid;
width: 300px;
height: 300px;
}
（在普通编译模式下无法预览，解决方案是，点击上方“普通编译”，添加编译，定位到/game/game）
逻辑实现
通过在index.js中填入data来实现：
JS:
data: {
levels: [
'pic01.jpg',
'pic02.jpg',
'pic03.jpg',
'pic04.jpg',
'pic05.jpg',
'pic06.jpg'
]
}
接着为关卡对应的<view>组件添加wx:for属性循环显示关卡列表数据和图片。
WXML:
<view class='container'>
<view class='title'>游戏选关</view>
<view class='levelBox'>
<view class='box' wx:for='{{levels}}' wx:key='levels{{index}}'>
<image src='/images/images/{{item}}'></image>
<text>第{{index+1}}关</text>
</view>
</view>
</view>
此时的效果如下：
此外，还要实现点击图标跳转到游戏界面的操作：
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/images/{{item}}'></image>
<text>第{{index+1}}关</text>
</view>
</view>
</view>
同时在index.js添加自定义函数chooseLevel：
chooseLevel: function(e) {
let level=e.currentTarget.dataset.level
wx.navigateTo({
url: '../game/game?level='+level
})
}
至此，已经可以实现游戏界面的跳转，但仍然无法实现游戏内的操作。
通过修改game.js和game.wxml中的代码，使游戏界面能够显示出提示图：
JS:
onLoad: function(options) {
url = '/images/images/'+options.level
this.setData({url:url})
}
WXML:
<view class='container'>
<view class='title'>提示图</view>
<image src='{{url}}'></image>
</view>
此时重新从首页点击不同的关卡图片跳转就可以发现已经能够正确显示对应的内容了。
后面将通过修改代码实现游戏功能。
首先在game.js文件的顶端记录一些游戏的初始数据信息。代码修改如下：
JS:
var num = [
['00', '01', '02'],
['10', '11', '12'],
['20', '21', '22'],
]
var w = 100
var url = '/images/images/pic01.jpg'
在game.js文件中添加一系列函数，用于实现游戏功能。对应的JS（pages/game/game.js）代码如下：
var url = '/images/images/pic01.jpg'
var num = [
['00', '01', '02'],
['10', '11', '12'],
['20', '21', '22']
]
var w = 100
// pages/game/game.js
Page({
/**
* 页面的初始数据
*/
data: {
isWin: false
},
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
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
url = '/images/images/' + options.level
this.setData({url:url})
this.ctx = wx.createCanvasContext('myCanvas')
this.shuffle()
this.drawCanvas()
},
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) {
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()
},
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()
}
}
},
restartGame: function() {
this.setData({isWin: false})
this.shuffle()
this.drawCanvas()
},
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
}
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
效果如下：
290
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
