js html5实现的自由落体运动效果代码

本文实例讲述了js html5实现的自由落体运动效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head title画布自由落体/title脚本类型=' text/JavaScript ' var canvasheight=500；var canvaswidth=500 var g=9.8 var PluSV=0.5功能块(vo，x，y，宽度，高度，g，上下文){ var _ self=this_ self。VO=VO | | 0；_ self.x=x_ self.y=y_ self。prevx=x；_ self。prevy=y；_ self . g=g _ self . height=height _ self . width=width _ self . prev time=新日期()。getTime()；context.fillStyle=' black_ self。down=function(){ var time=(new Date().getTime() - _self.prevTime)/200，y=_ self。VO *时间1/2 * _自我。g *时间*时间_自我。y；//控制台。log(' down : time=' time ' :y=' y ' : ' _ self。VO)；if(y _ self。height=canvasheight){ _ self。g-；_ self。VO=_ self。g *时间；_self.prevTime=新日期()。getTime()；_ self。up()；} else { context。clear rect(_ self)。prevx，_self.prevY - 1，_self.prevX _self.height，_self。prevy _ self。宽度)；context.fillRect(_self.x，y，_self.width，_self。高度)；_ self。prevx=x；_ self。prevy=y；setTimeout(函数(){ _ self。down()；}, 30);} } _ self。up=function(){ var time=(new Date().getTime() - _self.prevTime)/200，v=_self.vo - _self.g * time，y=canvasheight-_ self。身高-_自我。VO *时间1/2 * _自我。g *时间*时间；//控制台。log(' up : time=' time ' :v=' v ')；if(v=0){ _ self。VO=0；_ self.y=y_self.prevTime=新日期()。getTime()；if(y _ self。height canvasheight){ _ self。down()；} else { return} } else { context。clear rect(_ self)。prevx，_self.prevY - 1，_self.prevX _self.height，_self。prevy _ self。宽度)；context.fillRect(x，y，_self.width，_self。高度)；_ self。prevx=x；_ self。prevy=y；setTimeout(函数(){ _ self。up()；}, 30);} } }窗口。onload=function(){ var canvas=document。getelementbyid(' canvas ')；var上下文=canvas。get context(' 2d ')；高度=canvas . offset thightvar Block=new Block(0，100，0，20，20，g，上下文);封锁。down()；}/script/headdycencancanvas id=' canvas ' width=' 500 ' height=' 500 ' style=' background : # DDDDDD '/canvas/center输入类型=' button ' value=' stop ' onclick=' stop()'/输入类型=' button ' value=' start ' onclick=' start()'//body/html更多关于Java脚本语言运动相关内容感兴趣的读者可查看本站专题： 《JavaScript运动效果与技巧汇总》

希望本文所述对大家Java脚本语言程序设计有所帮助。