Html飞机大战(三):定义状态

好家伙,

1.为飞机大战定义状态

1.开始 START

有一个飞机大战LOGO &天空

2.开始时 STRATING

有一个飞机加载的界面&天空

3.运行时 RUNNING

我方飞机&敌方飞机&天空

4.暂停 PAUSE

暂停按钮

5.结束按钮 ENDING

结束字样（game over）

基础架构弄好,开始干活

 //定义游戏状态
        const START = 0;
        const STRATING = 1;
        const RUNNING = 2;
        const PAUSE = 3
        const END = 4;

加一个图片对象

 //初始化一个加载图片logo
        const copyright =new Image();
    copyright.src="img/START.jpg"

然后我们在setInterval里面塞一个switch用来判断状态

setInterval(() => {
                switch (state){
                    case START:
                        sky.judge();
                        sky.paint(context);
                        //渲染飞机大战LOGO
                        //图片原始宽高
                        let logo_x = (480 - copyright.naturalWidth)/2;
                        let logo_y = (650 - copyright.naturalHeight)/2;
                        context.drawImage(copyright,logo_x,logo_y)
                        break;
                    case STARING:
                        sky.judge();
                        sky.paint(context);
                        //这里需要一个飞机加载的loading
                        break;
                    case RUNNING:
                        sky.judge();
                        sky.paint(context);
                        //加载敌机
                        break;
                    case PAUSE:
                        sky.judge();
                        sky.paint(context);
                        //加载暂停页面
                        break;
                    case END:
                        sky.judge();
                        sky.paint(context);
                        //加载游戏结束字样
                        break;
                }

            }, 10);

在这里,值得一提的是

获取图片原始宽高的方法:

copyright.naturalWidth

我们让图片居中

 let logo_x = (480 - copyright.naturalWidth)/2;
 let logo_y = (650 - copyright.naturalHeight)/2;
 context.drawImage(copyright,logo_x,logo_y)

一个非常合理的计算公式:

总宽减去图片宽度再除以二

高度同理

效果如下:

 

嗯,非常好,非常合理