jquery .animate() 碰撞检测-6ren

jquery .animate() 碰撞检测

转载作者：行者123 更新时间：2023-12-01 04:25:20

25

4

我正在使用 animate 在 div 网格内移动 div。作为测试，我将一些网格 div 设置为障碍。如果动画 div 与障碍物之一发生碰撞，我想结束动画。一个插件或者一段代码就可以了。我有点怀疑我用 .animate() 嗅到了错误的树，所以任何朝正确方向的插入或对我正在做的事情的改进都是值得赞赏的:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html lang="en">
<head>
<meta charset="utf-8">
<title>Game Test</title>
<!-- meta tags -->
<meta name="keywords" content="">
<meta name="description" content="">

<!-- javascript -->
<script src="../js/jquery.js"></script>
<script language="javascript">

//set up a var for the cube to check to see if it is moving
    var move = true;

    //set up gameBoard parameters
    var minX = 100;
    var maxX = 1000;
    var minY = 200;
    var maxY = 500;

$(document).ready(function(){

    $(".mapGrid").click(function() {

        //get the locations of all the obstacles
        var obstacles = new Array();
        var mapGrid = $(".mapGrid").each(function() { 
            if($(this).attr("isObstacle") == "true") {

                obstacles.push($(this));
            }
        });

        //get position of div clicked
        var divPos = $(this).position();

        //get cube location
        var cubePos = $("#gameCube").position();
        var cubeLeft = cubePos.left - 101;
        var cubeTop = cubePos.top - 101;

        var animateX = (divPos.left - cubeLeft);
        var animateY = (divPos.top - cubeTop);

        $("#gameCube").animate({"left": "+=" + animateX + "px"}, "slow");
        $("#gameCube").animate({"top" : "+=" + animateY + "px"}, "slow");

    });

});

</script>

<!-- stylesheets -->

<style>

#gameCube { 
    position: absolute;
    top: 101px;
    left:101px;
    background-color: #ff0044;
    width: 40px;
    height: 40px;
    z-index: 1;
}

#gameBoard {
    position: absolute;
    top: 100px;
    left:100px;
    border: 1px solid black; 
    width: 1000px;
    height: 500px;
    z-index: 0;
}

    #gameBoard div.mapGrid { 
        background-color: #cccccc;
        float: left;
        height: 50px;
        width: 50px;
    }

        #gameBoard div.mapGrid img { 
            float: left;
        }
</style>

<!--conditional comments -->

</head>

<body>

<div id="msgBox"></div>
<div id="gameCube">&nbsp;</div>
<div id="gameBoard">


<?php 

    $rows = 10;
    $cols = 20;
    $x=-100; 
    $y=-100;

    $obstacles = array("0" => array("1", "5"), "1" => array("4", "10"), "2" => array("6", "18"), "3" => array("7", "2"), "4" => array("8", "11")); 

    //loop through the columns
    for($r=0; $r<$rows; $r++) { 

        //loop through the rows
        if ($r == 0) { 

            //loop through the columns
            for($c=0; $c<$cols; $c++) { 
                print "<div id=\"mapGrid_" . $r . "_" . $c . "\" row=\"" . $r . "\" col=\"" . $c . "\" class=\"mapGrid\" >" . $r . "::" . $c . "</div>";
            }
        } else { 

            $x=$x+100;
            $y=$y+100;

            for($c=0; $c<$cols; $c++) { 

                $isObstacle = false;

                //loop through the obstacles
                for($o=0; $o<count($obstacles); $o++) { 

                    $thisObsArray = $obstacles[$o];
                    $thisObsRow = $thisObsArray[0];
                    $thisObsCol = $thisObsArray[1];

                    if ($thisObsRow == $r) { 
                        if ($thisObsCol == $c) { 
                            $isObstacle = true; 
                        }
                    }

                }

                if($isObstacle == true) { 
                    print "<div id=\"mapGrid_" . $r . "_" . $c . "\" row=\"" . $r . "\" col=\"" . $c . "\" class=\"mapGrid\"  isObstacle=\"true\" style=\"background-Color: #44ff66; position: relative; top: " . $y. "px; left: " . $x . "px; \">" . $r . "::" . $c . "</div>";
                } else { 
                    print "<div id=\"mapGrid_" . $r . "_" . $c . "\" row=\"" . $r . "\" col=\"" . $c . "\" class=\"mapGrid\"  isObstacle=\"false\" style=\"position: relative; top: " . $y. "px; left: " . $x . "px; \">" . $r . "::" . $c . "</div>";
                }
            }

            $y=$y-100;
            $x=-100; 
        }
    }
?>
</div>

</body>
</html>

最佳答案

下面是 jQuery 动画和碰撞的简单实现:http://jsfiddle.net/itechnology/XKJKD/

这里发布了类似的问题:jQuery collision detection during animation其中引用了一个看起来很有前途的 jQuery 碰撞插件:http://sourceforge.net/projects/jquerycollision/

关于jquery .animate() 碰撞检测，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6837167/

25

4

0

文章推荐： jquery - 简单的ajax和jquery ajax

文章推荐： python - 在 Python 中从制表符分隔的文件中读取并导出单列

文章推荐： python - 是否可以对除预定义单词之外的所有单词进行标记？

