一、动画
- 需要新增加动画的地方有三处:1)新生成数字块时;2)数字块合并时;3)显示排行榜时。可参考cc.tween官方文档。
- 新生成数字块时。修改
game.js
的addBlock()方法
。
addBlock() {
...
if (locations.length == 0) {
...
} else {
...
cc.tween(block)
.to(ANIMATION_DURATION, { scale: 0.75 })
.to(ANIMATION_DURATION, { scale: 1 }, { easing: 'backOut' })
.start();
...
}
},
- 数字块合并时。修改
moveDirection(direction)方法
。
moveDirection(direction) {
...
let move = (x, y, callback) => {
...
if (condition || this.data[x][y] == 0) {
...
} else if (this.data[destX][destY] == 0) {
...
} else if (this.data[destX][destY] == this.data[x][y]) {
cc.tween(this.blocks[destX][destY])
.to(ANIMATION_DURATION, { scale: 1.25 })
.to(ANIMATION_DURATION, { scale: 1 }, { easing: 'backOut' })
.start();
...
} else {
...
}
};
...
},
- 显示排行榜时。修改
showRanks()方法
。
showRanks() {
...
cc.tween(this.rankBox)
.to(ANIMATION_DURATION, { scale: 1.05 })
.to(ANIMATION_DURATION, { scale: 1 }, { easing: 'backOut' })
.start();
},
- 实际预览后,发现效果不佳会产生卡顿的感觉,修改将这三个动画封装为一个函数
showAnimation(object)
,并修改MOVE_DURATION
的值。
const MOVE_DURATION = 0.02;
...
showAnimation(object) {
cc.tween(object)
.to(0.06, { scale: 1.1 })
.to(0.06, { scale: 1 })
.start();
},
- 在微信开发者工具中预览可得。
二、音效
- 下载点击音效,拷贝至
assets\sound目录
下,在restartButton
下新建一个clickSound节点
,添加AudioSource组件
,将click.mp3
拖至Clip
栏。
- 在
restartButton
中将Button组件
中的Click Event
改为1
,cc.Node选择clickSound节点
,组件为cc.AudioSource
,方法为play
。
- 其他按钮同理,但实际预览过程中,返回按钮并不能听到声音。原因是声音事件还没有触发,相关
box
的active为false
了,因此修改AudioSource
相关代码。 - 在
properties
中添加clickSound
,并与Canvas
绑定,在按钮触发的相关方法中调用play()方法
即可。
properties: {
...
clickSound: cc.AudioSource,
},
...
restart() {
...
this.clickSound.play();
},