专栏首页练小习的专栏js检测图形碰撞笔记

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 条评论
登录 后参与评论

相关文章

  • FF下修改美化文件域(input type=file)的样式

    有兄弟问我修改美化文件域(input type=file)在FF下的样式,暂时没看兼容.也没美化.等到了上海安定好了再好好修改下 <!DOCTYPE html ...

    练小习
  • 一个CSS画的灰太狼,IE下属于重口味,慎看!

    还有几个不错的,比如一个小日本制作的多啦A梦,一个Twitter的当机页面等等,大家可以搜下看看.不得不感叹做前端的哥们闲起来还真是可怕啊.Firefox是正常...

    练小习
  • 伪类以及伪元素的一些使用小技巧

    在浏览器版本越来越高的情况下,很多以前顾及到兼容问题不敢使用的html以及css属性现在已经很普遍的在使用了。比如一些伪类和伪元素。这里稍微提一下在实际工作中用...

    练小习
  • css中行高与字号

    贵哥的编程之路
  • 3D盒子动画

    ---------------------------------------------------------

    py3study
  • WordPress免插件仅代码实现“返回顶部、返回底部、评论”效果(样式一)

    本文所说的”返回顶部、返回底部、评论 “相信你知道是什么东东了吧?  一般你在各大网站的右下角都能看到类似的东东,但许多网站都普遍只有“返回顶部”的效果。不过就...

    Jeff
  • FF下修改美化文件域(input type=file)的样式

    有兄弟问我修改美化文件域(input type=file)在FF下的样式,暂时没看兼容.也没美化.等到了上海安定好了再好好修改下 <!DOCTYPE html ...

    练小习
  • 一个CSS画的灰太狼,IE下属于重口味,慎看!

    还有几个不错的,比如一个小日本制作的多啦A梦,一个Twitter的当机页面等等,大家可以搜下看看.不得不感叹做前端的哥们闲起来还真是可怕啊.Firefox是正常...

    练小习
  • 博客园博客排版(js样式实例)

    昨天在博客园中看到一位大神发的博客园样式排版博客,我一看。妈呀,太漂亮了,二话不说赶快学起,昨天我花了一天的时间,终于把我的博客也弄得有一丢丢像样了,有好东西,...

    Dawnzhang
  • 分页器常用样式

    .pager{font-size:12px;line-height:16px;text-align:center;} .pager a{display:inli...

    用户1075292

扫码关注云+社区

领取腾讯云代金券