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

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

 

我们先从背景开始弄吧!

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. SAP Drag or drop tree

    1 *&---------------------------------------------------------------------* 2 *& Report RSDEM ...

  2. Leetcode----<Re-Space LCCI>

    题解如下: /** * 动态规划解法: * dp[i] 表示 0-i的最小不能被识别的字母个数 * 求 dp[k] 如果第K个字母 不能和前面的字母[0-{k-1}]合在一起被识别 那么dp[k] = ...

  3. Docker 与 K8S学习笔记（二十四）—— 工作负载的使用

    我们前面讲了很多关于Pod的使用,但是在实际应用中,我们不会去直接创建Pod,我们一般通过Kubernetes提供的工作负载(Deployment.DeamonSet.StatefulSet.Job等 ...

  4. zabbix-5.0自动发现

    1. 安装zabbix5.0 rpm -Uvh https://repo.zabbix.com/zabbix/5.0/rhel/7/x86_64/zabbix-release-5.0-1.el7.no ...

  5. rhel挂载本地光盘为yum源

    挂载光盘 mount /dev/sr0 /mnt/cdrom mkdir /mnt/cdrom 临时挂载 mount /dev/sr0 /mnt/cdrom 永久挂载光盘 mount -a 执行挂载 ...

  6. svn提交报错Unexpected HTTP status 413 'Request Entity Too Large' on

    问题原因:nginx的client_max_body_size设置过小,默认 1M,如果请求的正文数据大于client_max_body_size,HTTP协议会报错 413 Request Enti ...

  7. [ARC087D] Squirrel Migration 补题记录

    题目链接 简要题意: 给你一个\(N\)个节点的树,求一个\(1\cdots N\)的排列\((p_1,p_2,\cdots p_N)\) ,使得\(\sum dist(i,p_i)\)最大. 求这样 ...

  8. Java8 函数式【1】：一文读懂逆变

    Java8 函数式[1]:一文读懂逆变 禁止转载 pure function 协变 逆变 Java8 引入了函数式接口,从此方法传参可以传递函数了,有人说: 不就是传一个方法吗,语法糖! lambda ...

  9. jupyter 反向代理配置

    抓了下包,看了一下WS连不上,参考这个,问题解决 location / { proxy_pass http://127.0.0.1:8813/; # JUPYTER_PORT 为 Jupyter 运行 ...

  10. HBase学习（二） 基本命令 Java api

    一.Hbase shell 1.Region信息观察 创建表指定命名空间 在创建表的时候可以选择创建到bigdata17这个namespace中,如何实现呢? 使用这种格式即可:'命名空间名称:表名' ...