这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JS 碰撞运动实现方法, 详细分析了碰撞运动的原理及相应的 javascript 实现技巧, 需要的朋友可以参考下
本文实例分析了 JS 碰撞运动实现方法。分享给大家供大家参考,具体如下:
描述:撞到目标点弹回来(速度反转)
一、无重力的漂浮 div
- var div1=document.getElementById("div1");
- var iSpeedX=6;
- var iSpeedY=8;
- setInterval(function(){
- var l=div1.offsetLeft+iSpeedX;
- var t=div1.offsetTop+iSpeedY;
- if(t>=document.documentElement.clientHeight-div1.offsetHeight){
- iSpeedY*=-1; //速度反向
- t=document.documentElement.clientHeight-div1.offsetHeight; //超出下边界时,把它拉回到下边界,不然右边滚动条会闪动出现一下
- }
- else if(t<=0){
- iSpeedY*=-1;
- t=0;
- }
- if(l>=document.documentElement.clientWidth-div1.offsetWidth){
- iSpeedX*=-1;
- l=document.documentElement.clientWidth-div1.offsetWidthl;
- }
- else if(l<=0){
- iSpeedX*=-1;
- l=0;
- }
- div1.style.left=l+'px';
- div1.style.top=t+'px';
- },30);
二、碰撞 + 重力
所谓重力就是 Y 轴的速度不断增加
- setInterval(function(){
- iSpeedY+=3;
- var l=div1.offsetLeft+iSpeedX;
- var t=div1.offsetTop+iSpeedY;
- if(t>=document.documentElement.clientHeight-div1.offsetHeight){
- iSpeedY*=-0.8;
- iSpeedX*=0.8; //横向速度也要变慢,否则碰到地面时会停不下来
- t=document.documentElement.clientHeight-div1.offsetHeight;
- }
- else if(t<=0){
- iSpeedY*=-1;
- iSpeedX*=0.8;
- t=0;
- }
- if(l>=document.documentElement.clientWidth-div1.offsetWidth){
- iSpeedX*=-0.8;
- l=document.documentElement.clientWidth-div1.offsetWidthl;
- }
- else if(l<=0){
- iSpeedX*=-0.8;
- l=0;
- }
- if(Math.abs(iSpeedX)<1){ //解决小数的问题,因为假如速度是小数,正的没问题,100(iSpeed=0.5)-->100.5-->100,负的100(iSpeed=-0.5)--->99.5-->99,可能会出现x轴反向时滑行
- iSpeedX=0;
- }
- if(Math.abs(iSpeedY)<1){
- iSpeedY=0;
- }
- div1.style.left=l+'px';
- div1.style.top=t+'px';
- },30);
三、碰撞 + 重力 + 拖拽
- window.onload=function ()
- {
- var oDiv=document.getElementById('div1');
- var lastX=0;
- var lastY=0;
- oDiv.onmousedown=function (ev)
- {
- var oEvent=ev||event;
- var disX=oEvent.clientX-oDiv.offsetLeft;
- var disY=oEvent.clientY-oDiv.offsetTop;
- document.onmousemove=function (ev)
- {
- var oEvent=ev||event;
- var l=oEvent.clientX-disX;
- var t=oEvent.clientY-disY;
- oDiv.style.left=l+'px';
- oDiv.style.top=t+'px';
- iSpeedX=l-lastX; //拖拽结束时的速度
- iSpeedY=t-lastY;
- lastX=l; //更新上一个点的位置
- lastY=t;
- };
- document.onmouseup=function ()
- {
- document.onmousemove=null;
- document.onmouseup=null;
- startMove(); //拖拽结束时执行
- };
- clearInterval(timer);
- };
- };
- var timer=null;
- var iSpeedX=0;
- var iSpeedY=0;
- function startMove()
- {
- clearInterval(timer);
- timer=setInterval(function (){
- var oDiv=document.getElementById('div1');
- iSpeedY+=3;
- var l=oDiv.offsetLeft+iSpeedX;
- var t=oDiv.offsetTop+iSpeedY;
- if(t>=document.documentElement.clientHeight-oDiv.offsetHeight)
- {
- iSpeedY*=-0.8;
- iSpeedX*=0.8;
- t=document.documentElement.clientHeight-oDiv.offsetHeight;
- }
- else if(t<=0)
- {
- iSpeedY*=-1;
- iSpeedX*=0.8;
- t=0;
- }
- if(l>=document.documentElement.clientWidth-oDiv.offsetWidth)
- {
- iSpeedX*=-0.8;
- l=document.documentElement.clientWidth-oDiv.offsetWidth;
- }
- else if(l<=0)
- {
- iSpeedX*=-0.8;
- l=0;
- }
- if(Math.abs(iSpeedX)<1)
- {
- iSpeedX=0;
- }
- if(Math.abs(iSpeedY)<1)
- {
- iSpeedY=0;
- }
- if(iSpeedX==0 && iSpeedY==0 && t==document.documentElement.clientHeight-oDiv.offsetHeight)
- {
- clearInterval(timer);
- }
- else
- {
- oDiv.style.left=l+'px';
- oDiv.style.top=t+'px';
- }
- document.title=iSpeedX;
- }, 30);
- }
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0524/329500.html