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');
|
||
}
|
||
}
|
||
}
|
||
}
|