html5模拟平抛运动(模拟小球平抛运动过程)_html5教程技巧

<script> <br />//box <br />var box_x=0; <br />var box_y=0; <br />var box_width=300; <br />var box_height=300; <br />//ball <br />var ball_x=10; <br />var ball_y=10; <br />var ball_radius=10; <br />var ball_vx=10; <br />var ball_vy=0; <br />//constant <br />var g=10;//note <br />var rate=0.9; <br />//bound <br />var bound_left=box_x+ball_radius; <br />var bound_right=box_x+box_width-ball_radius; <br />var bound_top=box_y+ball_radius; <br />var bound_bottom=box_y+box_height-ball_radius; <br />//context <br />var ctx; <br />function init() <br />{ <br />ctx=document.getElementById('canvas').getContext('2d'); <br />ctx.lineWidth=ball_radius; <br />ctx.fillStyle="rgb(200,0,50)"; <br />move_ball(); <br />setInterval(move_ball,100); <br />} <br />function move_ball() <br />{ <br />ctx.clearRect(box_x,box_y,box_width,box_height); <br />move_and_check(); <br />ctx.beginPath(); <br />ctx.arc(ball_x,ball_y,ball_radius,0,Math.PI*2,true); <br />ctx.fill(); <br />ctx.strokeRect(box_x,box_y,box_width,box_height); <br />} <br />function move_and_check() <br />{ <br />var cur_ball_x=ball_x+ball_vx; <br />var temp=ball_vy; <br />ball_vy=ball_vy+g; <br />var cur_ball_y=ball_y+ball_vy+g/2; <br />if(cur_ball_x<bound_left) <br />{ <br />cur_ball_x=bound_left; <br />ball_vx=-ball_vx*0.9; <br />ball_vy=ball_vy*0.9; <br />} <br />if(cur_ball_x>bound_right) <br />{ <br />cur_ball_x=bound_right; <br />ball_vx=-ball_vx*0.9; <br />ball_vy=ball_vy*0.9; <br />} <br />if(cur_ball_y<bound_top) <br />{ <br />cur_ball_y=bound_top; <br />ball_vy=-ball_vy*0.9; <br />ball_vx=ball_vx*0.9; <br />} <br />if(cur_ball_y>bound_bottom) <br />{ <br />cur_ball_y=bound_bottom; <br />ball_vy=-ball_vy*0.9; <br />ball_vx=ball_vx*0.9; <br />} <br />ball_x=cur_ball_x; <br />ball_y=cur_ball_y; <br />} <br /></script>