用canvas和原生JS写的一个flappy bird游戏

为什么80%的码农都做不了架构师？>>>

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" charset="utf-8" content="width=device-width,user-scalable=no，initial-scale=1"/>
<style type="text/css">
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a, big, em, font, img, strong, tt, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
outline: none;
border: none;
resize: none;
word-break: break-all;
word-wrap: break-word;
}
html, body {
height: 100%;
margin: 0;
}
.body{width: 100%;height: 100%;background-color: #77c68b;}
#canvas{position: absolute;left:50%;margin-left: -400px;background-color: #fff;}
</style>

</head>
<body>
<div class="body">
<canvas id="canvas" width="800" height="800"></canvas>

</div>
<script type="text/javascript">
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
var birdCooed={
bodyro:0,
bodyY:400,
wingro:0,
wingX:130,
wingY:400,
eyero:1.2,
eyeX:165,
eyeY:395,
eyeballX:167,
eyeballY:390,
eyeballtoY:397,
mouthro:0,
mouthX:165,
mouthY:415
},pillarCooed;

}else if(pillarCooed.three.move<=185&&pillarCooed.three.move>=60&&(pillarCooed.three.th+20>=birdCooed.bodyY||775-pillarCooed.three.bh<=birdCooed.bodyY)){
that.end();

}else if(birdCooed.bodyY>=777){
that.end();
}else{
if((pillarCooed.one.move<=55||pillarCooed.two.move<=55||pillarCooed.three.move<=55)&&grademark){
grade++;
grademark=0;
}
}
//落下来
if(num>=90||birdCooed.bodyY<=23){

clearInterval(flyup);
flydown=setInterval(function(){
if(pillarCooed.one.move+80){pillarCooed.one.move-=1}else{pillarCooed.one.move=800;pillarCooed.one.th=50+Math.random()*500;pillarCooed.one.bh=600-pillarCooed.one.th;grademark=1;}
if(pillarCooed.two.move+80){pillarCooed.two.move-=1}else{pillarCooed.two.move=800;pillarCooed.two.th=50+Math.random()*500;pillarCooed.two.bh=600-pillarCooed.two.th;grademark=1;}
if(pillarCooed.three.move+80){pillarCooed.three.move-=1}else{pillarCooed.three.move=800;pillarCooed.three.th=50+Math.random()*500;pillarCooed.three.bh=600-pillarCooed.three.th;grademark=1;}
num=0;
birdCooed.bodyY+=3;
birdCooed.wingY+=3;
birdCooed.eyeY+=3;
birdCooed.eyeballY+=3;
birdCooed.eyeballtoY+=3;
birdCooed.mouthY+=3;
that.Scene(birdCooed,pillarCooed);
if(pillarCooed.one.move<=185&&pillarCooed.one.move>=60&&(pillarCooed.one.th+20>=birdCooed.bodyY||775-pillarCooed.one.bh<=birdCooed.bodyY)){
that.end();
}else if(pillarCooed.two.move<=185&&pillarCooed.two.move>=60&&(pillarCooed.two.th+20>=birdCooed.bodyY||775-pillarCooed.two.bh<=birdCooed.bodyY)){
that.end();

}else if(pillarCooed.three.move<=185&&pillarCooed.three.move>=60&&(pillarCooed.three.th+20>=birdCooed.bodyY||775-pillarCooed.three.bh<=birdCooed.bodyY)){
that.end();

}else if(birdCooed.bodyY>=777){
that.end();
}else{
if((pillarCooed.one.move<=55||pillarCooed.two.move<=55||pillarCooed.three.move<=55)&&grademark){
grade++;
grademark=0;
}
}
},1);
}

},1);

}
}
});
},
begin:function(){

context.beginPath();
context.fillStyle = '#ee6a39';
context.font = '50px Calibri';
context.fillText("开始游戏", 290,365);
context.font = '40px Calibri';
context.fillText("按space开始游戏",250,465);
context.rect(100,300,600,100);
context.fillStyle ="transparent";
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.lineJoin = 'miter';
context.stroke();
},
end:function(){
clearInterval(flydown);
clearInterval(flyup);
mark=false;
setTimeout(function(){
context.beginPath();
context.clearRect(0,0,canvas.width,canvas.height);
canvas.width=canvas.width;
context.fillStyle = '#ee6a39';
context.font = '50px Calibri';
context.fillText("游戏结束,得分："+grade+"",220,375);
context.lineJoin = 'miter';
context.stroke();
},1000)

//鸟
Scene:function(x,y){
context.beginPath();
context.clearRect(0,0,canvas.width,canvas.height);
canvas.width=canvas.width;
//柱子
context.beginPath();
context.rect(y.one.move,0,80, y.one.th);
context.fillStyle = "green";
context.fill();
context.lineWidth = 0;
context.strokeStyle = 'green';
context.lineJoin = 'miter';
context.stroke();
context.beginPath();
context.rect(y.one.move,800- y.one.bh,80, y.one.bh);
context.fillStyle = "green";
context.fill();
context.lineWidth = 0;
context.strokeStyle = 'green';
context.lineJoin = 'miter';
context.stroke();

context.beginPath();
context.rect(y.two.move,0,80, y.two.th);
context.fillStyle = "green";
context.fill();
context.lineWidth = 0;
context.strokeStyle = 'green';
context.lineJoin = 'miter';
context.stroke();
context.beginPath();
context.rect(y.two.move,800-y.two.bh,80, y.two.bh);
context.fillStyle = "green";
context.fill();
context.lineWidth = 0;
context.strokeStyle = 'green';
context.lineJoin = 'miter';
context.stroke();

context.beginPath();
context.rect(y.three.move,0,80, y.three.th);
context.fillStyle = "green";
context.fill();
context.lineWidth = 0;
context.strokeStyle = 'green';
context.lineJoin = 'miter';
context.stroke();
context.beginPath();
context.rect(y.three.move,800-y.three.bh,80, y.three.bh);
context.fillStyle = "green";
context.fill();
context.lineWidth = 0;
context.strokeStyle = 'green';
context.lineJoin = 'miter';
context.stroke();

//分数
context.beginPath();
context.fillStyle = '#ee6a39';
context.font = '50px Calibri';
context.fillText('得分：'+grade+'',50,50);
context.lineJoin = 'miter';
context.stroke();
//身体
context.save();
context.translate(150,x.bodyY);
context.rotate(Math.PI * x.bodyro);
context.scale(1.5, 1);
context.beginPath();
context.arc(0, 0, 20, 0, 2 * Math.PI, false);
context.restore();
context.fillStyle = "gold";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();
//翅膀
context.save();
context.translate(x.wingX, x.wingY);
context.rotate(Math.PI * x.wingro);
context.scale(1.4, 1);
context.beginPath();
context.arc(0, 0,10, 0, 2 * Math.PI, false);
context.restore();
context.fillStyle = "gold";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();
//眼睛
context.save();
context.translate(x.eyeX, x.eyeY);
context.rotate(Math.PI * x.eyero);
context.scale(1.2, 1);
context.beginPath();
context.arc(0, 0,10, 0, 2 * Math.PI, false);
context.restore();
context.fillStyle = "#fff";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();
//眼珠
context.beginPath();
context.moveTo(x.eyeballX, x.eyeballY);
context.lineTo(x.eyeballX, x.eyeballtoY);
context.lineWidth = 5;
context.strokeStyle = '#000';
context.stroke();
//嘴
context.translate(x.mouthX, x.mouthY);
context.rotate(Math.PI * x.mouthro);
context.scale(2.5, 1);
context.beginPath();
context.arc(0, 0,7, 0, 2 * Math.PI, false);
context.restore();
context.fillStyle = "#ee6a39";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(0,0);
context.lineTo(7,0);
context.lineWidth = 1;
context.strokeStyle = '#000';
context.stroke();
context.stroke();
},
//柱子高度
pillar:function(x,y,z){

_pth=50+Math.random()*500;
_pbh=600-_pth;
_pth1=50+Math.random()*500;
_pbh1=600-_pth1;
_pth2=50+Math.random()*500;
_pbh2=600-_pth2;
return {
one:{th:_pth,bh:_pbh,move:x},
two:{th:_pth1,bh:_pbh1,move:y},
three:{th:_pth2,bh:_pbh2,move:z}
};
}

};

