détecter des collisions sur la toile

im essayant de faire un jeu où des collisions se produisent entre le protagoniste et l'antagoniste. Je ne peux pas obtenir la collision de travailler si, je l'ai essayé d'utiliser la position x et y, puis les positions x et y, plus la largeur et la hauteur du protagoniste et l'antagonistedétecter des collisions sur la toile

var canvas = document.getElementById('canvas'); 
 
var PX = 10; 
 
var PY = 10; 
 
var PW = 10; 
 
var PH = 10; 
 
var P = PX + PY; 
 
var EX1 = 100; 
 
var EY1 = 100; 
 
var EW1 = 10; 
 
var EH1 = 10; 
 
var E1 = EX1 + EY1; 
 

 
window.addEventListener("keydown", charMove); 
 
window.addEventListener("keyup", charMove); 
 
window.addEventListener("keypress", charMove); 
 

 
window.onload = function() { 
 
context = canvas.getContext("2d"); 
 
canvas.style.background = "black"; 
 
var framesPerSecond = 30; 
 
setInterval(function() { 
 
\t draw(); 
 
\t move(); 
 
}, 1000/framesPerSecond); 
 
} 
 

 
function draw() { 
 
\t //EX context.fillRect(PosX, PosY, width, height); 
 
\t //draws protagonist 
 
\t context.beginPath(); 
 
\t context.clearRect(0, 0, canvas.width, canvas.height); 
 
\t context.fillStyle = "blue" 
 
\t context.fillRect(PX, PY, PW, PH); 
 
\t context.stroke(); 
 
\t context.closePath(); 
 
\t //draws antagonist(s) 
 
\t context.beginPath(); 
 
\t context.fillStlyle = "red"; 
 
\t context.fillRect(EX1, EY1, EW1, EH1); 
 
\t context.stroke(); 
 
\t context.closePath(); 
 
} 
 
function move() { 
 
} 
 
function charMove(){ 
 
\t var x = event.which || event.keyCode; 
 

 
\t if(x == 37){ 
 
\t \t PX -= 1; 
 
\t } 
 
\t if(x == 38){ 
 
\t \t PY -= 1; 
 
\t } 
 
\t if(x == 39){ 
 
\t \t PX += 1; \t 
 
\t } 
 
\t if(x == 40){ 
 
\t \t PY += 1; 
 
\t } 
 
} 
 
//detect collision 
 
setInterval(function() { 
 
\t if(PX > EX1 || PX + PW < EX1 + EW1 && PY + PH > EY1 + EH1 || PY + PH < EY1 + EH1){ 
 
\t \t window.alert("collision"); 
 
\t } 
 

 
}, 1);

<html> 
 
<head> 
 
</head> 
 
<body> 
 
<canvas width="500px" height="500px" id="canvas" class="canvas"> 
 
</body> 
 
</html>

Source

2016-12-24 Liam Sperry

Votre formule de collision est erronée.

Ce problème est appelé collision de la zone de délimitation alignée sur l'axe.

Deux AABB entrent en collision si leurs projections à chaque axe entrent en collision. Dans votre cas 2-dimensinal vous devez considérer les projections horizontales et verticales.

Les projections sont des segments d'espace 1-d. Collision pour ceux-ci est très facile: si le début ou la fin d'un segment est sur l'autre, ils entrent en collision. Formellement start2 <= start1 <= end2 or start2 <= end1 <= end2

Dans le code:

intersects([p.x, p.x + p.width], [e.x, e.x + e.width]) && intersects([p.y, p.y + p.height], [e.y, e.y + e.height])

où

function intersects(seg1, seg2) { 
    return contains(seg1, seg2[0]) || contains(seg1, seg2[1]) 
} 
function contains(segment, point) { 
    return segment[0] <= point && point <= segment[1] 
}

Source

2016-12-24 01:37:36 Joonazan

Avez-vous des exemples de code comme une page Web qui pourrait me aider. Je suis plus à l'aise avec l'apprenant. –

Le code que j'ai écrit devrait fonctionner avec le vôtre. Si vous avez du mal à le comprendre, essayez de dessiner des collisions unidimensionnelles et bidimensionnelles sur papier. – Joonazan

Très bien merci, et joyeux noël! –

détecter des collisions sur la toile

Répondre

Questions connexes