用canvas和原生JS写的一个flappy bird游戏
<!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;
var mark=true,flyup,flydown,num= 0,grade= 0,grademark=1;
var flappybird={
init:function(){
that=this;
pillarCooed=that.pillar(800,1090,1380); //构建柱子
that.begin(); //开始页面
document.addEventListener("keydown",function (e) {
var e = e || window.event || arguments.callee.caller.arguments[0];
if(e.keyCode==32){
if(mark){ //判断游戏是否为开始状态
num=0;
clearInterval(flydown);
clearInterval(flyup);
//点击往上飞
flyup=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;}
birdCooed.bodyY-=3;
birdCooed.wingY-=3;
birdCooed.eyeY-=3;
birdCooed.eyeballY-=3;
birdCooed.eyeballtoY-=3;
birdCooed.mouthY-=3;
num+=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;
}
}
//落下来
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>
<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;
var mark=true,flyup,flydown,num= 0,grade= 0,grademark=1;
var flappybird={
init:function(){
that=this;
pillarCooed=that.pillar(800,1090,1380); //构建柱子
that.begin(); //开始页面
document.addEventListener("keydown",function (e) {
var e = e || window.event || arguments.callee.caller.arguments[0];
if(e.keyCode==32){
if(mark){ //判断游戏是否为开始状态
num=0;
clearInterval(flydown);
clearInterval(flyup);
//点击往上飞
flyup=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;}
birdCooed.bodyY-=3;
birdCooed.wingY-=3;
birdCooed.eyeY-=3;
birdCooed.eyeballY-=3;
birdCooed.eyeballtoY-=3;
birdCooed.mouthY-=3;
num+=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;
}
}
//落下来
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>