FlappyBird模拟（不完整版本）

FlappyBird模拟（不完整版本）

准备材料

1. land地
   

2. sky天
   

3. pipe管道
   

4. 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();
}
}
})