canvas学习day3——flappy_bird扑扇的小鸟1绘制背景图

最新推荐文章于 2021-09-21 19:21:41 发布

熊熊举高高

最新推荐文章于 2021-09-21 19:21:41 发布

阅读量775

点赞数

CC 4.0 BY-SA版权

文章标签： canvas

本文链接：https://blog.csdn.net/weixin_41571938/article/details/116340389

这篇博客介绍了使用canvas制作Flappy Bird游戏的第三天学习内容，主要涉及背景图的绘制和小鸟的朝向、宽度、高度设定。通过构造函数Sky实现背景的无限滚动，并利用drawImage函数绘制图像。同时，博客提到了鼠标点击控制小鸟飞行以及游戏碰撞检测的基本实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

flappy_bird
通过鼠标的点击来控制小鸟躲避管道
涉及知识
混入式继承

构造函数

drawimage函数
涉及问题
1、绘图
大地
鸟朝向宽度高度
无线刷新的管道随机出现无线刷新随机高度
背景图天空
2、事件
点击鼠标控制鸟的飞行高度，不点击时小鸟会自动下落
小鸟碰撞到管道则结束游戏

主要函数
1、绘制背景
construcotor { Sky } 背景构造函数
parasm { ctx: Context } 绘制环境
parasm { img: Image } 背景图像
parasm { speed: number } 背景速度

绘制天空，也就是背景板
为了实现背景无限轮播，所以需要两块背景

var sky = new Sky( ctx, imgObj.sky, 3 );
var sky2 = new Sky( ctx, imgObj.sky, 3 );

在这里插入图片描述

如果有两张背景图（两实例的话）那么第二张图的X的坐标就会等于this.width*1 所以下面这个代码就是这样
this.x = this.width * ( Sky.len - 1 );

function Sky( ctx, img, speed ) {

            this.ctx = ctx;
            this.img = img;
            this.width = this.img.width;
            this.height = this.img.height;
            this.speed = speed || 2;

            // 每创建一个实例，len自增
            Sky.len++;
            //设置每张背景图的X Y 轴坐标
            this.x = this.width * ( Sky.len - 1 );
            this.y = 0;
        }

        // 背景实例的个数
        Sky.len = 0;


        // 给原型扩充方法
        Sky.prototype = {

            constructor: Sky,

            // 绘制背景
            draw: function() {
                this.ctx.drawImage( this.img, this.x, this.y );
            },
            //利用背景图移动的速度 修改x的坐标值，也就能够造成背景图缓慢向左移动的效果，当整个背景图移出去的时候，就将其赋值为原先的值
            update: function() {
                this.x -= this.speed;
                if ( this.x <= -this.width ) {
                    this.x += this.width * Sky.len;
                }
            }

        };