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

相关文章

来自专栏owent

pbc的一个陈年老BUG

近期跟了一下pbc的lua-binding的一个老BUG,起源是我们客户端报了一个奇怪的问题,我们游戏里的某些功能的optional字段,服务器并没有下发数据,...

632
来自专栏aCloudDeveloper

MessageBeep - Play a System sound

There is a interesting function which can play a System sound. First let's see t...

1858
来自专栏菩提树下的杨过

struts2 异常处理3板斧

板斧1:找不到action的错误 ? 在struts.xml中参考如下配置 1 <struts> 2 3 ... 4 <package...

1876
来自专栏岑玉海

hbase源码系列(九)StoreFile存储格式

从这一章开始要讲Region Server这块的了,但是在讲Region Server这块之前得讲一下StoreFile,否则后面的不好讲下去,这块是基础,Re...

3345
来自专栏流媒体

Android平台下使用FFmpeg进行RTMP推流(视频文件推流)简介

前面已经讲到如何在Linux环境下编译FFmpeg以及在Android项目中使用,这一节就开始真正的使用FFmpeg。在Android平台下用FFmepg解析视...

982
来自专栏菩提树下的杨过

贴个Silverlight试试看

倒腾了半天,发现还是无法直接在编辑器里插入SL,直接切换到html视图,贴上sl的object代码后,一发布,居然自动识别为flash,无奈只能用iframe才...

1909
来自专栏salesforce零基础学习

salesforce 零基础学习(四十八)自定义列表分页之Pagination基类封装 ※※※

我们知道,salesforce中系统标准列表页面提供了相应的分页功能,如果要使用其分页功能,可以访问https://cloud.tencent.com/deve...

3117
来自专栏用户2442861的专栏

Spring+Mybatis+SpringMVC后台与前台分页展示实例(附工程)

      林炳文Evankaka原创作品。转载请注明出处http://blog.csdn.net/evankaka

592
来自专栏Ryan Miao

MongoDB分页的Java实现和分页需求的思考

传统关系数据库中都提供了基于row number的分页功能,切换MongoDB后,想要实现分页,则需要修改一下思路。

1203
来自专栏Flutter&Dart

DartVM服务器开发(第二十一天)--Dart中的Gson(jaguar_serializer)

将上面的Info改为List<Info> 重新运行命令pub run build_runner build 转换跟上面一样

681

扫码关注云+社区