jQuery 碰撞-6ren

jQuery 碰撞

转载作者：行者123 更新时间：2023-12-01 06:29:22

我正在用 jQuery Collision 编写这个游戏，它使用键盘按键来移动 div，当一个 div 接触另一个 div 时，它应该防止重叠。

我到底该怎么做？

HTML ----

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <link href="style.css" rel="stylesheet" />

    <script src="jquery.min.js" rel="javascript"></script>
    <script src="game.js" rel="javascript"></script>
    <script src="jquery-collision-1.0.1.js" rel="javascript"></script>
    <script src="jquery-ui-draggable-collision-1.0.1.js" rel="javascript"></script>

</head>
<body>

<div id="office">

    <div class="popup">
        <p>hello desk</p>
        <a class="close">X</a>
    </div>

    <div class="chris"></div>

    <!--Rian, Peter, Chris, Christopher ---------------- DESK -->
    <div class="desk-full" style="position: absolute; right: 50px; top: 50px;">

        <div class="christopher-stuff"></div>

    </div>

    <!--Adrian, Tatam, Ellize ---------------- DESK -->
    <div class="desk-full" style="position: absolute; right: 50px; top: 300px;">

    </div>

</div>

</body>
</html>

JAVASCRIPT----

$(document).ready(function(){

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

var KEY = {
    UP: 38,
    DOWN: 40,
    LEFT: 37,
    RIGHT: 39
}

// a global object to store all global variable used for the game
var office = {
}

// an array to remember which key is pressed and which is not.
office.pressedKeys = [];

$(function(){
    // set interval to call gameloop every 30 milliseconds
    office.timer = setInterval(gameloop,30);

    // mark down what key is down and up into an array called "pressedKeys"
    $(document).keydown(function(e){
        office.pressedKeys[e.keyCode] = true;
    });
    $(document).keyup(function(e){
        office.pressedKeys[e.keyCode] = false;
    });
});

// this function is called every 30 milliseconds 
function gameloop()
{
    moveMe();
    collideDetection();
}

function moveMe()
{  

    if (office.pressedKeys[KEY.UP]) // arrow up
    {
        var direction = parseInt($(".chris").css("top"));
        $(".chris").css({
                top: direction-5,
                background: "url(chris-top.gif) no-repeat !important",
                width: "43px",
                height: "44px"
            }); 
    }
    if (office.pressedKeys[KEY.DOWN]) // arrow down
    {
        var direction = parseInt($(".chris").css("top"));
        $(".chris").css({
            top: direction+5,
            background: "url(chris-down.png) no-repeat !important",
            width: "48px",
            height: "25px"
            });
    }
    if (office.pressedKeys[KEY.LEFT]) // left
    {
        var direction = parseInt($(".chris").css("left"));
        $(".chris").css({
            left: direction-5,
            background: "url(chris-left.gif) no-repeat !important",
            width: "43px",
            height: "44px"
            });
    }
    if (office.pressedKeys[KEY.RIGHT]) // right
    {
        var direction = parseInt($(".chris").css("left"));
        $(".chris").css({
            left: direction+5,
            background: "url(chris-right.gif) no-repeat !important",
            width: "43px",
            height: "44px"
            });         
    }



        if (office.pressedKeys[KEY.UP] & office.pressedKeys[KEY.RIGHT]) // arrow up
    {
        $(".chris").css({
                background: "url(chris-top-right.png) no-repeat left top !important",
                width: "43px",
                height: "44px"
            }); 
    }
        if (office.pressedKeys[KEY.UP] & office.pressedKeys[KEY.LEFT]) // arrow up
    {
        $(".chris").css({
                background: "url(chris-top-left.png) no-repeat !important",
                width: "43px",
                height: "44px"
            }); 
    }
        if (office.pressedKeys[KEY.DOWN] & office.pressedKeys[KEY.RIGHT]) // arrow down
    {
        $(".chris").css({
                background: "url(chris-down-right.png) no-repeat !important",
                width: "43px",
                height: "44px"
            });
    }
        if (office.pressedKeys[KEY.DOWN] & office.pressedKeys[KEY.LEFT]) // arrow down
    {
        $(".chris").css({
                background: "url(chris-down-left.png) no-repeat !important",
                width: "43px",
                height: "44px"
            });
    } 
}

function collideDetection(){
    var chrisY = parseInt($(".chris").css("top"));
    var chrisX = parseInt($(".chris").css("left"));

    var chrisY = chrisY + 50;
    var chrisX = chrisX + 50;

    // -------------------- jQuery Collision Dtection and Prevention of Overlapping ---------------------
    var hit_list = $(".chris").collision( { obstacle: ".desk-full", preventCollision: true } );

    var officeHeight = parseInt($("#office").height());
    var officeWidth = parseInt($("#office").width());

    if(shipX <= 0) {
        $(".chris").css({
            left: "0",
            background: "url(chris-right.png) no-repeat !important",
            width: "25px",
            height: "48px"
        }); 
        }

    if(chrisX > officeWidth) {
        $(".chris").css({
            left: "0px",
            background: "url(chris-left.png) no-repeat !important",
            width: "25px",
            height: "48px"
        }); 
        }

    if(chrisX <= 0) {
        $(".chris").css({
            top: "0",
            background: "url(chris-down.png) no-repeat !important",
            width: "48px",
            height: "25px"
        }); 
        }

    if(chrisY > officeHeight) {
        $(".chris").css({
            top: "0px",
            background: "url(chris-up.png) no-repeat !important",
            width: "48px",
            height: "25px"
        }); 
        }
}

});    
});

