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",

还有图片素材

 

 (图片素材来自网络)

 

来看看效果

 

 

(嗯,还不错)