js 碰撞运动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>碰撞运动</title>
    <style>
        #div1
        {
            width:100px;
            height:100px;
            background:red;
            position:absolute;
        }
    </style>

    <script type="text/javascript">
        window.onload = function(){
            var oBtn = document.getElementById("btn");

            oBtn.onclick = function(){
                move();
            }

        }

        var timer = null;

        var speedX = 6;
        var speedY = 8;

        function move(){

            clearInterval(timer);

            timer = setInterval(function(){

                var oDiv = document.getElementById("div1");

                var l = oDiv.offsetLeft + speedX ;
                var t = oDiv.offsetTop + speedY;

                if(t >= document.documentElement.clientHeight-oDiv.offsetHeight)
                {
                    speedY*=-1;
                    t = document.documentElement.clientHeight - oDiv.offsetHeight;
                }
                else if(t<=0)
                {
                    speedY*=-1;
                    t=0;
                }

                if(l>=document.documentElement.clientWidth-oDiv.offsetWidth)
                {
                    speedX*=-1;
                    l = document.documentElement.clientWidth - oDiv.offsetWidth;
                }
                else if(l<=0)
                {
                    speedX*=-1;
                    l = 0;
                }

                oDiv.style.left = l+‘px‘;
                oDiv.style.top = t +‘px‘;

            },30);
        }
    </script>
</head>
<body>
   <input type="button" id="btn" value="运动" />
   <div id="div1">
    </div>
    <span style="width:1px;height:300px;background:black;left:300px"></span>
</body>
</html>
时间: 2024-10-10 02:32:09

js 碰撞运动的相关文章

简单的碰撞运动

需要的js //碰撞运动 //对运动的方向以及临界值的处理 function bumpMove(obj) { clearInterval(obj.timer); var speedX = 10; var speedY = 10; timer = setInterval(function() { var L = obj.offsetLeft + speedX; var T = obj.offsetTop + speedY; if(T > document.documentElement.clien

JS运动基础(四) 碰撞运动

碰撞运动撞到目标点,速度反转无重力的漂浮Div速度反转滚动条闪烁的问题过界后直接拉回来 加入重力反转速度的同时,减小速度纵向碰撞,横向速度也减小横向速度小数问题(负数) 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档

js缓冲运动代码实例

js缓冲运动代码实例:元素的缓冲运动效果要比匀速运动更为美观一些,因为显得更为有张力和弹性,当然对于浏览者来说可能会有更好的效果,那么留住用户的可能性也就更大,下面就通过代码实例简单介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www

js制造运动的假象-------Day63

这里用的这个名称可能不合适,不过暂时我也没有想起比较对应的名字来,那就这样先写吧. 首先,我先表达下我想实现的是什么效果: 想必大家都玩过,至少见过很多小游戏,比方说超级玛丽,比方说flappy bird,在里面总看到马里奥或者小鸟就一直向前走啊向前飞啊,然后飞过了大河,跳过了深坑,最终到达终点,而在这个记录中我所关注的只是背景的变化,就像下面的图示: 最终它到了城堡中,而我们的屏幕中又不会显示滚动条,它是如何运动的呢? 其实,这个功能应该是个比较基础的功能了,只是之前不够敏感,今天从公交车上看

javascript运动系列第九篇——碰撞运动

× 目录 [1]碰撞检测 [2]无损碰撞 [3]有损碰撞 前面的话 碰撞可以分为碰壁和互碰两种形式,上篇介绍了碰壁运动,本文将从浅入深地介绍碰撞运动的互碰形式 碰撞检测 对于互碰形式的碰撞运动来说,首先要解决的是碰撞检测.对于矩形元素的碰撞检测前面的博文已经详细介绍过,下面主要介绍圆形元素的碰撞检测 矩形元素的碰撞检测利用九宫格分析法,而圆形元素的碰撞检测则简单很多,判断两个圆形元素的半径之和是否大于两个圆形元素的圆心点坐标之间的距离即可 由示意图可知,元素一的圆心位置为(x1,y1),半径为r

HTML5 Canvas彩色小球碰撞运动特效

脚本简介 HTML5 Canvas彩色小球碰撞运动特效是一款基于canvas加面向对象制作的运动小球动画特效. 效果展示 http://hovertree.com/texiao/html5/39/ 效果图如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5 Canvas彩色小球碰撞运动特效

js反弹运动

js反弹运动 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .ball { width: 30px; height: 30px; border-radius: 50%; position: absolute; top: 200px; left: 0; background: skyblue; }

js 碰撞 + 重力 运动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>碰撞+重力运动</title>

原生JS封装运动框架

昨天我们说了一下原生JS中常用的兼容性写法,今天我们来说一下运动框架. 正常情况下我们要写一个运动的效果会用到tween.js这么一个插件,这个东西不是一般人写出来的,因为里面涉及的运动效果都是经过一堆数学的函数运算出来的,我们平常人是写不出来的,所有我们就自己封装一个运动框架,有什么问题改起来也方便,下面我们就开始封装. 首先,我们先写一个div,设置一些简单的样式,我们就拿这个div举例子,如下代码: #div{ width: 100px; height: 100px; background