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

相关文章

来自专栏软件开发

C语言 第四章 分支结构练习

一、输入语文,数学成绩,根据平均分分3档 #include "stdio.h" void main() { //接受用户输入 float chi...

17610
来自专栏咸鱼不闲

Java自定义标签

下面就拿2.0规范,格式化时间功能实例举个栗子: 1.创建标签库类 (继承SimpleTagSupport,实现doTag()即可)

902
来自专栏视觉求索无尽也

算法:动态规划(DP)入门实践

912
来自专栏云计算教程系列

如何在Python 3中安装pandas包和使用数据结构

Python pandas包用于数据操作和分析,旨在让您以更直观的方式处理标记或关系数据。

1620
来自专栏数据分析

[数据分析工具] Pandas 功能介绍(二)

条件过滤 我们需要看第一季度的数据是怎样的,就需要使用条件过滤 ? 体感的舒适适湿度是40-70,我们试着过滤出体感舒适湿度的数据 ? 最后整合上面两种条件,在...

3416
来自专栏数据科学学习手札

(数据科学学习手札03)Python与R在随机数生成上的异同

随机数的使用是很多算法的关键步骤,例如蒙特卡洛法、遗传算法中的轮盘赌法的过程,因此对于任意一种语言,掌握其各类型随机数生成的方法至关重要,Python与R在随机...

2657
来自专栏数据分析

[数据分析工具] Pandas 功能介绍(二)

我们需要看第一季度的数据是怎样的,就需要使用条件过滤

2127
来自专栏武培轩的专栏

剑指Offer-扑克牌顺子

题目描述 LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张^_^)...他随机从中抽出了5张牌,想测测自己的手气...

2284
来自专栏小樱的经验随笔

51Nod 1080 两个数的平方和(数论,经典题)

1080 两个数的平方和 基准时间限制:1 秒 空间限制:131072 KB 分值: 5         难度:1级算法题 给出一个整数N,将N表示为2个整数...

3446
来自专栏C语言及其他语言

[每日一题]宏定义

前面题目主要是自定义函数的题,相信经过这些题目的训练,大家对自定义函数的理解想必更近了一步。接下来呢,我们主要来练习跟自定义函数异曲同工的宏定义,先看看下面这题...

3116

扫码关注云+社区