flappybird.init();
</script>
</body>
</html>

转载于:https://my.oschina.net/Ztachi/blog/358118

用canvas和原生JS写的一个flappy bird游戏相关推荐

JavaScript：原生js写的一个多按钮Popover 弹出框
效果如图需求:点击按钮弹出,如果不进行其他操作则弹出层延时消失,点击另一个按钮时清楚其他弹窗思路:先完成一个具有弹出层的按钮的样式,使用伪元素定位到按钮上方,加入定时器使其自动消失,当点击另一个按 ...
js 取得input绑定的datalist中的值_原生JS写一个ToDo Demo
周六加班没什么事,于是乎...上班摸鱼,用原生JS写了一个ToDo Demo,废话少叙,直接看效果: 如图,实现了以下需求(以下的具体实现我会一一道来): 0.页面的基本布局: 1.rem布局.在不同 ...
原生JS写仿淘宝搜索框（代码+效果），可实现3级搜索哦！
闲来无事,用原生JS写了一个淘宝搜索框,用的淘宝的接口,可直接进行商品搜索. 写在前面: 1.记得引用jquery啊! 2.有人私信我说css样式不能用,那是因为复制代码的时候,有空格,只需要自己把c ...
【Python】使用Pygame做一个Flappy bird小游戏（二）
需要图片素材,音乐素材的朋友可以到我公众号[拇指笔记]后台回复"FPB"自取做一个Flappy bird游戏的第二步就是按键检测.Flappy bird只需要用一个按键控制小鸟的 ...
vue如何使用原生js写动画效果_原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
HTML+CSS+原生JS写一个简易的音乐播放器（仅播放一首歌）
用HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌) 效果如下:(鼠标点击按钮可以实现播放或暂停,按钮会旋转,实现了歌词同步,功能还需改进) 代码如下: <!DOCTYPE htm ...
html怎么引轮播图插件,原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
如何上传图片到fileupload空间_如何用原生js写图片上传组件v2.0（还有新版本）？...
js图片上传组件: 基本要求: 1.上传的图片可预览,可删除,可被覆盖更新 2.要求图片格式为jpg和png,大小不能超过2M 新加需求: 1.模拟回显,可用本地存储(实际上的回显是通过后台传过来的u ...
用JS写了一个模拟串行加法器
在重温<编码:隐匿在计算机软硬件背后的语言>第12章--二进制加法器时,心血来潮用JS写了一个模拟串行加法器. 测试断言工具TestUtils.js function assertTrue ...

用canvas和原生JS写的一个flappy bird游戏

用canvas和原生JS写的一个flappy bird游戏相关推荐

最新文章

热门文章