Question

我正在尝试检查动画功能中jQuery中的冲突。继承我的代码，

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>nothing</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function() {
        $(document).keydown(function(event) {
            if (event.which == 37) {
                $('.button0 input').animate({
                    'left': '+=' + Math.cos(90 * Math.PI / 180) * 30 + 'px',
                    'top': '+=' + Math.sin(90 * Math.PI / 180) * 30 + 'px'
                }, 0);
            }
        });
        $(document).keydown(function(event) {
            if (event.which == 39) {
                $('.button0 input').animate({
                    'left': '+=' + Math.cos(180 * Math.PI / 180) * 30 + 'px',
                    'top': '+=' + Math.sin(180 * Math.PI / 180) * 30 + 'px'
                }, 0);
            }
        });
        $(document).keydown(function(event) {
            if (event.which == 38) {
                $('.button0 input').animate({
                    'left': '+=' + Math.cos(270 * Math.PI / 180) * 30 + 'px',
                    'top': '+=' + Math.sin(270 * Math.PI / 180) * 30 + 'px'
                }, 0);
            }
        });
        $(document).keydown(function(event) {
            if (event.which == 40) {
                $('.button0 input').animate({
                    'left': '+=' + Math.cos(0 * Math.PI / 180) * 30 + 'px',
                    'top': '+=' + Math.sin(0 * Math.PI / 180) * 30 + 'px'
                }, 0);
            }
        });
    });
    </script>
    <style type="text/css">
    .button0 input{
    position:fixed;
    left:142px;
    top:77px;
    font-family:Arial;
    font-size:8px;
    font-weight:NORMAL;
    }
    .button1 input{
    position:fixed;
    left:333px;
    top:58px;
    font-family:Arial;
    font-size:8px;
    font-weight:NORMAL;
    }
    </style>
    <body>
    <div class="button0"><input type="button" style="width: 59px;height: 58px;" value="Button 0"/></div>
    <div class="button1"><input type="button" style="width: 113px;height: 76px;" value="Button 1"/></div>
    </body>
    </html>

是否存在我们可以检查button0是否与button1碰撞的事件，

（在行动期间不进行检查）

这样的事情会很好（将它作为一个事件）：

$('.button0 input').collision(function(".button1 input"){

Answer 1

jQuery不提供此类功能。您必须编写自己的冲突检测功能或使用3d-party jQuery库。你试过gameQuery库吗？

此question值得一看。它有jQuery和纯JavaScript解决方案。

jQuery中的碰撞检测

1 个答案: