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

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

 

我们先从背景开始弄吧!

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. 五种方式实现 Java 单例模式

    前言 单例模式(Singleton Pattern)是 Java 中最简单的设计模式之一.这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式. 这种模式涉及到一个单一的类,该类负责创建自 ...

  2. 3D大场景展示功能你了解多少？见详解！

    裸眼3D技术的出现打破了真实与虚拟的界限,人们不仅希望能够体验奇妙的虚拟场景,也希望足不出户在短短几分钟内就能看到遍布各地的场景,希望能实时对接关键数据. 裸眼3D技术的出现打破了真实与虚拟的界限,人 ...

  3. Python音频处理基础知识，这不是轻轻松松~~~

    大家好鸭,我是小熊猫 咱今天来讲一讲音频处理的基础知识上才艺~~~ 1.声音的基础 2.python读取.wav音频 欢迎加入白嫖Q群:660193417### import wave import ...

  4. Multiparty Cardinality Testing for Threshold Private Set-2021：解读

    本文记录阅读该论文的笔记. 本文基于阈值加法同态加密方案提出了一个新的允许\(N\)方检查其输入集的交集是否大于\(n-t\)的IPSI方案,该协议的通信复杂度为\(O(Nt^2)\). 注意:\(N ...

  5. 【微服务专题之】.Net6下集成消息队列上-RabbitMQ

    ​ 微信公众号:趣编程ACE关注可了解更多的.NET日常实战开发技巧,如需源码 请公众号后台留言 源码;[如果觉得本公众号对您有帮助,欢迎关注] .Net中RabbitMQ的使用 [微服务专题之].N ...

  6. 没想到吧，Spring中还有一招集合注入的写法

    原创:微信公众号 码农参上,欢迎分享,转载请保留出处. 哈喽大家好啊,我是Hydra. Spring作为项目中不可缺少的底层框架,提供的最基础的功能就是bean的管理了.bean的注入相信大家都比较熟 ...

  7. Unity3D学习笔记8——GPU实例化(3)

    目录 1. 概述 2. 详论 2.1. 自动实例化 2.2. MaterialPropertyBlock 3. 参考 1. 概述 在前两篇文章<Unity3D学习笔记6--GPU实例化(1)&g ...

  8. @RequestBody，@RequestParam是否能随意改变入参字母大小写

    在工作中遇到了一个问题,很多接口有的入参是companyName,有的入参是companyname,实际上,这两入参能任意适配所有接口,甚至随意改变大小写! 1. @RequestBody是完全按照驼 ...

  9. 挑战30天写操作系统-day2-汇编语言学习与Makefile入门

    1.介绍文本编辑器 这里,我们直接采用自己windows电脑自带的文本编辑器即可以完成制作要求 2.继续开发 下面先是对昨天使用的helloos.nas文件内容进行详细解释 ; hello-os ; ...

  10. 发现Mapstruct的一个bug

    前言 在一次需求的开发过程中,发现一个对象插入数据库时某个字段总是为空.简化后的代码如下: @Autowired private PersonService personService; public ...