112 lines
2.4 KiB
JavaScript
112 lines
2.4 KiB
JavaScript
|
import Emitter from '../libs/tinyemitter';
|
|||
|
|
import { SCREEN_WIDTH, SCREEN_HEIGHT } from '../render';
|
|||
|
|
|
|||
|
|
const atlas = wx.createImage();
|
|||
|
|
atlas.src = 'images/Common.png';
|
|||
|
|
|
|||
|
|
export default class GameInfo extends Emitter {
|
|||
|
|
constructor() {
|
|||
|
|
super();
|
|||
|
|
|
|||
|
|
this.btnArea = {
|
|||
|
|
startX: SCREEN_WIDTH / 2 - 40,
|
|||
|
|
startY: SCREEN_HEIGHT / 2 - 100 + 180,
|
|||
|
|
endX: SCREEN_WIDTH / 2 + 50,
|
|||
|
|
endY: SCREEN_HEIGHT / 2 - 100 + 255,
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 绑定触摸事件
|
|||
|
|
wx.onTouchStart(this.touchEventHandler.bind(this))
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setFont(ctx) {
|
|||
|
|
ctx.fillStyle = '#ffffff';
|
|||
|
|
ctx.font = '20px Arial';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
render(ctx) {
|
|||
|
|
this.renderGameScore(ctx, GameGlobal.databus.score); // 绘制当前分数
|
|||
|
|
|
|||
|
|
// 游戏结束时停止帧循环并显示游戏结束画面
|
|||
|
|
if (GameGlobal.databus.isGameOver) {
|
|||
|
|
this.renderGameOver(ctx, GameGlobal.databus.score); // 绘制游戏结束画面
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
renderGameScore(ctx, score) {
|
|||
|
|
this.setFont(ctx);
|
|||
|
|
ctx.fillText(score, 10, 30);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
renderGameOver(ctx, score) {
|
|||
|
|
this.drawGameOverImage(ctx);
|
|||
|
|
this.drawGameOverText(ctx, score);
|
|||
|
|
this.drawRestartButton(ctx);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
drawGameOverImage(ctx) {
|
|||
|
|
ctx.drawImage(
|
|||
|
|
atlas,
|
|||
|
|
0,
|
|||
|
|
0,
|
|||
|
|
119,
|
|||
|
|
108,
|
|||
|
|
SCREEN_WIDTH / 2 - 150,
|
|||
|
|
SCREEN_HEIGHT / 2 - 100,
|
|||
|
|
300,
|
|||
|
|
300
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
drawGameOverText(ctx, score) {
|
|||
|
|
this.setFont(ctx);
|
|||
|
|
ctx.fillText(
|
|||
|
|
'游戏结束',
|
|||
|
|
SCREEN_WIDTH / 2 - 40,
|
|||
|
|
SCREEN_HEIGHT / 2 - 100 + 50
|
|||
|
|
);
|
|||
|
|
ctx.fillText(
|
|||
|
|
`得分: ${score}`,
|
|||
|
|
SCREEN_WIDTH / 2 - 40,
|
|||
|
|
SCREEN_HEIGHT / 2 - 100 + 130
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
drawRestartButton(ctx) {
|
|||
|
|
ctx.drawImage(
|
|||
|
|
atlas,
|
|||
|
|
120,
|
|||
|
|
6,
|
|||
|
|
39,
|
|||
|
|
24,
|
|||
|
|
SCREEN_WIDTH / 2 - 60,
|
|||
|
|
SCREEN_HEIGHT / 2 - 100 + 180,
|
|||
|
|
120,
|
|||
|
|
40
|
|||
|
|
);
|
|||
|
|
ctx.fillText(
|
|||
|
|
'重新开始',
|
|||
|
|
SCREEN_WIDTH / 2 - 40,
|
|||
|
|
SCREEN_HEIGHT / 2 - 100 + 205
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
touchEventHandler(event) {
|
|||
|
|
const { clientX, clientY } = event.touches[0]; // 获取触摸点的坐标
|
|||
|
|
|
|||
|
|
// 当前只有游戏结束时展示了UI，所以只处理游戏结束时的状态
|
|||
|
|
if (GameGlobal.databus.isGameOver) {
|
|||
|
|
// 检查触摸是否在按钮区域内
|
|||
|
|
if (
|
|||
|
|
clientX >= this.btnArea.startX &&
|
|||
|
|
clientX <= this.btnArea.endX &&
|
|||
|
|
clientY >= this.btnArea.startY &&
|
|||
|
|
clientY <= this.btnArea.endY
|
|||
|
|
) {
|
|||
|
|
// 调用重启游戏的回调函数
|
|||
|
|
this.emit('restart');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|