好家伙,飞机大战终于开始弄了

这会有很多很多复杂的东西,但是我们总要从最简单,和最基础的部分开始,

 

我们先从背景开始弄吧!

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飞机大战(一):绘制动态背景的更多相关文章

  1. android:怎样用一天时间，写出“飞机大战”这种游戏！（无框架-SurfaceView绘制）

    序言作为一个android开发人员,时常想开发一个小游戏娱乐一下大家,今天就说说,我是怎么样一天写出一个简单的"飞机大战"的. 体验地址:http://www.wandoujia. ...

  2. canvas绘制“飞机大战”小游戏，真香！

    canvas是ArkUI开发框架里的画布组件,常用于自定义绘制图形.因为其轻量.灵活.高效等优点,被广泛应用于UI界面开发中. 本期,我们将为大家介绍canvas组件的使用. 一.canvas介绍 1 ...

  3. 500行代码，教你用python写个微信飞机大战

    这几天在重温微信小游戏的飞机大战,玩着玩着就在思考人生了,这飞机大战怎么就可以做的那么好,操作简单,简单上手. 帮助蹲厕族.YP族.饭圈女孩在无聊之余可以有一样东西让他们振作起来!让他们的左手 / 右 ...

  4. Java实现飞机大战游戏

    飞机大战详细文档 文末有源代码,以及本游戏使用的所有素材,将plane2文件复制在src文件下可以直接运行. 实现效果: 结构设计 角色设计 飞行对象类 FlyObject 战机类 我的飞机 MyPl ...

  5. 【一】仿微信飞机大战cocos2d-x3.0rc1

    參考 [偶尔e网事] 的 [cocos2d-x入门实战]微信飞机大战  cocos2dx 2.0版本号,偶尔e网事他写的很具体,面面俱到,大家很有必要看下.能够通过以下链接跳转: cocos2d-x入 ...

  6. Python小游戏之 - 飞机大战美女 !

    用Python写的"飞机大战美女"小游戏 源代码如下: # coding=utf-8 import os import random import pygame # 用一个常量来存 ...

  7. 一、利用Python编写飞机大战游戏-面向对象设计思想

    相信大家看到过网上很多关于飞机大战的项目,但是对其中的模块方法,以及使用和游戏工作原理都不了解,看的也是一脸懵逼,根本看不下去.下面我做个详细讲解,在做此游戏需要用到pygame模块,所以这一章先进行 ...

  8. Canvas：飞机大战 -- 游戏制作

    Canvas:飞机大战 最开始我们要初始化信息,我们有五个状态:游戏封面,加载状态,运行状态,游戏暂停,游戏结束. 我们还需要  得分--score,生命--life. var START = 1;/ ...

  9. Python版飞机大战

    前面学了java用java写了飞机大战这次学完python基础后写了个python版的飞机大战,有兴趣的可以看下. 父类是飞行物类是所有对象的父类,setting里面是需要加载的图片,你可以换称自己的 ...

随机推荐

  1. 记录人生中的第一个bug

    对象的引用 使用**只是拷贝了字典的最外层,加个deepcopy可以实现深拷贝,递归的去复制对象 bug来源: 在一次将数据库里的数据转成json格式过程中,在遍历数据库对象时,对象的引用不当,导致最 ...

  2. 编程技巧│提高 Javascript 代码效率的技巧

    目录 一.变量声明 二.三元运算符 三.解构赋值 四.解构交换 五.箭头函数 六.字符串模版 七.多值匹配 八.ES6对象简写 九.字符串转数字 十.次方相乘 十一.数组合并 十二.查找数组最大值最小 ...

  3. UiPath循环活动Do While的介绍和使用

    一.Do While的介绍 先执行循环体, 再判断条件是否满足, 如果满足, 则再次执行循环体, 直到判断条件不满足, 则跳出循环 二.Do While在UiPath中的使用 1. 打开设计器,在设计 ...

  4. 疫情在校学生之——用python对某校园热水服务app进行测试，实现自动免费用水（仅供参考）

    写在前面的过场话: 本文只是对某校园热水服务app做个测试,其实本人并没有做大坏事,并未传播相关技术,文章以下内容的敏感部分会打码,并且相关厂商已经正在进行漏洞修复,大家看看就好.文章后会提供&quo ...

  5. Markdown第一次学习

    # # Markdown学习 一级标题: #空格+标题名称+回车得到一级标题 ## 二级标题 一级标题方法中变成两个##号 ### 三级标题 变成三个###号,以此类推,最多到六级标题 ## 字体 h ...

  6. typescript+webpack构建一个js库

    依赖说明 入口文件 tsconfig配置 webpack配置文件 webpack入口文件配置 webpack为typescript和less文件配置各自的loader webpack的output配置 ...

  7. C# / VB.NET 将Html转为Word

    本文分享以C#程序代码为例,实现将Html文件转换Word文档的方法(附VB.NET代码).在实际转换场景中可参考本文的方法,转换前,请按照如下方法引用Word API的dll文件到Visual St ...

  8. Graph Neural Networks：谱域图卷积

    以下学习内容参考了:1,2, 0.首先回忆CNN,卷积神经网络的结构和特点 处理的数据特征:具有规则的空间结构(Euclidean domains),都可以采用一维或者二维的矩阵描述.(Convolu ...

  9. Linux操作系统（7）：rpm包管理和yum软件包在线管理

    一.rpm 包的管理 介绍:一种用于互联网下载包的打包及安装工具,它包含在某些 Linux 分发版中.它生成具有.RPM 扩展名的文件.RPM 是 RedHat Package Manager(Red ...

  10. java的Test 如何使用@Autowired注解

    1.配置来至bean.xml @RunWith(SpringJUnit4ClassRunner.class) @ContextConfiguration(locations = "class ...