最佳答案

$("#right").click(function(){
  $(".block").animate({"left": "+=50px"}, "fast", checkCollisions);
});

$("#left").click(function(){
  $(".block").animate({"left": "-=50px"}, "fast", checkCollisions);
});

$("#up").click(function(){
  $(".block").animate({"top": "-=50px"}, "fast", checkCollisions);
});

$("#down").click(function(){
  $(".block").animate({"top": "+=50px"}, "fast", checkCollisions);
});

function getPositions(box) {
  var $box = $(box);
  var pos = $box.position();
  var width = $box.width();
  var height = $box.height();
  return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];
}
        
function comparePositions(p1, p2) {
  var x1 = p1[0] < p2[0] ? p1 : p2;
  var x2 = p1[0] < p2[0] ? p2 : p1;
  return x1[1] > x2[0] || x1[0] === x2[0] ? true : false;
}

function checkCollisions(){
  var box = $(".bomb")[0];
  var pos = getPositions(box);

  var pos2 = getPositions(this);
  var horizontalMatch = comparePositions(pos[0], pos2[0]);
  var verticalMatch = comparePositions(pos[1], pos2[1]);            
  var match = horizontalMatch && verticalMatch;
  if (match) { $("body").append("<p>COLLISION !!!</p>"); }
}

.block {
  position:absolute;
  background-color:#abc;
  left:50px;
  width:90px;
  height:90px;
  margin:5px;
}
.bomb {
  position:absolute;
  background-color:red;
  left:250px;
  width:40px;
  height:40px;
  margin:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="left">left</button>
<button id="right">right</button>
<button id="up">up</button>
<button id="down">down</button>

<div class="block"></div>
<div class="bomb"></div>

您可以使用JQuery Collision和 JQuery UI Draggable Collision .

JQuery Collision 扩展返回两个选择器之间的冲突。处理填充、边距、边框，并可以确定重叠或外部部分。

使用JQuery Collision，您可以找到所有重叠:

var list = $("#selector").collision(".obstacle");

返回与“#selector”重叠的所有元素的列表。

使用JQuery UI Draggable，您可以在拖动元素并发生碰撞时绑定(bind)事件，并且可以防止碰撞:

$("#selector").draggable( { obstacle: ".obstacle", preventCollision: true } );

一些用于碰撞检测的插件:
Collidable Draggables ,
Collision Check Plugin v1.1 ,
$.event.special.drop

另外:

var overlaps = (function () {
    function getPositions( elem ) {
        var pos, width, height;
        pos = $( elem ).position();
        width = $( elem ).width();
        height = $( elem ).height();
        return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];
    }

    function comparePositions( p1, p2 ) {
        var r1, r2;
        r1 = p1[0] < p2[0] ? p1 : p2;
        r2 = p1[0] < p2[0] ? p2 : p1;
        return r1[1] > r2[0] || r1[0] === r2[0];
    }

    return function ( a, b ) {
        var pos1 = getPositions( a ),
            pos2 = getPositions( b );
        return comparePositions( pos1[0], pos2[0] ) && comparePositions( pos1[1], pos2[1] );
    };
})();

$(function () {
    var area = $( '#area' )[0],
        box = $( '#box0' )[0],
        html;
    
    html = $( area ).children().not( box ).map( function ( i ) {
        return '<p>Red box + Box ' + ( i + 1 ) + ' = ' + overlaps( box, this ) + '</p>';
    }).get().join( '' );

    $( 'body' ).append( html );
});

body {
    padding: 30px;
    color: #444;
    font-family: Arial, sans-serif;
}

h1 {
    font-size: 24px;
    margin-bottom: 20px;
}

#area {
    border: 2px solid gray;
    width: 500px;
    height: 400px;
    position: relative;
}

#area > div {
    background-color: rgba(122, 122, 122, 0.3);
    position: absolute;
    text-align: center;
    font-size: 50px;
    width: 60px;
    height: 60px;
}

#box0 {
    background-color: rgba(255, 0, 0, 0.5) !important;
    top: 150px;
    left: 150px;
}

#box1 {
    top: 260px;
    left: 50px;
}

#box2 {
    top: 110px;
    left: 160px;
}

#box3 {
    top: 200px;
    left: 200px;
}

#box4 {
    top: 50px;
    left: 400px;
}

