时间戳

首页 > 技术文章 > FlappyBird模拟（不完整版本）

FlappyBird模拟（不完整版本）

oorx 2017-12-25 20:39 原文

FlappyBird模拟（不完整版本）

准备材料

  1. land地

  2. sky天

  3. pipe管道

  1. bird小鸟

Land.js

function Land(info) {
    this.x = info.x;
    this.canvas = info.canvas;
    this.context = info.context;
    this.image = info.image;
    this.speed = 2;
}

Land.prototype = {
    constructor: Land,
    draw: function () {
        this.x -= this.speed;
        if (this.x <= -this.image.width) {
			//这里的3是画布中最多出现三个地板，最好也放在info传进来，但本例子就不传，直接写了
            this.x = 3 * this.image.width;
        }

        context.drawImage(this.image, this.x, this.canvas.height-this.image.height, this.image.width, this.image.height);
    }
}

Sky.js

function Sky(info) {
    this.x = info.x;
    this.context = info.context;
    this.canvas = info.canvas;
    this.image = info.image;
    this.speed = 2;
}

Sky.prototype = {
    constructor: Sky,

    //自已绘制自己
    draw: function () {
        //往左移动
        this.x -= this.speed;

        //当它移出舞台， 就马上跟到队伍的是后面
        if (this.x <= -this.canvas.width) {
            this.x = this.canvas.width;
        }

        //把自己绘制到画布上去
        this.context.drawImage(this.image, this.x, 0, this.canvas.width, this.canvas.height);
    }
}

Pipe.js

function Pipe(info) {
    //上面的部分的图片
    this.topImage = info.topImage;

    //下面的部分的图片
    this.bottomImage = info.bottomImage;

    //x
    this.x = info.x;

    this.canvas = info.canvas;
    this.context = info.context;

    //底部的间隔
    this.offsetY = info.offsetY;

    //柱子和柱子之是的间隔
    this.gap = info.gap;

    //速度
    this.speed = 2;

    //上下两根柱子的高度
    this.topHeight = 0;
    this.bottomHeight = 0;

    //调用一下initHeight
    this.initHeight();
}

Pipe.prototype = {
    constructor: Pipe,
    draw: function () {
        this.x -= this.speed;

        if (this.x <= - this.topImage.width) {
            this.initHeight();
            this.x = this.gap * 6 + this.topImage.width * 5;
        }

        //画上面的柱子
        this.context.drawImage(this.topImage, this.x, 0, this.topImage.width, this.topHeight);

        //画下面的柱子
        this.context.drawImage(this.bottomImage, this.x, this.topHeight + 100, this.bottomImage.width, this.bottomHeight);
    },

    //初始化柱子的高度
    initHeight: function () {
        //生成上半部分的柱子的高度， 100到250的一个随机值
        this.topHeight = 100 + 150 * Math.random();
        //100就是柱子上下之间的间隔
        this.bottomHeight = this.canvas.height - this.offsetY - this.topHeight - 100;
    }
}

index.js

//1. 加载出所有的图片
var birdsImg = new Image();
birdsImg.src = "./img/birds.png";

var landImg = new Image();
landImg.src = "./img/land.png";

var skyImg = new Image();
skyImg.src = "./img/sky.png";

var pipe1Img = new Image();
pipe1Img.src = "./img/pipe1.png";

var pipe2Img = new Image();
pipe2Img.src = "./img/pipe2.png";

var imagesArr = [birdsImg, landImg, skyImg, pipe1Img, pipe2Img];
var count = 0;

imagesArr.forEach(function (image) {
    image.onload = function () {
        count += 1;
        if (count == imagesArr.length) {
            //所有的角色的数组
            var rolesArr = [];
            //使用类来创建角色
            function createRoles() {
                //1. 创建所有的天空对象（生孩子）
                for (var i = 0; i<2; i++) {
                    var sky = new Sky({
                        x: i * canvas.width,
                        image: skyImg,
                        canvas: canvas,
                        context: context
                    })
                    rolesArr.push(sky);
                }
                //2. 创建所有的陆地对象（生孩子）
                for (var i = 0; i<4; i++) {
                    var land = new Land({
                        x: i * landImg.width,
                        canvas: canvas,
                        context: context,
                        image: landImg
                    });
                    rolesArr.push(land);
                }
                //3. 创建所有的管道对象（生孩）
                var gap = (canvas.width - 6 * pipe1Img.width)/5;
                for (var i = 0; i<6; i++) {
                    var pipe = new Pipe({
                        topImage: pipe2Img,
                        bottomImage: pipe1Img,
                        x: 300 + (pipe1Img.width + gap) * i,
                        canvas: canvas,
                        context: context,
                        offsetY: landImg.height,
                        gap: gap
                    });

                    rolesArr.push(pipe);
                }
            }
            //调用创建对象的方法
            createRoles();
            //开始action
            function action() {
                //1. 画布要清空
                context.clearRect(0, 0, canvas.width, canvas.height);
                //2. 角色就开始自己绘制自己
                rolesArr.forEach(function (role) {
                    role.draw();
                });
                //2. 添加动画
                window.requestAnimationFrame(action);
            }
            //开始绘制
            action();
        }
    }
})

推荐阅读