其中一个画布背景是一张图片，还有小鸟，两个管子的图片。暂时不知道怎么附上去就不添加了。这里只有源代码，css和js都是在html写着的，感觉比他们的容易吧,hah
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>笨鸟先生</title> <style> *{margin: 0;padding:0;} body,html{ 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{ 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;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>