原生js实现一个DIV的碰撞反弹运动

最新推荐文章于 2020-04-22 21:19:45 发布
最新推荐文章于 2020-04-22 21:19:45 发布
阅读量857 收藏 4
点赞数 2
分类专栏： JavaScript 文章标签： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q3254421/article/details/83450317
版权

原生js实现一个DIV的碰撞反弹运动：

关键在于DIV的边界检测，进而改变运动方向，即可实现碰撞反弹效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0;}
        div{height:100px;width:100px;background:red;position:absolute;}
        /*添加绝对定位*/

    </style>
    <script>
        window.onload=function(){
            var btn=document.getElementById("btn");
            var div=document.getElementById("div");
            var speedx=6;//前端全栈学习交流圈：866109386
            var speedy=8；//面向1-3年前端开发人员
            var t=null; //帮助突破技术瓶颈，提升思维能力，欢迎大家。
            btn.onclick=function(){
                clearInterval(t);
                t=setInterval(function(){
                    var l=div.offsetLeft+speedx;
                    var t=div.offsetTop+speedy;

                    if(l>=document.documentElement.clientWidth-div.offsetWidth){
                        speedx*=-1;
                        l=document.documentElement.clientWidth-div.offsetWidth;
                    }else if(l<=0){
                        speedx*=-1;
                        l=0;
                    }
                    if(t>=document.documentElement.clientHeight-div.offsetHeight){
                        speedy*=-1;
                        t=document.documentElement.clientHeight-div.offsetHeight;
                    }else if(t<=0){
                        speedy*=-1;
                        t=0;
                    }
                    div.style.left=l+"px";
                    div.style.top=t+"px";
                },10);
            }
        }
    </script>
