js检测图形碰撞笔记

图形平面碰撞的检测方式就是判断点是否同时在两个对象中。比如这个笔记中的例子

<!DOCTYPE html>

<html>

<head>

<title>impact demo</title>

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

<style type="text/css">

*{

margin:0;

padding:0;

}

.el1,.el2{

width:100px;

height: 100px;

position: absolute;

opacity: 0.7;

border-radius: 4px;

}

.el1{

background: #92B901;

position:relative;

animation:myfirst 5s;

-moz-animation:myfirst 5s;

-webkit-animation:myfirst 5s;

-webkit-animation-iteration-count: infinite;

-moz-animation-iteration-count: infinite;

}

.el2{

background: #ff9900;

left: 200px;

top:200px;

}

@keyframes myfirst

{

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:200px; top:0px;}

50% {background:blue; left:200px; top:200px;}

75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

@-moz-keyframes myfirst /* Firefox */

{

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:200px; top:0px;}

50% {background:blue; left:200px; top:200px;}

75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:200px; top:0px;}

50% {background:blue; left:200px; top:200px;}

75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

@-o-keyframes myfirst /* Opera */

{

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:200px; top:0px;}

50% {background:blue; left:200px; top:200px;}

75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

.text{

width:100%;

height: 40px;

position: absolute;

font-size: 12px;

bottom: 0px;

text-align: center;

}

.wrap{

width: 300px;

height: 300px;

margin: 100px auto;

position: relative;

border: #ccc 1px solid;

border-radius: 4px;

box-shadow: #ccc 0px 0px 4px;

padding: 2px;

}

.red{

color: #ff3300;

}

</style>

</head>

<body>

<div class="wrap">

<div class="el1" draggable="true" ondragstart="check();" ></div>

<div class="el2" draggable="true"></div>

<div class="text">目前没有碰撞...</div>

</div>

<script type="text/javascript">

var $el1 = $('.el1');

var $el2 = $('.el2');

var $text = $('.text');

var el1 = $el1[0];

var el2 = $el2[0];

var sta = setInterval('check()', 10);

function check(){

console.log(1);

if(impact(el1, el2)){

console.log(2)

$text.addClass('red');

$text.html('碰撞进行中!');

}else{

console.log(3)

$text.removeClass('red');

$text.html('目前没有碰撞...');

}

}

function impact(el1, el2) {

var e1 = {

x: getDefaultStyle(el1, 'left'),

y: getDefaultStyle(el1, 'top'),

w: getDefaultStyle(el1, 'width'),

h: getDefaultStyle(el1, 'height')

}

var e2 = {

x: getDefaultStyle(el2, 'left'),

y: getDefaultStyle(el2, 'top'),

w: getDefaultStyle(el2, 'width'),

h: getDefaultStyle(el2, 'height')

}

var px, py;

px = e1.x <= e2.x ? e2.x : e1.x;

py = e1.y <= e2.y ? e2.y : e1.y;

if (px >= e1.x && px <= e1.x + e1.w && py >= e1.y && py <= e1.y + e1.h && px >= e2.x && px <= e2.x + e2.w && py >= e2.y && py <= e2.y + e2.h) {

return true;

} else {

return false;

}

}

function getDefaultStyle(obj, attribute) {

return parseInt(obj.currentStyle ? obj.currentStyle[attribute] : document.defaultView.getComputedStyle(obj, false)[attribute]);

}

</script>

</body>

</html>

提示:你可以先修改部分代码再运行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏拂晓风起

cocos2d-js Shader系列4:Shader、GLProgram在jsb(native、手机)和html5之间的兼容问题。cocos2d-js框架各种坑。

22340
来自专栏有趣的django

Django+Bootstrap+Mysql 搭建个人博客(三)

50110

.NET中的密钥加密

本教程将演示如何通过System.Security.Cryptography在.NET Framework 1.1中实现对称加密/密钥加密。

62880
来自专栏落影的专栏

iOS开发-OpenGL ES画图应用思考题

这是一篇OpenGL ES的实战,紧接 入门教程3 学了OpenGL ES一段时间,用这个应用来练练手。 OpenGL ES系列教程在这里。 OpenGL ...

47270
来自专栏陈满iOS

iOS开发·runtime原理与实践: 关联对象篇(Associated Object)(应用场景:为分类添加“属性”,为UI控件关联事件Block体,为了不重复获得某种数据)

分类(category)与关联对象(Associated Object)作为objective-c的扩展机制的两个特性:分类,可以通过它来扩展方法;Associ...

49020
来自专栏恰童鞋骚年

Hadoop学习笔记—12.MapReduce中的常见算法

    "数据去重"主要是为了掌握和利用并行化思想来对数据进行有意义的筛选。统计大数据集上的数据种类个数、从网站日志中计算访问地等这些看似庞杂的任务都会涉及数据...

15620
来自专栏Ryan Miao

从国家统计局爬下来的地区信息

发现地区编码网上流传了很多版本。有很多崇文区,玄武区之类的。于是想了想,还是自己做一份。不敢保证没问题,但还没遇到问题。 首先,从网上找到一个大神写的jsoup...

36760
来自专栏一枝花算不算浪漫

mybatis结合分页的使用及解析.

39070
来自专栏函数式编程语言及工具

Akka(8): 分布式运算:Remoting-远程查找式

  Akka是一种消息驱动运算模式,它实现跨JVM程序运算的方式是通过能跨JVM的消息系统来调动分布在不同JVM上ActorSystem中的Actor进行运算,...

44590
来自专栏逍遥剑客的游戏开发

WOW小地图生成

32130

扫码关注云+社区

领取腾讯云代金券