Html飞机大战(四):状态的切换(界面加载类的编辑)
好家伙，接着写
既然我们涉及到状态了，那么我们也会涉及到状态的切换
那么我们怎样切换状态呢?
想象一下，如果我玩的游戏暂停了，那么我们肯定是通过点击或者按下某个按键来让游戏继续
这里我们选择添加点击事件来切换游戏状态
1.我们给canvas对象添加一个点击事件用于切换状态
canvas.addEventListener("click", () => {
if (state === START) {
state = STARTING;
}
});
然后我们去弄一点飞机加载图片
（自己用PS画的，将就着用吧）
2.定义一个图片数组,用于存放图片
const loading_frame = [];
loading_frame[0] = new Image()
loading_frame[0].src = "img/game_loading1.jpg"
loading_frame[1] = new Image()
loading_frame[1].src = "img/game_loading2.jpg"
loading_frame[2] = new Image()
loading_frame[2].src = "img/game_loading3.jpg"
loading_frame[3] = new Image()
loading_frame[3].src = "img/game_loading4.jpg"
我们会用一个变量的++来选择渲染哪一张图片
3.配置加载类Loading的配置项LOADING
//飞机加载界面类的配置项
const LOADING = {
//图片数组
frame: loading_frame,
//图片的宽
width: 480,
//图片的高
height: 100,
//图片的初始绘制x,y轴
x: 0,
//总高减去图片的高度
y: 650 - 100,
//速度单位为毫秒
speed: 1000,
};
(注释说的非常清楚了)
4.编辑Loading类:
class Loading {
constructor(config) {
this.frame = config.frame;
//加载哪张图片的下标
this.frameIndex = 0;
//图片宽度
this.width = config.width;
//图片高度
this.height = config.height;
this.x = config.x;
this.y = config.y;
this.speed = config.speed;
this.lastTime = new Date().getTime();
}
//一样的判断方法和绘图方法
judge() {
const currentTime = new Date().getTime();
if (currentTime - this.lastTime > this.speed) {
this.frameIndex++;
console.log(this.frameIndex);
if (this.frameIndex === 4) {
//更新状态
state = RUNNING;
}
//更新时间
this.lastTime = currentTime;
}
}
paint(context) {
context.drawImage(this.frame[this.frameIndex], this.x, this.y, this.width, this.height)
}
}
方法说明:
4.1.judge方法
这里我们通过frameIndex的数字变化来对应不同的图片
和天空类相同,这里我们把(变量的控制/更新时机的判断)与绘制分开来
原理还是那条公式, 现在的时间-最后一次更新的时间 > 速度 =====>可以更新了
4.2.更新状态
if (this.frameIndex === 4) {
//更新状态
state = RUNNING;
}
当四张图片都加载完以后,进入到下一个状态
4.3.paint图片绘制方法
paint(context) {
context.drawImage(this.frame[this.frameIndex], this.x, this.y, this.width, this.height)
}
还是那几个参数(忘了就去翻前两篇博客)
5.实例化
const loading = new Loading(LOADING);
6.方法的调用
在switch结构语句里加上方法调用
case STARTING:
sky.judge();
sky.paint(context);
//这里需要一个飞机加载的loading
loading.judge();
loading.paint(context);
break;
好了,让我们来看看看效果:
(第一帧好像跳的有点快)
全部代码如下:
<!DOCTYPE html>
<html lang="zh-CN"> <head>
<meta charset="UTF-8">
<meta name="viewprot" content="width-devic-width,initial-scale=1.0">
<title>飞机大战</title>
<style>
* {
padding: 0;
margin: 0;
} canvas {
border: 1px solid red;
margin: auto;
} #stage {
width: 480px;
height: 650px;
margin: auto;
}
</style>
</head> <body>
<div id="stage">
<canvas id="canvas" width="480" height="650"></canvas>
</div>
<script>
// 1.让画笔能够绘制图片
// 1.1找到这个画布
const canvas = document.querySelector("#canvas");
// 1.2.利用这个画布初始换一个2D的画框
const context = canvas.getContext("2d");
/* canvas画布绘制bg对象时的坐标 */
let x1 = 0;
let y1 = 0;
let x2 = 0;
let y2 = -650;
// 2.加载这张图片
const bg = new Image();
bg.src = "img/4.jpg";
//定义游戏状态
const START = 0;
const STARTING = 1;
const RUNNING = 2;
const PAUSE = 3
const END = 4; //初始化一个加载图片logo
const copyright = new Image();
copyright.src = "img/START.jpg" //初始化飞机大战的加载图片
const loading_frame = [];
loading_frame[0] = new Image()
loading_frame[0].src = "img/game_loading1.jpg"
loading_frame[1] = new Image()
loading_frame[1].src = "img/game_loading2.jpg"
loading_frame[2] = new Image()
loading_frame[2].src = "img/game_loading3.jpg"
loading_frame[3] = new Image()
loading_frame[3].src = "img/game_loading4.jpg"
/*
image 加载的图片对象
dX为图片开始绘制的左上角横坐标
dY为图片开始绘制的左上角横坐标
dWidth为图片在canvas绘制的宽度
dHeight为图片在canvas绘制的宽度
*/
/*
首参为事件名
二参为一个回调函数,表示加载完毕后执行的代码
*/ //已经是Java的形状了
class Sky {
constructor(config) {
//图片资源
this.bg = config.bg;
this.width = config.width;
this.height = config.height;
this.x1 = 0;
this.y1 = 0;
this.x2 = 0;
this.y2 = -this.height;
this.speed = config.speed;
//最后更新时间
this.lasttime = new Date().getTime(); }
//判断方法
judge() {
let currentTime = new Date().getTime();
//在此处增加一个判断
if (currentTime - this.lasttime > this.speed) {
this.y1++;
this.y2++;
this.lasttime = currentTime; }
//渲染完毕,重置y1,y2
if (this.y2 === 0) {
this.y1 = 0;
this.y2 = -this.height;
}
}
//绘图方法
paint(context) {
context.drawImage(this.bg, this.x1, this.y1++, this.width, this.height);
context.drawImage(this.bg, this.x2, this.y2++, this.width, this.height);
if (this.y2 === 0) {
this.y1 = 0;
this.y2 = -650;
}
} }
//天空类的配置项
const SKY = {
bg: bg,
width: 480,
height: 650,
speed: 10,
/* 速度 */
}
//初始化一个飞机加载界面类
class Loading {
constructor(config) {
this.frame = config.frame;
//加载哪张图片的下标
this.frameIndex = 0;
//图片宽度
this.width = config.width;
//图片高度
this.height = config.height;
this.x = config.x;
this.y = config.y;
this.speed = config.speed;
this.lastTime = new Date().getTime();
}
//一样的判断方法和绘图方法
judge() {
const currentTime = new Date().getTime();
if (currentTime - this.lastTime > this.speed) {
this.frameIndex++;
console.log(this.frameIndex);
if (this.frameIndex === 4) {
//更新状态
state = RUNNING;
}
//更新时间
this.lastTime = currentTime;
}
}
paint(context) {
context.drawImage(this.frame[this.frameIndex], this.x, this.y, this.width, this.height)
} }
//飞机加载界面类的配置项
const LOADING = {
//图片数组
frame: loading_frame,
//图片的宽
width: 480,
//图片的高
height: 100,
//图片的初始绘制x,y轴
x: 0,
//总高减去图片的高度
y: 650 - 100,
//速度单位为毫秒
speed: 1000,
};
//初始化一个天空实例
const sky = new Sky(SKY);
//初始化一个飞机界面加载实例
const loading = new Loading(LOADING);
//state表示游戏状态 取值必须是以上的五种状态
let state = START;
//为canvas绑定一个点击事件,且如果是START状态的时候需要修改成
//STARING状态 canvas.addEventListener("click", () => {
if (state === START) {
state = STARTING;
}
});
//开始加载图片了:
bg.addEventListener("load", () => {
/*
callback: Function 表示回调函数
timeout: Number 表示每次调用函数所间隔的时间段
*/
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 STARTING:
sky.judge();
sky.paint(context);
//这里需要一个飞机加载的loading
loading.judge();
loading.paint(context);
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);
})
</script>
</body> </html>
Html飞机大战Demo
Html飞机大战(四):状态的切换(界面加载类的编辑)的更多相关文章
- ios单独的页面支持横竖屏的状态调整，HTML5加载下（更新2）
单独的页面支持横竖屏的状态调整,HTML5加载下 工程中设置只支持竖屏状态,在加载HTML5的界面可以是横竖屏的,在不对工程其他界面/设置做调整的同时,可以这样去 #import "View ...
- 练习PopupWindow弹出框之实现界面加载的时候显示弹出框到指定的view下面--两种延迟方法
今天在练习PopupWindow弹出框的时候,打算在界面加载的时候将弹出框展现出来并显示在指定的view下面. 初步方法是直接在OnResume方法里面直接执行showPopupWindows方法. ...
- vue 实现tab切换动态加载不同的组件
vue 实现tab切换动态加载不同的组件 使用vue中的is特性来加载不同的组件.具体看如下代码:这个功能对于vue比较复杂的页面可以使用上,可以把一个页面的功能拆分出来,使代码更简单.使用方式具体看 ...
- 因为错误关闭Selinux导致CentOS7启动失败(进度条卡死，图形界面加载卡死)
我在CentOS7上安装oracle,非常麻烦,搞半天终于安装完毕,当天我没有发现任何问题,第二天上班打开虚拟机CentOS7就进不去了. 我想起来之前关闭了Selinux,把系统名称改成了redha ...
- ionic js 加载动画 ionSpinner 提供了许多种旋转加载的动画图标。当你的界面加载时，你就可以呈现给用户相应的加载图标。 该图标采用的是SVG
ionic 加载动画 ion-spinner ionSpinner 提供了许多种旋转加载的动画图标.当你的界面加载时,你就可以呈现给用户相应的加载图标. 该图标采用的是SVG. 用法 <ion- ...
- 飞机大战（1）--添加logo和加载动画
注:以下代码都是用scratch 3.0版本编写 素材链接: 链接:https://pan.baidu.com/s/1sXqeZVuFgVTYT0OtqxXilw 提取码:1126 一.背景添加 导入 ...
- WPF 界面实现多语言支持 中英文切换 动态加载资源字典
1.使用资源字典,首先新建两个字典文件en-us.xaml.zh-cn.xaml.定义中英文的字符串在这里面[注意:添加xmlns:s="clr-namespace:System;assem ...
- eclipse启动无响应，停留在Loading workbench状态，或老是加载不了revert resources
做开发的同学们或多或少的都会遇到eclipse启动到一定程度时,就进入灰色无响应状态再也不动了.启动画面始终停留在Loading workbench状态.反复重启,状态依旧. 多数情况下,应该是非正常 ...
- iOS app应用界面加载卡顿的问题
刚发布版本,忽然发现加载界面需要3-5秒延迟,那么问题来了. 首先,发现问题: 1.看代码,基于之前版本更新都没出问题,还是比较确信不是代码中的bug,以防万一,还是仔细看了下关于界面跳转部分的代码, ...
随机推荐
- C++ 炼气期之变量的生命周期和作用域
1. 前言 什么是变量的生命周期? 从变量被分配空间到空间被收回的这一个时间段,称为变量的生命周期. 什么是变量的作用域? 在变量的生命周期内,其存储的数据并不是在任何地方都能使用,变量能使用的范围, ...
- WPF开发随笔收录-本地日志LogUtil类
一.前言 生活中的日志是记录你生活的点点滴滴,让它把你内心的世界表露出来,更好的诠释自己的内心世界.而在开发者眼中的日志是我们排除问题的第一手资料,项目中的程序上线之后,一旦发生异常,第一件事就是先去 ...
- 模拟HashMap冲突
最近看HashMap的源码,其中相同下标容易产生hash冲突,但是调试需要发生hash冲突,本文模拟hash冲突. hash冲突原理 HashMap冲突是key首先调用hash()方法: static ...
- Eolink 全局搜索介绍【翻译】
随着前后端分离成为互联网项目开发的标准模式, API 成为了前后端联通的桥梁.而面对越来越频繁和复杂的调用需求,项目里的 API 数量也越来越多,我们需要通过搜索功能来快速定位到对应的 API来进行使 ...
- 【PostgreSQL 】PostgreSQL 15对distinct的优化
示例表 table t_ex; c1 | c2 ----+---- 2 | B 4 | C 6 | A 2 | C 4 | B 6 | B 2 | A 4 | B 6 | C 2 | C 以下SQL语 ...
- 2022年windows的Visual Studio 安装后初始配置
目录 前言 1.开发环境设置,修改存储空间 打开编译器,选择工具-->导入和导出设置-->重置所有设置-->下一步 修改盘符-->下一步->选择环境->完成 2.主 ...
- Solution -「最大权闭合子图」做题随笔
T1 小 M 的作物 先从简化题目入手,考虑先去掉 \(c\) 的额外收益.然后尝试将所有作物种在 \(B\), 则目前得到了 \(\sum \limits_{i = 1} ^n b_i\) 的收益. ...
- 基于ABP实现DDD--实体创建和更新
本文主要介绍了通过构造函数和领域服务创建实体2种方式,后者多用于在创建实体时需要其它业务规则检测的场景.最后介绍了在应用服务层中如何进行实体的更新操作. 一.通过构造函数创建实体 假如Issue的 ...
- Ubu18开机自启动-Systemd
参考链接: https://blog.csdn.net/qq_16268979/article/details/114771854 本文内容为个人测试记录,具体文件目录请以读者自己电脑为准,此处只是提 ...
- InnoDB 中不同SQL语句设置的锁
锁定读.UPDATE 或 DELETE 通常会给在SQL语句处理过程扫描到的每个索引记录上设置记录锁.语句中是否存在排除该行的WHERE条件并不重要.InnoDB不记得确切的WHERE条件,但只知道哪 ...