</head>
<body>
<input type="button" id="btn" value="开始运动">
<div id="div"></div>
</body>
</html>
霜如明月
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js小球与边框碰撞反弹_四叉树在碰撞检测中的应用
weixin_39625162的博客
11-30 402
缘起《你被追尾了》中预告了加速碰撞检测的算法——四叉树(for 2D)，所以本文就来学习一下.分析首先是为什么要使用四叉树进行优化，其实《你被追尾了》中已经说了，这里简单复习一下，碰撞检测是一种比较昂贵的操作. 假设有100个对象需要进行碰撞检测，那么两两进行碰撞检测需要进行 100 x 100 = 10000 次碰撞检测，检测的次数实在太多，消耗大量CPU资源而引起游戏卡帧。一种优化途...
原生JS实现多个小球碰撞反弹效果示例
10-18
主要介绍了原生JS实现多个小球碰撞反弹效果,结合完整实例形式分析了javascript实现小球碰撞的相关数值计算、随机数生成、事件响应等操作技巧,需要的朋友可以参考下
div反弹
wang_w123的博客
07-04 329
div反弹 var x=1;    var y=1; function div() { var obj=document.getElementById("div1"); obj.style.top=parseInt(obj.style.top)+y+"px"; obj.style.left=parseInt(obj.style.left)+x+"px"; if(x==1&&
div碰撞
黎小小的博客
08-16 596
需求：拖动两个元素，当四个边缘碰撞到时，div样式改变 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt...
原生js实现DIV的碰撞反弹运动.html
10-25
原生js实现DIV的碰撞反弹运动，原生js实现DIV的碰撞反弹运动
原生javascript实现的一个简单动画效果
11-23
在本文中，我们将深入探讨如何使用原生JavaScript实现一个简单的动画效果。这个动画涉及一个绿色的div元素在页面上向右移动，通过点击"开始运动"和"停止运动"两个按钮来控制div的移动和停止。 首先，让我们分析提供...
原生js实现键盘控制div移动且解决停顿问题
11-26
效果 ：用键盘控制一个div移动 当按下一个方向键不放，div会先停顿一下，然后才开始持续移动。 原因：系统要区分用户是否连续输入，第一个到第二个之间有一个停顿时间 注：了解原因才能解决问题 效果展示 1.简单...
js 实现边缘撞击检测动画
p1967914901的博客
04-22 521
js 实现撞击动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>小...
js气泡碰撞反弹效果
08-22
一个用js代码实现的，类似于windows气泡屏幕保护程序，仅供娱乐！
js实现div色块碰撞
10-15
主要为大家详细介绍了js实现div色块碰撞，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js实现div缓冲运动
07-26
js实现div缓冲运动,用于增强页面的动态效果
js实现碰撞运动
05-30
js实现碰撞运动，有详细的中文注释，便于初学者掌握原理
js div碰撞js
梦想家博客
03-30 334
var Drag=(function (){ return { start:function (elem,range) { elem.addEventListener("mousedown",mouseHandler); // elem.obj=this; var offsetPoint={}...
js实现div的碰壁反弹效果
deliefu3790的博客
08-19 578
需求： 写一个div，让div在父级进行匀速运动，碰到父级上下左右的边框，就向反方向运动。 碰壁反弹在游戏制作中很常用~~~~ <style> .wrap { width: 1000px;height: 500px; border: 1px solid red; margin: 40px auto; ...
JS-小球碰撞反弹
weixin_30423977的博客
08-25 620
类似于屏保的一种动画，当小球碰到边框时，发生反弹，并且变化颜色。 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>碰壁反弹</title> <style type="text/css"> ...
Div的碰撞检测
weixin_42671141的博客
04-08 991
<div id="overall"> <div id="tgamewin"> <div id="back_bj"> <div id="map4000011" class="Thescenemap"></div> </div> <div id="role"> <div id="role...
JS实现缓动效果-让div运动起来
weixin_33885676的博客
07-06 241
var tween = { linear:function(t,b,c,d){ return c*t/d + b; }, easeIn:function(t,b,c,d){ return c * ( t /= d ) * t + b; }, strongEaseIn:function(t,b,c,d){ ...
原生js实现拖拽div
最新发布
08-07
### 回答1： 我可以提供一些指引：要实现拖拽div，你首先需要监听div的mousedown，mouseup和mousemove事件。然后记录鼠标的坐标，并通过改变div的CSS left和top属性来实现div的拖拽。 ### 回答2： 原生 JavaScript 可以使用一些事件和方法来实现拖拽 div 的功能。以下是一个简单的示例： 首先，在 HTML 中添加一个可拖拽的 div 元素： ``` <div id="draggableDiv" draggable="true">可拖拽的 div</div> ``` 在 JavaScript 中，我们可以通过监听一些事件来实现拖拽的效果。首先，我们需要监听 div 的 mousedown 事件，当鼠标按下时开始拖拽。然后，我们需要监听鼠标移动事件来更新 div 的位置。最后，在鼠标抬起时停止拖拽。 ``` const draggableDiv = document.getElementById('draggableDiv'); let offsetX, offsetY; draggableDiv.addEventListener('mousedown', (event) => { offsetX = event.clientX - draggableDiv.offsetLeft; offsetY = event.clientY - draggableDiv.offsetTop; document.addEventListener('mousemove', onMouseMove); document.addEventListener('mouseup', onMouseUp); }); function onMouseMove(event) { draggableDiv.style.left = event.clientX - offsetX + 'px'; draggableDiv.style.top = event.clientY - offsetY + 'px'; } function onMouseUp() { document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); } ``` 在上面的代码中，我们通过计算鼠标点击位置与 div 左上角的偏移量，然后通过监听鼠标移动事件来更新 div 的位置。鼠标移动事件会不断触发，从而使得 div 跟随鼠标的移动而移动。最后，当鼠标抬起时，我们需要移除事件监听，停止拖拽。 通过以上代码，我们就可以实现一个简单的原生 JavaScript 拖拽 div 的效果。当鼠标按下 div 并移动时，div 会跟随鼠标的移动而移动，当鼠标抬起时停止拖拽。 ### 回答3： 要实现拖拽div的效果，可以使用原生JavaScript来完成。具体步骤如下： 1. 首先，在HTML中创建一个div元素，并给它设置一个id，用于后续的选择和操作。 ```html <div id="dragDiv">拖拽我</div> ``` 2. 在JavaScript中，创建一个变量来保存当前被拖拽的div元素。 ```javascript var dragElement = document.getElementById("dragDiv"); ``` 3. 添加mousedown事件监听器，当鼠标按下时，开始拖拽。 ```javascript dragElement.addEventListener("mousedown", dragStart); ``` 4. 在dragStart函数中，记录鼠标按下时的初始位置和div元素的初始位置。 ```javascript function dragStart(event) { event.preventDefault(); startX = event.clientX; startY = event.clientY; elementX = dragElement.offsetLeft; elementY = dragElement.offsetTop; document.addEventListener("mousemove", drag); document.addEventListener("mouseup", dragEnd); } ``` 5. 创建drag函数，在该函数中，根据鼠标移动的距离，更新div元素的位置。 ```javascript function drag(event) { var moveX = event.clientX - startX; var moveY = event.clientY - startY; dragElement.style.left = elementX + moveX + "px"; dragElement.style.top = elementY + moveY + "px"; } ``` 6. 创建dragEnd函数，在该函数中，移除鼠标移动和松开事件监听器。 ```javascript function dragEnd() { document.removeEventListener("mousemove", drag); document.removeEventListener("mouseup", dragEnd); } ``` 通过以上步骤，我们就可以实现一个简单的原生JavaScript拖拽div效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值