js实现碰撞检测特效代码分享

自己做了碰撞检测的封装,先看下实例demo,在看封装

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>碰撞检测</title>
 <style type="text/css">
  *{
  margin: 0;
  padding: 0;
  }
  #divA,#divB{
  width: 200px;
  height: 200px;
  background-color: purple;
  font-size: 50px;
  line-height: 200px;
  text-align: center;
  position: absolute;
  color: #fff;
  }
  #divA{
  left: 30px;
  top: 30px;
  z-index: 5;
  }
  #divB{
  left: 300px;
  top: 300px;
  }
 </style>
 </head>
 <body>
 <div id="divA">A</div>
 <div id="divB">B</div>
 </body>
 <script type="text/javascript">
 var divA = document.getElementById("divA");
 var divB = document.getElementById("divB");

 divA.onmousedown = function (e) {

  var event1 = window.event || e;

  var startX = event1.clientX;

  var startY = event1.clientY;

  document.onmousemove = function (j) {

  var event2 = window.event || j;

  var endX = event2.clientX;
  var endY = event2.clientY;

  divA.style.left = divA.offsetLeft + (endX - startX) + "px";
  divA.style.top = divA.offsetTop + (endY - startY) + "px";

  startX = endX;
  startY = endY;

  if (isCrash(divA,divB) == true) {

   divA.style.backgroundColor = "red";
  } else{

   divA.style.backgroundColor = "purple";
  };
  }
 }

 divA.onmouseup = function () {

  document.onmousemove = null;
 }

 function isCrash (obj1,obj2) {

  var boolCrash = true;

  var left1 = obj1.offsetLeft;

  var right1 = obj1.offsetLeft + obj1.offsetWidth;

  var top1 = obj1.offsetTop;

  var bottom1 = obj1.offsetTop + obj1.offsetHeight;

  var left2 = obj2.offsetLeft;

  var right2 = obj2.offsetLeft + obj2.offsetWidth;

  var top2 = obj2.offsetTop;

  var bottom2 = obj2.offsetTop + obj2.offsetHeight;

  if (right1 > left2 && left1 < right2 && bottom1 > top2 && top1 < bottom2) {
  boolCrash = true;
  } else{
  boolCrash = false;
  }
  return boolCrash;
 }

 </script>
</html>

函数封装

 function isCrash (obj1,obj2) {

  var boolCrash = true;//假设true为碰撞

  var left1 = obj1.offsetLeft;

  var right1 = obj1.offsetLeft + obj1.offsetWidth;

  var top1 = obj1.offsetTop;

  var bottom1 = obj1.offsetTop + obj1.offsetHeight;

  var left2 = obj2.offsetLeft;

  var right2 = obj2.offsetLeft + obj2.offsetWidth;

  var top2 = obj2.offsetTop;

  var bottom2 = obj2.offsetTop + obj2.offsetHeight;

  if (right1 > left2 && left1 < right2 && bottom1 > top2 && top1 < bottom2) {
  boolCrash = true;
  } else{
  boolCrash = false;
  }
  return boolCrash;
 }
时间: 2016-10-14

JS+CSS实现带有碰撞缓冲效果的竖向导航条代码

本文实例讲述了JS+CSS实现带有碰撞缓冲效果的竖向导航条代码.分享给大家供大家参考.具体如下: 这是一款碰撞缓冲效果的导航条,JavaScript妙味课堂奉献给大家的作品,很不错的竖向菜单,希望大家喜欢.所用技术是JS和CSS. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-pzxg-r-nav-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.

用JavaScript玩转游戏物理(一)运动学模拟与粒子系统

系列简介 也许,三百年前的艾萨克·牛顿爵士(Sir Issac Newton, 1643-1727)并没幻想过,物理学广泛地应用在今天许多游戏.动画中.为什么在这些应用中要使用物理学?笔者认为,自我们出生以来,一直感受着物理世界的规律,意识到物体在这世界是如何"正常移动",例如射球时球为抛物线(自旋的球可能会做成弧线球) .石子系在一根线的末端会以固定频率摆动等等.要让游戏或动画中的物体有真实感,其移动方式就要符合我们对"正常移动"的预期. 今天的游戏动画应用了多种

javascript动画之圆形运动,环绕鼠标运动作小球

