Html飞机大战(一):绘制动态背景
好家伙,飞机大战终于开始弄了
这会有很多很多复杂的东西,但是我们总要从最简单,和最基础的部分开始,
我们先从背景开始弄吧!
1.绘制静态背景
这里我们会用到canvas
<!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"); // 2.加载这张图片
const bg = new Image();
bg.src="img/1.jpg";
/*
image 加载的图片对象
dX为图片开始绘制的左上角横坐标
dY为图片开始绘制的左上角横坐标
dWidth为图片在canvas绘制的宽度
dHeight为图片在canvas绘制的宽度
*/
//context.drawImage(Image,dX,dY,dWidth,dHeight)
context.drawImage(bg,0,0,480,650) </script>
</body>
</html>
然后理所当然的失败了:
于是我们来看一下代码:
会发现:
const bg = new Image();
bg.src="img/1.jpg";
这两家伙是异步代码;
我们不清楚他什么时候执行完毕
如果在绘制之前图片还没有加载还没有完毕
那么
context.drawImage(Image,dX,dY,dWidth,dHeight)
就只能绘制出一张空白背景了
所以必须等图片加载完毕后,再进行图片的绘制
我们的解决方案是:给它加一个”load“
/*
稍微提一下箭头函数:
原函数:
hello = function() {
return "Hello World!";
}
箭头函数:
hello = () => "Hello World!";
(仅有单一返回值时可以省略return)
箭头函数好东西,ES6的新特性
简化函数的写法,视觉上看也更直观
*/
为其增加一个addEventListener
bg.addEventListener("load",()=>{
/*
image 加载的图片对象
dX为图片开始绘制的左上角横坐标
dY为图片开始绘制的左上角横坐标
dWidth为图片在canvas绘制的宽度
dHeight为图片在canvas绘制的宽度
*/
context.drawImage(bg,0,0,480,650)
})
//首参为事件名
//二参为一个回调函数,表示加载完毕后执行的代码
"load"事件表示等待对象加载完毕
那么异步的问题就解决了
来看看效果：
(刁图一堆)
这个时候就有人问了:
博主你是SB吗?一个<img>能搞定的为这么弄的这么麻烦,
诶,别急,这么弄是为了接下来的动态效果实现做铺垫
2.动态效果(实现向下移动)
首先确定思路：
我要让背景动起来
可以更改他渲染起点的y轴坐标(y++)
并且让它重复渲染
思路有了,就好办了:
我们用变量来代替参数(方便加减操作)
let x = 0;
let y = 0;
(此处为全局变量,以后会改)
重复渲染我们用到setInterval方法:
/*
setinterval()是定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
*/
我们把绘制方法(drawImage)塞到这个里面
setInterval(()=>{context.drawImage(bg,x,y++,480,650);
},10);
（这里有个小问题，y轴是指向下的？y++反而是让图片向下移动，没弄懂，待解决）
来看看效果:
但是问题又来了,在跑完一次（一次绘制完毕）之后他就没东西渲染了,又变回空白了
所以我们在再弄一个context.drawImage并且让他从纵坐标-650开始
let x1 = 0;
let y1 = 0;
let x2 = 0;
let y2 = -650;
方法部分：
bg.addEventListener("load",()=>{
/*
callback: Function 表示回调函数
timeout: Number 表示每次调用函数所间隔的时间段
*/
setInterval(()=>{context.drawImage(bg,x1,y1++,480,650);
},10);
setInterval(()=>{context.drawImage(bg,x2,y2++,480,650);
},10);
})
（犯了个错误，应该把两个context.drawImage塞到同一个setInterval中，这样写不便于变量的管理）
还是那个问题，第二张图渲染完之后，再次遇到了空白的情况
所以，我们要想办法让他循环起来
思路如下：
尝试着让两张图循环渲染
流程如下：
第一张图开始渲染，
第一张图渲染结束，
第二张图开始渲染，
第二张图渲染结束，
第二张图渲染结束后，把第一张图的y坐标设为第二张图片渲染结束时尾部的坐标
再将第二张图片的y坐标重置到初始位置
问题就结解决了
代码如下：
我们用一个if语句去充值y坐标轴：
setInterval(()=>{
context.drawImage(bg,x1,y1++,480,650);
context.drawImage(bg,x2,y2++,480,650);
if(y2===0){
y1=0;
y2=-650;
}
},10);
来看看效果：
搞定咯：
全部代码如下：
<!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";
/*
image 加载的图片对象
dX为图片开始绘制的左上角横坐标
dY为图片开始绘制的左上角横坐标
dWidth为图片在canvas绘制的宽度
dHeight为图片在canvas绘制的宽度
*/
/*
首参为事件名
二参为一个回调函数,表示加载完毕后执行的代码
*/
bg.addEventListener("load",()=>{
/*
callback: Function 表示回调函数
timeout: Number 表示每次调用函数所间隔的时间段
*/
setInterval(()=>{
context.drawImage(bg,x1,y1++,480,650);
context.drawImage(bg,x2,y2++,480,650);
if(y2===0){
y1=0;
y2=-650;
} },10);
})
</script>
</body>
</html>
3.canvas的坐标：
这玩意跟我们平时数学上用的平面直角坐标系（笛卡尔坐标系）不同；
它Y轴是反着来的
That's all
Html飞机大战(一):绘制动态背景的更多相关文章
- android:怎样用一天时间，写出“飞机大战”这种游戏！（无框架-SurfaceView绘制）
序言作为一个android开发人员,时常想开发一个小游戏娱乐一下大家,今天就说说,我是怎么样一天写出一个简单的"飞机大战"的. 体验地址:http://www.wandoujia. ...
- canvas绘制“飞机大战”小游戏，真香！
canvas是ArkUI开发框架里的画布组件,常用于自定义绘制图形.因为其轻量.灵活.高效等优点,被广泛应用于UI界面开发中. 本期,我们将为大家介绍canvas组件的使用. 一.canvas介绍 1 ...
- 500行代码，教你用python写个微信飞机大战
这几天在重温微信小游戏的飞机大战,玩着玩着就在思考人生了,这飞机大战怎么就可以做的那么好,操作简单,简单上手. 帮助蹲厕族.YP族.饭圈女孩在无聊之余可以有一样东西让他们振作起来!让他们的左手 / 右 ...
- Java实现飞机大战游戏
飞机大战详细文档 文末有源代码,以及本游戏使用的所有素材,将plane2文件复制在src文件下可以直接运行. 实现效果: 结构设计 角色设计 飞行对象类 FlyObject 战机类 我的飞机 MyPl ...
- 【一】仿微信飞机大战cocos2d-x3.0rc1
參考 [偶尔e网事] 的 [cocos2d-x入门实战]微信飞机大战 cocos2dx 2.0版本号,偶尔e网事他写的很具体,面面俱到,大家很有必要看下.能够通过以下链接跳转: cocos2d-x入 ...
- Python小游戏之 - 飞机大战美女 !
用Python写的"飞机大战美女"小游戏 源代码如下: # coding=utf-8 import os import random import pygame # 用一个常量来存 ...
- 一、利用Python编写飞机大战游戏-面向对象设计思想
相信大家看到过网上很多关于飞机大战的项目,但是对其中的模块方法,以及使用和游戏工作原理都不了解,看的也是一脸懵逼,根本看不下去.下面我做个详细讲解,在做此游戏需要用到pygame模块,所以这一章先进行 ...
- Canvas：飞机大战 -- 游戏制作
Canvas:飞机大战 最开始我们要初始化信息,我们有五个状态:游戏封面,加载状态,运行状态,游戏暂停,游戏结束. 我们还需要 得分--score,生命--life. var START = 1;/ ...
- Python版飞机大战
前面学了java用java写了飞机大战这次学完python基础后写了个python版的飞机大战,有兴趣的可以看下. 父类是飞行物类是所有对象的父类,setting里面是需要加载的图片,你可以换称自己的 ...
随机推荐
- sap 调用Http 服务
REPORT ZMJ_GETAPI. DATA: LEN TYPE I, "发送报文长度 LEN_STRING TYPE STRING, URL TYPE STRING, "接口地 ...
- spring中的bean生命周期
1.实例化(在堆空间中申请空间,对象的属性值一般是默认值.通过调用createBeanInstance()方法进行反射.先获取反射对对象class,然后获取默认无参构造器,创建对象) 2.初始化(就是 ...
- sql-DCL用户及权限管理及其他常用命令-mysql
查看系统信息 SHOW PROCESSLIST -- 显示哪些线程正在运行 SHOW VARIABLES -- 显示系统变量信息 SELECT now(), user(), version(); -- ...
- 业务可视化-让你的流程图"Run"起来
前言 最近在研究业务可视化的问题,在日常的工作中,流程图和代码往往是分开管理的. 一个被维护多次的系统,到最后流程图和代码是否匹配这个都很难说. 于是一直有一个想法,让程序直接读流程图,根据流程图的配 ...
- 纪念我逝去的n个小时
纪念我逝去的n个小时 某人的惨案要我擦屁股=.= #include <bits/stdc++.h> using namespace std; template<class T> ...
- Java开发学习(八)----IOC/DI配置管理第三方bean、加载properties文件
前面的博客都是基于我们自己写的类,现在如果有需求让我们去管理第三方jar包中的类,该如何管理? 一.案例:数据源对象管理 本次案例将使用数据源Druid和C3P0来配置学习下. 1.1 环境准备 学习 ...
- nw.js的cookie操作
在实战中,我遇到nw.js cookie一个奇怪的现象. 当我写入cookie(非httponly)后,关闭nw.js.然后再打开nw.js发现cookie没有写入成功.经过摸索,发现 nw.js的c ...
- 如何用Python实现配置热加载？
背景 由于最近工作需求,需要在已有项目添加一个新功能,实现配置热加载的功能.所谓的配置热加载,也就是说当服务收到配置更新消息之后,我们不用重启服务就可以使用最新的配置去执行任务. 如何实现 下面我分别 ...
- SpringBoot之MongoDB附件操作
前言 近期自己针对附件上传进一步学习,为了弥足项目中文件上传的漏洞,保证文件上传功能的健壮性和可用性,现在我将自己在这一块的心得总结如下: 一.pom.xml依赖的引入 <dependency& ...
- 编译kubeadm使生成证书有效期为100年
目录 问题 编译 检查结果 问题 当我使用kubeadm部署成功k8s集群时在想默认生成的证书有效期是多久,如下所示 /etc/kubernetes/pki/apiserver.crt #1年有效期 ...