Html飞机大战(十三): 暂停状态编辑
好家伙,本篇介绍如何添加暂停状态
按照惯例我们依旧先分析思路
什么时候游戏应该暂停?
当我的鼠标不在游戏画面内了,我们就可以直接暂停了
在当我的鼠标回来以后,我们继续进行游戏
所以我们可以监听一个鼠标移动事件,
当它的xy坐标超过某个值的时候,
我们改变游戏的状态
当然我们有更好的方法,
事件监听方法中可以直接监听鼠标离开和进入事件
1.为canvas绑定鼠标离开和鼠标进入事件
// 为canvas绑定一个鼠标离开事件 鼠标离开时 RUNNING -> PAUSE
canvas.addEventListener("mouseleave", () => {
if (state === RUNNING) {
state = PAUSE;
}
});
// 为canvas绑定一个鼠标进入事件 鼠标进入时 PAUSE => RUNNING
canvas.addEventListener("mouseenter", () => {
if (state === PAUSE) {
state = RUNNING;
}
});
2.编辑PAUSE状态:
case PAUSE:
let pause_x = (480 - pause.naturalWidth) / 2;
let pause_y = (650 - pause.naturalHeight) / 2;
context.drawImage(pause, pause_x, pause_y);
break;
我们把暂停这个图片编辑在中间,所以它的xy轴坐标计算公式自然是
一半的画布高度/宽度减去一半的图片高度/宽度
3.别忘了你的图片对象
let pause = new Image();
pause.src = "img/game_pause.png",
还有图片素材
(图片素材来自网络)
来看看效果
(嗯,还不错)
分类:
Html飞机大战
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 我与微信审核的“相爱相杀”看个人小程序副业
2021-09-08 第五篇:vue.js起步