JS实现的碰撞检测与周期移动完整示例


Posted in Javascript onSeptember 02, 2019

本文实例讲述了JS实现的碰撞检测与周期移动。分享给大家供大家参考,具体如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
    #main {width:525px;
          height:300px;
          border:3px double black;
}
    #t {font-size:30px;
        color:blue;
        width:120px;
        height:35px;
        position:absolute;
        left:1;
        top:1;
    }
</style>
</head>
<body>
<div id="main" onMouseDown="MovePos();" onMouseUp="BeginMove();">
    <div id="t" >移动文本</div>
</div>
<script type="text/javascript">
    var tID;
    var iDeltaX = 1,iDeltaY = 1,iTmp;
    var obj = document.getElementById("t");
    var x = obj.style.left;
    var y = obj.style.top;
    var TOPX = 420,BOUNDX =1,TOPY =270,BOUNDY=1;
    function MovePos()
    {
        clearTimeout(tID);//每次运动前都要清除上一次的定时器,这个是关键!!
        x=parseInt(x+iDeltaX);
        y=parseInt(y+iDeltaY);
        //注意!x=x+1;和x=x+iDeltaX;都不行!
        //核心:反弹碰撞算法
        if(x>TOPX || x<BOUNDX || y>TOPY || y<BOUNDY)
        {
            iTmp = iDeltaX;
            iDeltaX=-iDeltaY;
            iDeltaY=iTmp;
        }
        //文本没移动10步后(每次移动步长1像素),文本颜色就变为红色,再移动10步后,文本颜色又变成蓝色,并持续这种切换方式
        if(x%10==0)
        {
            if(x%20==0){
                obj.style.color = "blue";
            }else{
                    obj.style.color = "red";
            }
        }
        obj.style.left = x+"px";
        obj.style.top = y+"px";
        //注意!obj.setAttribute("left",x);obj.setAttribute("top",y);是不行的!
        //设置定时器
        tID=setTimeout("MovePos()",10);
    }
    function BeginMove(){
        clearTimeout(tID);
    }
    //当鼠标点击在div(id="main")内按下时,运动开始,并且在鼠标弹起时运动结束,所以,要在div(id="main")内按下鼠标单击,然后在div(id="main")外松开,鼠标弹起
    //其实这个不怎么完美,因为div(id="main")的位置还没调好,不过,反弹效果成功了
</script>
</body>
</html>

运行效果:

JS实现的碰撞检测与周期移动完整示例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
LBS blog sql注射漏洞[All version]-官方已有补丁
Aug 26 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
Nov 30 Javascript
jQuery $.data()方法使用注意细节
Dec 31 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
May 21 Javascript
js实现按钮控制图片360度翻转特效的方法
Feb 17 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
Oct 01 Javascript
原生js实现数字字母混合验证码的简单实例
Dec 10 Javascript
类似于QQ的右滑删除效果的实现方法
Oct 16 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
Mar 08 Javascript
Webpack性能优化 DLL 用法详解
Aug 10 Javascript
jQuery zTree插件快速实现目录树
Aug 16 jQuery
实例讲解React 组件
Jul 07 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
Sep 02 #Javascript
layui数据表格跨行自动合并的例子
Sep 02 #Javascript
Vue form表单动态添加组件实战案例
Sep 02 #Javascript
小程序和web画三角形实现解析
Sep 02 #Javascript
vue-cli随机生成port源码的方法
Sep 02 #Javascript
微信小程序 云开发模糊查询实现解析
Sep 02 #Javascript
layui 数据表格 点击分页按钮 监听事件的实例
Sep 02 #Javascript
You might like
PHP中将网页导出为Word文档的代码
2012/05/25 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
用jQuery简化JavaScript开发分析
2009/02/19 Javascript
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
js中indexof的用法详细解析
2013/12/24 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
2016/02/18 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
基于zepto.js简单实现上传图片
2016/06/21 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
2017/02/15 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
2019/09/23 Javascript
js根据后缀判断文件文件类型的代码
2020/05/09 Javascript
Python的一些用法分享
2012/10/07 Python
python使用time、datetime返回工作日列表实例代码
2019/05/09 Python
python定时任务 sched模块用法实例
2019/11/04 Python
简单了解Python write writelines区别
2020/02/27 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
C#基础面试题
2016/10/17 面试题
仓管岗位职责范本
2014/02/08 职场文书
元旦红领巾广播稿
2014/02/19 职场文书
教师师德承诺书
2014/03/26 职场文书
市级文明单位申报材料
2014/05/07 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
计算机专业求职信
2014/06/02 职场文书
先进个人自荐书
2015/03/06 职场文书
创建文明城市倡议书
2015/04/28 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
贫困证明怎么写
2015/06/16 职场文书
java项目构建Gradle的使用教程
2022/03/24 Java/Android
oracle数据库去除重复数据
2022/05/20 Oracle