DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> html5模擬平拋運動(模擬小球平拋運動過程)
html5模擬平拋運動(模擬小球平拋運動過程)
編輯:HTML5詳解     

物體以一定的初速度沿水平方向拋出,如果物體僅受重力作用,這樣的運動叫做平拋運動。平拋運動可看作水平方向的勻速直線運動以及豎直方向的自由落體運動的合運動。平拋運動的物體,由於所受的合外力為恆力,所以平拋運動是勻變速曲線運動,平拋物體的運動軌跡為一拋物線。平拋運動是曲線運動 平拋運動的時間僅與拋出點的豎直高度有關;物體落地的水平位移與時間(豎直高度)及水平初速度有關。


復制代碼代碼如下:
<Html> 
<head> 
<meta charset=utf-8> 
<title>Html5炮彈</title> 
<script> 
//box 
var box_x=0; 
var box_y=0; 
var box_width=300; 
var box_height=300; 
//ball 
var ball_x=10; 
var ball_y=10; 
var ball_radius=10; 
var ball_vx=10; 
var ball_vy=0; 
//constant 
var g=10;//note 
var rate=0.9; 
//bound 
var bound_left=box_x+ball_radius; 
var bound_right=box_x+box_width-ball_radius; 
var bound_top=box_y+ball_radius; 
var bound_bottom=box_y+box_height-ball_radius; 
//context 
var ctx; 
function init() 

ctx=document.getElementById('canvas').getContext('2d'); 
ctx.lineWidth=ball_radius; 
ctx.fillStyle="rgb(200,0,50)"; 
move_ball(); 
setInterval(move_ball,100); 

function move_ball() 

ctx.clearRect(box_x,box_y,box_width,box_height); 
move_and_check(); 
ctx.beginPath(); 
ctx.arc(ball_x,ball_y,ball_radius,0,Math.PI*2,true); 
ctx.fill(); 
ctx.strokeRect(box_x,box_y,box_width,box_height); 

function move_and_check() 

var cur_ball_x=ball_x+ball_vx; 
var temp=ball_vy; 
ball_vy=ball_vy+g; 
var cur_ball_y=ball_y+ball_vy+g/2; 
if(cur_ball_x<bound_left) 

cur_ball_x=bound_left; 
ball_vx=-ball_vx*0.9; 
ball_vy=ball_vy*0.9; 

if(cur_ball_x>bound_right) 

cur_ball_x=bound_right; 
ball_vx=-ball_vx*0.9; 
ball_vy=ball_vy*0.9; 

if(cur_ball_y<bound_top) 

cur_ball_y=bound_top; 
ball_vy=-ball_vy*0.9; 
ball_vx=ball_vx*0.9; 

if(cur_ball_y>bound_bottom) 

cur_ball_y=bound_bottom; 
ball_vy=-ball_vy*0.9; 
ball_vx=ball_vx*0.9; 

ball_x=cur_ball_x; 
ball_y=cur_ball_y; 

</script> 
</head> 
<body onLoad="init()"> 
<canvas id="canvas" width="400" height="400"/> 
</body> 
</Html> 
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved