其中一个画布背景是一张图片，还有小鸟，两个管子的图片。暂时不知道怎么附上去就不添加了。这里只有源代码，css和js都是在html写着的，感觉比他们的容易吧,hah
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>笨鸟先生</title>
<style>
*{margin: ;padding:;}
body,html{
width:%;
height:%;
}
canvas{
background: url("images/background.png");
background-repeat: repeat-x;
background-size: % %;
position: fixed;
}
#score{
position: absolute;
font-family:Times New Roman;
font-size: 80px;
font-weight: bold;
top:30px;
left:200px;
color:black;
}
.wraper{
width: %;
height:%;
position: absolute;
top:;
left:;
z-index: ;
background-color: ghostwhite;
opacity: 0.5;
display: none;
}
.scoreban{
position: absolute;
top:200px;
left:550px;
z-index: ;
font-family:Times New Roman;
font-size: 80px;
font-weight: bold;
display: none;
}
</style>
</head>
<body>
<canvas style=" display:block;width:100%;height:100%;" id="canvas">
</canvas>
<div class="wraper"> </div>
<div class="scoreban">
<p id="scoreban0"></p>
</div>
<p></p>
<div id="score">
<i id="scoreI"></i>
</div>
<video src="music/zbj.mp3" autoplay loop width="" height="" id="bgMusic"></video>
<script>
var score = document.getElementById('scoreI');
var scoreban0 = document.getElementById('scoreban0');
var wraper = document.getElementsByClassName('wraper')[];//背景色
var scoreban = document.getElementsByClassName('scoreban')[];
var oCanvas = document.getElementById("canvas");
var ctx = oCanvas.getContext("2d");
var birdPic = new Image();
var imgtop=; //小鸟默认高度
var i = ; //小鸟下落速度
var j = ;
var time;
function flyBird(){
birdPic.src = "images/avatar.png";
ctx.clearRect(,,,);
birdPic.onload = function (){
ctx.drawImage(birdPic,,imgtop,,);
}
imgtop+=i;
i=i+0.5;
}
document.onkeydown = function (event){//空格按键触发
if(event.keyCode == ){
j=j+;
imgtop-=j;
}
i=;
j=;
};
time = setInterval(flystop,);
//过柱子的数目
var q = ;
score.innerHTML = q; //默认为0 var stop = new Image();//上下两个柱子
var stop0 = new Image(); var stopsite = ;//默认柱子的开始位置
var toparr = [,,,,,,,,,];
function flystop(){
flyBird();
stop.src = "images/ob_bottom.png";
stop0.src = 'images/ob_top.png';
for(var t = ;t<;t++){
ctx.clearRect(stopsite+*t+,,,);
ctx.drawImage(stop0,stopsite+*t,,,toparr[t]);
ctx.drawImage(stop,stopsite+*t,toparr[t]+,,);
if(stopsite+*t <= && stopsite+*t > ){ //
if(imgtop<=toparr[t] || imgtop>=toparr[t]+){
clearInterval(time);
wraper.style.display = 'block';
scoreban.style.display = 'block';
scoreban0.innerHTML = 'GG,您的分数为：'+ (q-);
}
}
if(stopsite+*t ==){
score.innerHTML = q;
q++;
}
}
if(imgtop <= || imgtop>= ctx.canvas.height){//判断是否过界
clearInterval(time);
wraper.style.display = 'block';
scoreban.style.display = 'block';
scoreban0.innerHTML = 'GG,您的分数为：'+ q;
}
stopsite-=;
if(stopsite == -){
clearInterval(time);
wraper.style.display = 'block';
scoreban.style.display = 'block';
scoreban0.innerHTML = '恭喜你,你赢了0.0';
}
}
</script>
</body>
</html>