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 相关文章推荐
学习ExtJS(一) 之基础前提
Oct 07 Javascript
JavaScript Event学习第三章 早期的事件处理程序
Feb 07 Javascript
jquery队列queue与原生模仿其实现方法分享
Mar 25 Javascript
DOM基础教程之使用DOM + Css
Jan 20 Javascript
用director.js实现前端路由使用实例
Jan 27 Javascript
微信小程序 本地数据存储实例详解
Apr 13 Javascript
Angular.js中$resource高大上的数据交互详解
Jul 30 Javascript
JavaScript创建对象的七种方式全面总结
Aug 21 Javascript
JavaScript实现区块链
Mar 14 Javascript
React Native中Mobx的使用方法详解
Dec 04 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 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
多文件上传的例子
2006/10/09 PHP
php新建文件自动编号的思路与实现
2011/06/27 PHP
php+xml实现在线英文词典之添加词条的方法
2015/01/23 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
如何解决PHP无法实现多线程的问题
2015/09/25 PHP
PHP中ltrim与rtrim去除左右空格及特殊字符实例
2016/01/07 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
PHP使用curl模拟post上传及接收文件的方法
2016/03/04 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
js下拉菜单语言选项简单实现
2013/09/23 Javascript
js限制input标签中只能输入中文
2015/06/26 Javascript
全面解析Bootstrap手风琴效果
2020/04/17 Javascript
js+css3实现旋转效果
2017/01/20 Javascript
老生常谈jacascript DOM节点获取
2017/04/17 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
2017/06/21 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
详解vue如何使用rules对表单字段进行校验
2018/10/17 Javascript
微信小程序实现文件预览
2020/10/22 Javascript
Fabric 应用案例
2016/08/28 Python
Python使用PIL模块生成随机验证码
2017/11/21 Python
谈谈Python中的while循环语句
2019/03/10 Python
浅析Python 责任链设计模式
2020/09/11 Python
详解Python中的Lock和Rlock
2021/01/26 Python
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
linux面试题参考答案(8)
2015/08/11 面试题
前台文员我鉴定
2014/01/12 职场文书
《四季》教学反思
2014/04/08 职场文书
初中教师业务学习材料
2014/05/12 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
2014年售后服务工作总结
2014/11/18 职场文书
幼儿教师辞职信
2015/02/27 职场文书
php实现自动生成验证码的实例讲解
2021/11/17 PHP
MySQL索引 高效获取数据的数据结构
2022/05/02 MySQL