jQuery Collision

J'ai ce jeu je suis en train d'écrire avec jQuery Collision, et il utilise les touches du clavier pour déplacer un div, quand un div en contact avec une autre div, il doit éviter les chevauchements.

Comment diable puis-je faire?

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"
}); 
}
}
});    
});

InformationsquelleAutor Christopher | 2012-02-22

collision-detection jquery

JS:

$("#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>"); }
}

CSS:

.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;
}

HTML:

<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>

Vous pouvez utiliser JQuery Collision et JQuery UI Déplaçable Collision.

JQuery Collision extension renvoie la collision entre les deux sélecteurs. Poignées de rembourrage, de marge, de frontières, et peut déterminer le chevauchement ou la partie à l'extérieur.

Avec JQuery Collision vous pouvez trouver toutes les chevauchements:

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

Renvoie une liste de tous les éléments qui se chevauchent "#sélecteur".

Avec JQuery UI Déplaçable, vous pouvez lier un événement lorsque vous faites glisser un élément et une collision se produit et vous pouvez éviter la collision:

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

Des plugins pour la détection de collision:

Collidable Draggables,

Collision Vérifier le plug-in v1.1,

$.de l'événement.spécial.drop

Aussi :

JS:

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 );
});

CSS:

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;
}

HTML:

<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>

hey, merci pour la réponse. J'ai essayé cela avant, mais il ne détecte pas de collision...
Lequel avez-vous vérifier?
tous les em, je suis en essais chacun, ont un oeil à mon code
Veuillez utiliser les jsfiddle.net.

InformationsquelleAutor Panos Kal.

Vous devez vous connecter pour publier un commentaire.