p {
    margin: 5px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Detect overlapping</h1>
<div id="area">
    <div id="box0"></div>
    <div id="box1">1</div>
    <div id="box2">2</div>
    <div id="box3">3</div>
    <div id="box4">4</div>
</div>

关于jQuery 碰撞，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9392687/

文章推荐： python - 如何在Python中正确打印CSV文件

文章推荐： laravel - 多个路由到同一个 Laravel 资源 Controller 操作

文章推荐： java - ArrayList 可以为 null 并且大小 > 0 吗？

jQuery 碰撞
我正在用 jQuery Collision 编写这个游戏，它使用键盘按键来移动 div，当一个 div 接触另一个 div 时，它应该防止重叠。我到底该怎么做？ HTML ----
Java 2D 碰撞
这个问题已经有答案了: 已关闭11 年前。 Possible Duplicate: Java 2D Collision? 嘿，大家好，我有另一篇关于这个问题的帖子刚刚消失了，所以我想我会尝试得到一些关
Java 2D 碰撞？
嘿伙计们，我正在制作一个 2D java 游戏，我正在尝试找出如何制作一个好的碰撞代码。我目前正在使用以下代码: public void checkCollision() { Rect
java - 碰撞 - 识别物体何时停止碰撞
我的意思是，当我与实体的侧面碰撞并想要跳跃时，我无法向右/向左移动，因为当我与右侧/左侧的实体碰撞时，我有一个标志可以防止这种情况发生，例如所以: 这是我用来检测碰撞的代码: public void
python - Sprite 碰撞
所以我正在运行 collide_mask 检查，以删除与玩家 Sprite 碰撞时的生物实例。它工作得很好。 pygame.sprite.spritecollide(player, mobs, Tru
2D 碰撞 - 检测侧面
我正在研究我的砖 block splinter 机，并制作一个适当的碰撞系统，以便使球逻辑地切换方向，我必须检测球与砖 block 的哪一侧碰撞。这是我当前的脚本: int sprite_collid
swift - 碰撞 --> 不要与颜色开关等任何东西发生碰撞
我做了一个类似颜色切换的游戏。唯一的问题是玩家与每种颜色发生碰撞...... 这是我从github上获取的代码: https://github.com/prometheon/MLNimbleNinja
javascript - Canvas 碰撞？
测试我的游戏，当用户和怪物发生碰撞时，我希望弹出警报但没有成功: function die() { for (var i = 0; i < monster.length; i++) { i
c++ - vector 碰撞
我对 vector 很陌生，这是我第一次真正使用它们进行碰撞检查。这是我的项目，我对如何实现碰撞感到困惑。我目前的碰撞检查和响应代码似乎是……糟糕的设计。这是我的代码: for(auto it =
javascript - Canvas 碰撞
我是 javascript 的新手，正在尝试找出如何与球和木板发生碰撞，这将停止游戏并提醒玩家“你输了”。但我只想让红球击中木板，让蓝球不接触地继续前进。这是我正在处理的代码。 (我不介意你是否可以帮
Android OnClickListener 碰撞？
很抱歉提出奇怪的问题，我还是 Android 编程的新手。我有以下代码: import android.content.DialogInterface.OnClickListener; import
iphone - UIPanGestureRecognizer 碰撞
我有 6 个 UIImageView，每个都连接到 UIPanGestureRecognizer，它们都连接到相同的方法。方法是: - (IBAction)handlePan:(UIPanGestur
python - 使用视锥体检查边界框相交/碰撞
我想根据某些对象的轴对齐边界框检查视锥体，以粗略检查这些对象是否在视野中。速度不是什么大问题。最佳答案我发现构建视锥体的世界空间模型并检查与它的 bbox 碰撞是错误的方法。一个更简单的方法是以
ios - Spritekit 碰撞
我项目中的所有这些代码都运行良好，但我遇到了一些问题。当飞机接触到屏幕的边界时，它会在接触后开始旋转。我不知道如何让它在碰到屏幕边界时不旋转。只有在我使用时才会出现这个问题: plane.physic
ios - 获取已删除实体的关系。 (碰撞)
在应用程序启动时，我在后台线程中删除旧的 CoreData 行，下面是我的代码。我的问题类似于城市街道问题。所以，我有两个实体，Street 和 City，我有一个关系 City > Street，因
ios - *碰撞*通过位掩码
我试图不接触穴居人和其他带有碰撞位掩码的图像，但我的穴居人击中了一切。 func addCaveManBitMasks(){ caveManNode.physicsBody?.category
javascript - HTML5 - 碰撞
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visit the help center . 关闭 1
python - PyGame 碰撞？
如何在 PyGame 中找到字符和图像之间的碰撞？我已经从图像中绘制了一个玩家，并从瓷砖中绘制了墙壁，那么我如何检测这些碰撞？最佳答案如果你使用pygame Rect类来表示对象的边界，您可以使用
c - ftok() 碰撞
我正在使用 ftok() 为 C 应用程序使用的共享内存段生成标识符。我有问题，在一个盒子上我与 root 使用的标识符发生冲突。在这种情况下，我可以通过破解代码来修复它，但我想要一个更强大的解决方案
javascript - 与物体(墙壁)碰撞
这个问题在这里已经有了答案: JavaScript: Collision detection (10 个回答) 10 个月前关闭。检测 2 个物体(墙壁)碰撞的好方法。是的，不仅仅是检测，还有进一步

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jQuery 碰撞