Html5-Canvas-JS模拟抛物线

今天用HTML5+Canvas+js 模仿”愤怒的小鸟“做了个效果
首先先计算抛物线，判断落地后反弹，自由落体
在上一篇关于JS自由落体，可以先了解一下
先上个 栗子(看Demo) 
本文出处 http://www.nonb.cn/blog/html5-canvas-js-parabola.html (写点寂寞) 欢迎转载，转载请注明出处.

//@desc: 模拟抛物线
//@author:fzxa
//@create: 20110921
//@blog: nonb.cn
;(function(){
	drawCtx();
	function drawCtx(){
		var x  = 580;
		var y = 326;
		var ctx = document.getElementById('ctx').getContext('2d'); 
		var backgroundForestImg = new Image();
		
		ctx.clearRect(0, 0, x, y);

		backgroundForestImg.src = "./bg.jpg";
		backgroundForestImg.onload=function(){ 
			ctx.drawImage(backgroundForestImg,0,0,580,326); 
		} 
		console.log(ctx);
	}
})(this);

function demo(x, y, a, t) {

    var f = document.getElementById('fall');
	/*
    var Vx = x,
    Vy = parseInt(y),
    g = a,
    t = parseInt(t),
    h = 0,
    l = 0,
    Sx = 0,
    Sy = 0;
	*/
	var Vx = x,
    Vy = parseInt(y),
    g = a,
    t = parseInt(t),
    h = 0,
    l = 0,
    Sx = 0,
    Sy = 0;
	console.log('Vx:'+Vx+' Vy:'+Vy+' g:'+g+' t:'+t+' h:'+h+' l:'+l+' Sx:'+Sx+' Sy:'+Sy); 
    var i = setInterval(function() {
        if (f) {
            Sx += Vx * t;
            l = Sx;
            Vy += g * t;
            h += Vy * t;
			console.log('X轴:'+l+'    Y轴:'+h+'   Vy:'+Vy); 
            f.style.left = l + 'px';
            f.style.top = h-Vy + 'px';
            if (h>=-2) {
				Vy *= (Vy > 1) ? -0.6 : 0; 
				Vx = Vx/1.5
				if(Vy == 0) clearInterval(i);
			}
        }
    },
    t);
}

上一篇: JS自由落体运动

下一篇: HTML5 Canvas+Box2D实现物理重力效果

评论