<!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>
|