windows-8 - 从 Metro 应用程序检测桌面可用性(检测 ARM、检测 Windows RT 系统)
这是一个与 Get OS-Version in WinRT Metro App C# 相关的问题但不是它的重复项。是否有任何选项可以从 Metro 应用程序检测系统上是否有可用的桌面功能？据我所知，
Android闹钟广播/检测
我想在闹钟响起时做点什么。例如， toast 或设置新闹钟。我正在寻找可以检测闹钟何时响起的东西。首先，我在寻找广播 Action ，但找不到。也许是我的错？当闹钟响起时，还有其他方法可以做些什么吗
security - 检测、更改或删除现有的变异观察者
如果某个 JS 添加了一个突变观察者，其他 JS 是否有可能检测、删除、替换或更改该观察者？我担心的是，如果某些 JS 旨在破坏某些 DOM 元素而不被发现，那么 JS 可能想要摆脱任何观察该 DOM
CUDA的 torch 检测
Closed. This question does not meet Stack Overflow guidelines。它当前不接受答案。想要改善这个问题吗？更新问题，以便将其作为on-topi
Android:检测 USB
有没有办法在您的 Activity/应用程序中(以编程方式)知道用户已通过 USB 将您的手机连接到 PC？最佳答案有人建议使用 UMS_CONNECTED自最新版本的 Android 起已弃用
javascript - 检测/测量滚动速度
我正在想办法测量速度滚动事件，这将产生某种代表速度的数字(相对于所花费的时间，从滚动点 A 到点 B 的距离)。我欢迎任何以伪代码形式提出的建议...... 我试图在网上找到有关此问题的信息，但找不
Javascript 检测 Skype？
某些 JavaScript 是否可以检测 Skype 是否安装？我问的原因是我想基于此更改链接的 href:如果未安装 Skype，则显示一个弹出窗口，解释 Skype 是什么以及如何安装它，如果已
macos - 检测 CGAsociateMouseAndMouseCursorPosition
我们正在为 OS X 制作一个使用 Quartz Events 移动光标的用户空间设备驱动程序，当游戏(尤其是在窗口模式下运行的游戏)无法正确捕获鼠标指针时，我们遇到了问题(= 将其包含/保留在其窗口
AngularJS - 检测、停止和取消路线更改
我可以在 Controller 中看到事件 $routeChangeStart，但我不知道如何告诉 Angular 留下来。我需要弹出类似“您要保存、删除还是取消吗？”的信息。如果用户选择取消，则停留
java - 圆形阵列环路，检测
我正在解决一个问题，并且已经花了一些时间。问题陈述:给你一个正整数和负整数的数组。如果索引处的数字 n 为正，则向前移动 n 步。相反，如果为负数(-n)，则向后移动 n 步。假设数组的第一个元素向前
javascript - 检测[i]值
我试图建立一个条件，其中 [i] 是 data.length 的值，问题是当有超过 1 个值时一切正常，但当只有 1 个值时，脚本不起作用。 out.href = data[i].hr
java - 物体识别/检测？
这是我的问题，我需要检测图像中的 bolt 和四分之一，我一直在搜索并找到 OpenCV，但据我所知它还没有在 Java 中。你们打算如何解决这个问题？最佳答案实际上有一个 OpenCV 的 Ja
Java - 检测 ping
是否可以检测 ping？ IE。设备 1 ping 设备 2，我想要可以在设备 2 上运行的代码，该代码可以在设备 1 ping 设备时进行检测。最佳答案 ping 实用程序使用的字面消息(“ICM
用于分布式累积批处理作业的 Prometheus 检测
我每天多次运行构建脚本。我的感觉是我和我的同事花费了大量时间等待这个脚本执行。现在想知道:我们每天花多少时间等待脚本执行？ .我可以对总体平均值感到满意，即使我真的很想拥有每天的数据(例如“上周一我们
iphone - 检测/修复内存泄漏
我已经完成了对项目的编码，但是当我在客户端中提交了源代码时，就对它进行了测试，然后检测到内存泄漏。我已经在Instruments using Leaks中进行了测试。我遇到的问题是AVPlayer和
检测 Callable 是否是静态的
我想我可以用 std.traits.functionAttributes 来做到这一点，但它不支持 static。对于任何类型的可调用对象(包含 opCall 的结构)，我如何判断该可调用对象是否使用
r - 检测/确保在多核中使用多核
我正在使用多核 R 包中的并行和收集函数来并行化简单的矩阵乘法代码。答案是正确的，但并行版本似乎与串行版本花费的时间相同。我怀疑它仅在一个内核上运行(而不是在我的机器上可用的 8 个内核!)。有没有
Python 检测 EOF
我正在尝试在读取 csv 文件时编写一个这样的 if 语句: if row = [] or EOF: do stuff 我在网上搜索过，但找不到任何方法可以做到这一点。帮忙？最佳答案 wit
javascript - 检测/捕获字体大小变化的最佳方法是什么？
我想捕捉一个 onFontSizeChange 事件然后做一些事情(比如重新渲染，因为浏览器已经改变了我的字体大小)。不幸的是，不存在这样的事件，所以我必须找到一种方法来做到这一点。我见过有人在不可
c# - 检测/监听服务启动和停止状态变化
我有一个使用 Windows 服务的 C# 应用程序，该服务并非始终打开，我希望能够在该服务启动和关闭时发送电子邮件通知。我已经编写了电子邮件脚本，但我似乎无法弄清楚如何检测服务状态更改。我一直在阅

首页

博学

6Ren·AI

商城

jquery .animate() 碰撞检测