canvas 做一个小鸟运动的小游戏 (第二步) 使小鸟飞起来

摘要:
//让鸟儿飞翔的代码<!DOCTYPEhtml>&书信电报;htmllang=“en”>&书信电报;头部>&书信电报;元字符集=“UTF-8”>&书信电报;标题>标题</标题></头部>&书信电报;正文>&书信电报;canvaswidth=“500”></画布></正文&gt
//使小鸟飞起来的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas width="500"></canvas>
</body>
<script src="http://t.zoukankan.com/js/loadImage.js"></script>
<script>
var cvs = document.getElementById("cvs");
var ctx = cvs.getContext("2d");
/*创建一个天空的构造函数*/
function Sky( ctx, img, speed) {
//debugger;
this.ctx = ctx;
this.img = img;
this.speed = speed || 2;
/*创建一个实例,length就自增*/
Sky.len++;
console.log(Sky.len);
this.width = this.img.width;
//console.log(this.width);
this.height = this.img.height;
/*根据背景数量,动态计算起始的x轴坐标*/
this.x = this.width * ( Sky.len - 1 );
//console.log(this.x);
//this.x = 0;
this.y = 0;
}

/*创建一个鸟类的构造函数*/
function Bird(ctx, img, widthFrame, heightFrame,x,y) {
this.ctx = ctx;
this.img = img;
this.widthFrame = widthFrame;
this.heightFrame = heightFrame;
this.width = this.img.width/this.widthFrame;
this.height = this.img.height/this.heightFrame;
console.log(this.width,this.height);
this.x = x;
this.y = y;
this.currentFrame = 0;

/*小鸟下落速度*/
this.speed = 2;
this.speedPlus = 0.5;
}



/*给原型添加方法*/
Bird.prototype = {
constructor: Bird,
/*绘制鸟*/
draw: function () {
this.ctx.drawImage(this.img, this.currentFrame * this.width, 0, this.width, this.height, this.x, this.y, this.width, this.height)
},
update: function () {
this.currentFrame = ++this.currentFrame >= this.widthFrame? 0 : this.currentFrame;
this.y += this.speed;
this.speed += this.speedPlus;
},

/*绑定事件*/
_bind: function () {
var self = this;
this.ctx.canvas.addEventListener("click",function () {
self.speed = -2 ;
})
}

};


/*sky实例默认的数量*/
Sky.len = 0;
/*给原型扩充方法*/
Sky.prototype = {
constructor: Sky,
draw: function () {
this.ctx.drawImage(this.img, this.x, this.y);
},
update: function () {
this.x -= this.speed;
//console.log(sky.x);
if( Math.abs(this.x) >= this.width){
this.x += this.width *2;
}
}
}
</script>
<script>
loadImage({
bird: './images/bird.png',
land: './images/land.png',
pipeDown: './images/pipeDown.png',
pipeDown: './images/pipeDown.png',
sky: './images/sky.png'
},function ( imgObj) {

/*根据背景的大小设置画布的大小*/
cvs.width = imgObj.sky.width;
cvs.height = imgObj.sky.height;
/*创建两个天空的实例,两个实例是为了保证循环的连续性*/
var sky = new Sky(ctx, imgObj.sky,10);
var sky2 = new Sky(ctx, imgObj.sky,10);

/*创建鸟的实例*/
var bird = new Bird(ctx, imgObj.bird, 3, 1, 10,10);


setInterval(function () {
sky.draw();
sky.update();
/* sky.x -= sky.speed;
//console.log(sky.x);
if( Math.abs(sky.x) >= sky.width){
sky.x += sky.width *2;
}*/
sky2.draw();
sky2.update();
/* sky2.x -= sky2.speed;
if( Math.abs(sky2.x) >= sky2.width){
sky2.x += sky2.width *2;
}*/
bird.draw();
bird.update();
bird._bind();
},100);
})
</script>
</html>

结果如图所示:

canvas 做一个小鸟运动的小游戏 (第二步) 使小鸟飞起来第1张

免责声明:文章转载自《canvas 做一个小鸟运动的小游戏 (第二步) 使小鸟飞起来》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇广告嵌套document.write的非iframe方式的延迟加载无解嘛几篇关于MySQL数据同步到Elasticsearch的文章---第二篇:canal 实现Mysql到Elasticsearch实时增量同步下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

小程序canvas生成二维码图片踩的坑

1:生成临时图片,保证画布被加载以及渲染(即本身不可以 hidden 或是 上级元素不可以 hidden 或是 wx:if 隐藏等)  == 》 建议:因为 canvas 的组件层级(z-index)是最高的,无法通过层级改变,如自定义的弹框类似的组件总会被挡住   == 》 若不想给挡住,便要控制 canvas 隐藏(hidden 、 wx:if)  ...

WPF在圆上画出刻度线

思路 我们可以使用Ellipse先画出一个圆当背景,然后用Canvas再叠加画上刻度线,就能得到如下的效果 我们先用Ellipse画一个橙色的圆,然后将Canvas的宽度和高度绑定到Ellipse的宽度和高度 <Grid> <Ellipse Fill="Orange" Width="400" Height="400" N...

HTML5 Canvas显示本地图片实例1、Canvas预览图片实例1

1.前台代码: <input type="file" /> <canvas height="500"></canvas> <script > //读取本地文件 var inputOne = document.getElement...

canvas图片问题和移动端iOS系统onload事件失效的问题

canvas图片问题 做的一个项目需要将两张图片合成一张图片输出,想到可以用canvas来实现图片的合成 var self = this; var codeImg = document.getElementById("qrcode").getElementsByTagName("img")[0]; var bgImg = document.createE...

canvas 钟表

上周开始利用闲暇时间看html5 canvas技术。觉得非常好玩。就利用 canvas 做了一个简陋的钟表。源码非常简单,但是在制作的过程中,进入的误区却不少,浪费了很多时间。先上源码,然后在说说我走的岔路。 源码是基于 require.js 去写的,可以去 官网 了解 require.js 的详细资料。 1 define(function(){ 2...

cocos creator主程入门教程(一)—— 初识creator

五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑。本系列文章以TypeScript为介绍语言。 我们在cocos creator新建一个Hello TypeScript项目,都会有一个assets/Scene/helloworld.fire文件。使用cocos creator开发游戏时,项目可以只有一个.fire文件。一般地,我会把这个文件夹改名为asse...