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