-
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)
一个非常合理的计算公式:
总宽减去图片宽度再除以二
高度同理
效果如下:
嗯,非常好,非常合理
出处:https://www.cnblogs.com/FatTiger4399/p/16624100.html
最新更新
谷歌、微软、Meta?谁才是 Python 最大的金
VB.NET编程调用讯雷下载文件
Objective-C语法之代码块(block)的使用
URL Encode
python爬虫学习
python爬虫学习——列表
go语言写http踩得坑
【Python】爬虫笔记-从PyMySQL到DBUtils
【Python】爬虫笔记-开源代理池haipproxy使用
Python规范:提高可读性
SQL SERVER 查询所有表 统计每张表的大小
.NET MAUI (微软 .Net 6 跨多平台应用 UI)框架
获取树形数据的全路径
第十一章-并发控制
第十章-数据库恢复技术
第七章-概念结构设计
第六章-关系数据理论
第三章-标准SQL语句
第二章-关系数据库
第一章-绪论
JavaScript 中 Object,Map,Set 及数组遍历方法
微信小程序的全局弹窗以及全局实例
理解JS函数之call,apply,bind
解决未知的服务器标记“asp:ListView”。
css样式显示省略号
浅谈JS词法环境
js对象的理解
原型和原型链的深入浅出
JavaScript实现数组对象去重
关于 NodeJs 处理超长字符串问题的分析