源码点此下载，用chrome浏览器打开index.html观看。
图例：
代码：
<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>飞越河谷的战机1.04 19.3.13 16:54 by:逆火狂飙 horn19782016@163.com</title> <style> *{ margin:1px; padding:1px; } #canvas{ background:#ffffff; } #controls{ float:left; } </style> </head> <body onload="init()"> <table border="0px"> <tr> <td width="50px"valign="top"> <div id="controls"> <input id='animateBtn' type='button' value='运动'/> </div> </td> <td width="100%" align="center"> <canvas id="canvas" width="1200px" height="562px" > 出现文字表示你的浏览器不支持HTML5 </canvas> </td> </tr> </table> <div> </div> </body> </html> <script type="text/javascript"> <!-- var paused=true; animateBtn.onclick=function(e){ paused=! paused; if(paused){ animateBtn.value="运动"; }else{ animateBtn.value="暂停"; window.requestAnimationFrame(animate); } } var ctx; // 绘图环境 var bg; // 背景 var lastTime=0; var fps=0; function init(){ bg=new Background(); var canvas=document.getElementById('canvas'); canvas.width=bg.width*6; canvas.height=bg.height*4; ctx=canvas.getContext('2d'); lastTime=+new Date; }; function update(){ } function draw(){ ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); fps=calculateFps(new Date); bg.setOffset(fps); var bgImg=bg.getImage(); ctx.drawImage(bgImg,0,bg.height-bg.Offset,bg.width,bg.Offset,0,0,ctx.canvas.width,4*bg.Offset); ctx.drawImage(bgImg,0,0,bg.width,bg.height-bg.Offset,0,4*bg.Offset,canvas.width,canvas.height-4*bg.Offset); var plane1=new Image(); plane1.src="1.png"; ctx.drawImage(plane1,ctx.canvas.width/2-280,canvas.height-100); var plane2=new Image(); plane2.src="2.png"; ctx.drawImage(plane2,ctx.canvas.width/2-200,canvas.height-100); var plane3=new Image(); plane3.src="3.png"; ctx.drawImage(plane3,ctx.canvas.width/2-120,canvas.height-100); var plane4=new Image(); plane4.src="4.png"; ctx.drawImage(plane4,ctx.canvas.width/2-40,canvas.height-100); var plane5=new Image(); plane5.src="5.png"; ctx.drawImage(plane5,ctx.canvas.width/2+80,canvas.height-100); var plane6=new Image(); plane6.src="6.png"; ctx.drawImage(plane6,ctx.canvas.width/2+200,canvas.height-100); var e1=new Image(); e1.src="e1.png"; ctx.drawImage(e1,ctx.canvas.width/2-280,100); var e2=new Image(); e2.src="e2.png"; ctx.drawImage(e2,ctx.canvas.width/2-200,100); var e3=new Image(); e3.src="e3.png"; ctx.drawImage(e3,ctx.canvas.width/2-120,110); var e4=new Image(); e4.src="e4.png"; ctx.drawImage(e4,ctx.canvas.width/2-20,80); var e5=new Image(); e5.src="e5.png"; ctx.drawImage(e5,ctx.canvas.width/2+80,130); var e6=new Image(); e6.src="e6.png"; ctx.drawImage(e6,ctx.canvas.width/2+160,100); var e7=new Image(); e7.src="e7.png"; ctx.drawImage(e7,ctx.canvas.width/2-280,200); var e8=new Image(); e8.src="e8.png"; ctx.drawImage(e8,ctx.canvas.width/2-120,200); /* ctx.font="bold 16px 宋体"; ctx.fillStyle='white'; ctx.fillText("FPS:"+Math.floor(fps),20,40); */ } function calculateFps(now){ var retval=1000/(now-lastTime); lastTime=now; // console.log("fps",retval) return retval; } function animate(){ if(!paused){ update(); draw(); } window.requestAnimationFrame(animate); } //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>点类定义开始>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Point=function(x,y){ this.x=x; this.y=y; } Point.prototype={ x:0, // 横坐标 y:0, // 纵坐标 } //<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<点类定义结束<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>背景类定义开始>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Background=function(){ this.width=104; this.height=156; this.files=['bgBlue.jpg','bgRiver.jpg','bgSky.jpg','bgVolcano.jpg']; this.Offset=0; this.velocity=40; } Background.prototype={ 104, // 背景图片原始宽度 height:156, // 背景图片原始高度 files:[], // 图片数组 Offset:0, // 偏移值 velocity:40, // 背景移动速度 loopValue:0, // 循环累加值,用来确定时哪一张图片 getImage:function(){ this.loopValue++; if(this.loopValue>=3999){ this.loopValue=0; } var index=Math.floor(this.loopValue/1000); var img=new Image(); img.src=this.files[index]; return img; }, setOffset:function(fps){ this.Offset=this.Offset<this.height?this.Offset+this.velocity/fps:0; }, } //<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<背景类定义结束<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< //--> </script>
2019年3月13日18点32分