JS自由落体运动

用JS模拟一下效果 
这里用到了一些物理知识，先上栗子  (看Demo)

//@desc: 自由落体运动
//@author:fzxa
//@create: 20110921
//@blog: nonb.cn
var h = 0, v = 1;
var i;

function loop() {
	var fps = document.getElementById('fps').value;
    i = self.setInterval("niao()", fps);
}
function niao() {
    var f = document.getElementById('fall');
    var r = parseInt(f.style.right) - h;
    var b = parseInt(f.style.bottom) - v;
	var view  = document.getElementById('view');
	document.getElementById('b').innerHTML='b'+b+'   r'+r;
	
    f.style.right = r + 'px';
    f.style.bottom = b + 'px';
	
    if (b > -210) {
        v += 2;
		view.innerHTML+='-----b > -210:------
';
    } else {
		view.innerHTML+='-----当b小于-210时:------
';
        h = (v > 9) ? v * 0.2 : 0;//偏移量
		v *= (v > 9) ? -0.6 : 0; 
		if(v == 0){
			clearInterval(i);
		}
    }
	view.innerHTML+= 'r:'+r+'  b:'+b+' v:'+v+'  h:'+h+'
';
}
function start(){
	initcfg();
	loop();
}
function quit(){
	clearInterval(i);
}
function initcfg(){
	var f = document.getElementById('fall');
	f.style.right = '-300';
	f.style.bottom = '-46';
	h = 0, v = 1;
	document.getElementById('view').innerHTML='';
}

上一篇: Html5-Sprite动画编程

下一篇: Html5-Canvas-JS模拟抛物线

评论