>  기사  >  웹 프론트엔드  >  HTML5는 편평하게 던지는 동작을 시뮬레이션합니다(작은 공의 편평하게 던지는 동작 프로세스 시뮬레이션)_html5 튜토리얼 기술

HTML5는 편평하게 던지는 동작을 시뮬레이션합니다(작은 공의 편평하게 던지는 동작 프로세스 시뮬레이션)_html5 튜토리얼 기술

WBOY
WBOY원래의
2016-05-16 15:48:562712검색

물체가 일정한 초기 속도로 수평 방향으로 던져지는 경우 물체가 중력의 영향만 받는 경우 이러한 동작을 수평 던지기 동작이라고 합니다. 수평 던지기 운동은 수평 방향의 등속 직선 운동과 수직 방향의 자유 낙하 운동이 결합된 운동으로 간주할 수 있습니다. 수평 운동하는 물체에 작용하는 순 외력은 일정한 힘이므로 수평 운동하는 물체의 운동은 등속 가변 속도 곡선 운동이고, 수평으로 던져진 물체의 궤적은 포물선입니다. 수평 던지기 동작은 곡선 동작입니다. 수평 던지기 동작의 시간은 투척 지점의 수직 높이에만 관련됩니다. 착지하는 물체의 수평 변위는 시간(수직 높이) 및 수평 초기 속도와 관련이 있습니다.


코드 복사
코드는 다음과 같습니다.

>

html5 cannonball<br><script>//box <br />var box_x=0 ; <br />var box_y=0; <br />var box_height=300; <br />var ball_x=10; <br />var ball_vx=10; <br />var ball_vy=0; <br />//constant <br />var g=10;//note <br />var rate=0.9; varbound_left=box_x ball_radius; <br />varbound_top=box_y ball_radius; <br />varbound_bottom=box_height-ball_radius <br />var ctx; 🎜>함수 초기화() <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); .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; =ball_vy; <br />ball_vy=ball_vy g; <br />if(cur_ball_x<bound_left) <br />cur_ball_x=bound_left <br />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; ball_vx=-ball_vx*0.9; =ball_vy*0.9; <br />} <br />if(cur_ball_y<bound_top) <br />{ <br />cur_ball_y=bound_top; <br />ball_vx=ball_vx*0.9; >} <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; cur_ball_x <br />ball_y=cur_ball_y; <br /></script> <br /></head><body onLoad="init()"> id="canvas" width="400" height="400"/> <br /></body> <br /></html> <br /><br /><br />html5 시뮬레이션 공 던지기 동작 과정 .</script>
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.