代码如下: 复制代码 代码如下: <script type="text/javascript"> var ball; var mouseX = 100; var mouseY = 100; var angle = 0; var radius = 50; function run(){ if(ball === undefined){ ball = document.createElement("span"); ball.style.position = &

js实现缓冲运动效果的方法

本文实例讲述了js实现缓冲运动效果的方法.分享给大家供大家参考.具体分析如下: 该实例可实现一开始速度很快,然后慢下来,直到停止的效果. 要点: var speed = (target-box.offsetLeft)/8; 目标点减去元素的当前位置的值除以8,因为offsetleft的值是一直在变大,所以速度的值也是一直的变小 speed = speed>0?Math.ceil(speed):Math.floor(speed); 正向速度的时候向上取整,反向速度的时候向下取整 代码: <!DO

javascript实现10个球随机运动、碰撞实例详解

本文实例讲述了javascript实现10个球随机运动.碰撞的方法.分享给大家供大家参考.具体如下: 学了一段时间的javascript了,做过一些小案例,目前最有难度的就是10个小球随机碰撞效果,这不,把它上上来与大家分享一下,相信不少和我一样的菜鸟在开始上手编程时都会有不少的困惑,希望它能给一些人带来帮助. 效果要求:10个小球在页面随机移动,碰到窗口边界或其他小球都会反弹 思路: 1.10个小球是10个div; 2.碰窗口反弹,定义vx vy为小球的移动变量,以及一个弹力变量bounce(

JS实现判断碰撞的方法

本文实例讲述了JS实现判断碰撞的方法.分享给大家供大家参考.具体如下: JS判断碰撞方法: 复制代码 代码如下: /** 判断是否碰撞  * @param obj 原对象  * @param dobj 目标对象  */  function impact(obj, dobj) {      var o = {          x: getDefaultStyle(obj, 'left'),          y: getDefaultStyle(obj, 'top'),          w:

JavaScript拖拽、碰撞、重力及弹性运动实例分析

本文实例讲述了JavaScript拖拽.碰撞.重力及弹性运动实现方法.分享给大家供大家参考,具体如下: js拖拽.碰撞与重力实现代码: 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.of

JS实现匀速运动的代码实例

效果: 思路: 利用setInerval()计时器,进行运动.然后关键的一点是在最后停止的时候给它一个填充缝隙的判断. 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css">        #div1        {            width: 100px;            height: 10

JS碰撞运动实现方法详解

本文实例分析了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.docum

js运动动画的八个知识点

今天简单的学了一下js运动动画,记录一下自己的心得体会,分享给大家. 下面是我整理出来的结果. 知识点一:速度动画. 1.首先第一步实现速度运动动画,封装一个函数,用到的知识是setInterval(function(){ 复制代码 代码如下: oDiv.style.left=oDiv.offsetLeft+10+"px"; },30). 对于这里为什么要用到offsetLeft,我特意百度了一下,我得到的有用信息是: a.offsetLeft和left的相同之处都是表示子节点相对于父

使用JavaScript 实现对象 匀速/变速运动的方法

实例1--控制一个对象的匀速移动和停止 HTML: 复制代码 代码如下: <input id="btn" type="button" value=" Move It ! "/>    <div id="d1">        <img id="i1" src="1.jpg" alt/>    </div> JS:实现向右运动 复制代码 代码

Javascript实现重力弹跳拖拽运动效果示例

演示地址: http://www.ihuxu.com/project/gcdmove/ 调用示例: var GCDM = gcdMove(oDiv,100,0); GCDM.startMove();//开始运动 GCDM.stopMove();//结束运动 该段JS代码已经封装好了,代码如下: 简要说明 - obj为要改动的对象元素,通常为某个div:iSpeedX,iSpeedY为div出师的横向(右侧),竖向(下)的初始速度,当然也可以设为零. 复制代码 代码如下: /** * @Desc

javascript制作游戏开发碰撞检测的封装代码

在JavaScript开发Web游戏时,需要使用到碰撞检测时,为了方便开发,封装了矩形和圆形的两个碰撞检测方式. [附带案例操作捕获一枚] [注意:代码上未做优化处理] 演示图 角色攻击区域碰撞检测.gif 塔防案例.gif 矩形区域碰撞检测 /** * 矩形区域碰撞检测 * Created by Administrator on 14-4-7. * author: marker */ function Rectangle(x, y, _width, _height){ this.x = x;

Js实现简单的小球运动特效

废话不多说了,直接给大家贴js代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html;charset=utf-"/> </head> <body style="background:pink;"

原生JS实现多个小球碰撞反弹效果示例

本文实例讲述了原生JS实现多个小球碰撞反弹效果.分享给大家供大家参考,具体如下: 实现思路:小球的移动,是通过改变小球的left和top值来改变,坐标分别为(x,y)当x/y值加到最大,即加到父级的宽度或者高度时,使x值或者y值减小,同理当x值或者y值减到最小时,同样的使x值或者y值增加,以上的思路可以实现小球的碰壁反弹 小球与小球之间的碰撞,要判断小球在被撞小球的哪个方向,从而判断小球该向哪个方向移动,同样的改变小球的坐标值,来实现小球的反弹 实现代码: <!doctype html> &l

JS运动特效之同时运动实现方法分析

本文实例讲述了JS运动特效之同时运动实现方法.分享给大家供大家参考,具体如下: 接着上一篇 <JS运动特效之链式运动>继续折腾 上一篇中我们的运动框架,可以完美的实现让一个物体先变宽,在变高,在变透明度.....,看似很完美了! 貌似可以喝喝茶看看美女了.但是老板突然说,让你同时改变一个物体的宽高和透明度,心碎了一地!!! 拿过之前的运动框架发现,无法实现让div同时又变宽,又变高,有变透明度!!最后无能为力,只好有请JSON大神出场了,不认识json的小伙伴们就找度娘问一下吧! functi

p5.js实现简单货车运动动画

本文为大家分享了p5.js实现简单货车运动动画的具体代码,供大家参考,具体内容如下 使用工具 Visual Studio Code+p5.js 下载地址 Visual Studio Code p5.js 目标 在网页上画出一辆货车,通过运用循环.条件分支.函数等流程控制方法来达到动态的效果. 具体流程 首先我们建立一个index.html文件(主页)和一个car.js文件(码绘实现文件),并把car.js和p5.js链接到index.html上. 在car.js中我们创建setup()和draw

JS运动特效之完美运动框架实例分析

本文实例讲述了JS运动特效之运动框架.分享给大家供大家参考,具体如下: 在前面一篇的<js运动特效之同时运动>中说过,我们的运动框架还存在一个问题,那究竟是什么问题那?把上一篇的程序做一下调整 oDiv.onmouseover = function () { //startMove(oDiv,{width:300,height:300,opacity:30}); startMove(oDiv,{width:204,height:300,opacity:30}); } 在鼠标移入的时候,我们让w

JS运动特效之链式运动分析

本文实例讲述了JS运动特效之链式运动.分享给大家供大家参考,具体如下: 接着前面一篇<JS运动特效之任意值添加运动的方法>继续折腾 链式运动:一个运动接着一个运动.比如:鼠标移入div先让宽变大,接着在让高变大,接着在让透明度变化等等一系列运动连着做.废话不多说,上栗子!! 当鼠标移入div的时候,div先变宽,在变高,然后改变透明度:移出又逐次恢复到原样: 实现链式运动,需要对上一篇中的startMove() 函数继续做改进 function startMove(obj,attr,iTarg

JS运动特效之任意值添加运动的方法分析

本文实例讲述了JS运动特效之任意值添加运动的方法.分享给大家供大家参考,具体如下: 回顾一下上个例子JS实现多物体运动的方法: <script> window.onload = function(){ var liTags = document.getElementsByTagName('li'); for(var i=0;i<liTags.length;i++){ liTags[i].timer = null;// 给每个li都添加一个timer liTags[i].onmouseov

JS实现简单日历特效

本文实例为大家分享了JS实现简单日历特效的具体代码,供大家参考,具体内容如下 知识点 1.引入我的工具包 2.运用JavaScript内置对象 Date 运行效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; pa

js+canvas简单绘制圆圈的方法

本文实例讲述了js+canvas简单绘制圆圈的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!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/xh

js实现简单的省市县三级联动效果实例

本文实例讲述了js实现简单的省市县三级联动效果.分享给大家供大家参考,具体如下: js代码部分 //省市县数据格式 var province_city_county_data=[ { province:"四川", city:[ { cityName:"成都", county:["成都市","崇州市","金堂县"] }, { cityName:"南充", county:["仪陇县