|
发表于 2018-9-24 21:52:20
|
显示全部楼层
- <!DOCTYPE html>
- <html>
- <head>
- <title>17</title>
- <meta charset="utf-8">
- <script type="text/javascript">
- window.onload=function(){
- var isp=document.getElementById("isp");
- var canvas=document.getElementById("goon");
- var mycanvas=canvas.getContext("2d");
- // 创建球对象
- mycanvas.fillStyle="black";//填充颜色
- mycanvas.strokeStyle="red";//描边颜色
- var ball=function(x,y,r){
- this.x=x;
- this.y=y;
- this.r=r;
- this.draw=function(){//画求方法
- mycanvas.beginPath();
- mycanvas.arc(this.x,this.y,this.r,0,2*Math.PI,false);
- mycanvas.stroke();//描边
- };
- };
- var y=10;
- var jul=100;
- var ball=new ball(40,y,10);
- mycanvas.fill();
- var n=100;
- var change=true;//下落或弹起
- var start=setInterval(function(){yid(100),50})
- //下落运动主函数
- function yid(h){//n=下落高度,h=下路高度减去球大小
- if(n==0){//下落高度为0是停止
- clearInterval(start);
- isp.innerHTML="铁球总共运动:"+jul;
- }
- if(change){
- if(ball.y<h){
- y++;}
- if(ball.y==h){
- if(change){
- n=Math.floor(n/2)
- jul+=n;
- change=false;}
- }
- }
- else{
- if(ball.y>h-n){
- y--;}
- if(ball.y==h-n){
- jul+=n;
- change=true;
- }
- }
- mycanvas.clearRect(29,0,30,h+10);
- ball.y=y;
- ball.draw();
- mycanvas.fill();
- }
- }
- </script>
- </head>
- <body>
- <canvas id="goon" width="" height="110"></canvas>
- <p id="isp"></p>
- </body>
- </html>
复制代码 |
|