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)
一个非常合理的计算公式:
总宽减去图片宽度再除以二
高度同理
效果如下:
嗯,非常好,非常合理