обнаружение столкновений на холсте

im пытается создать игру, где происходят столкновения между главным героем и антагонистом. Я не могу получить столкновение, чтобы работать, хотя, я попытался с помощью х и у позиции, то х и у позиции плюс ширину и высоту главного героя и антагонистаобнаружение столкновений на холсте

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>

источник

2016-12-24 Liam Sperry

Ваша формула для столкновения неверна.

Эта проблема называется столкновением с косой совпадающей осью.

Два AABB сталкиваются, если их проекции на каждую ось сталкиваются. В вашем 2-мерном корпусе вам нужно рассмотреть горизонтальные и вертикальные выступы.

Проекции являются сегментами 1-го пространства. Столкновение для них очень просто: если начало или конец сегмента находится на другом, они сталкиваются. Формально start2 <= start1 <= end2 or start2 <= end1 <= end2

В коде:

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

где

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

источник

2016-12-24 01:37:36 Joonazan

у вас есть какие-либо пример кода, как веб-страницы, которые могли бы помочь мне. Я больше разбираюсь в ученике. –

Код, который я написал, должен работать с вашим. Если у вас возникли проблемы с этим, попробуйте выполнить одно- и двумерные столкновения на бумаге. – Joonazan

Хорошо, спасибо, и веселое рождество! –

обнаружение столкновений на холсте

ответ

Смежные вопросы