Kolizja w js, jak wykryć?

Question

Próbuję napisać grę w js w której będzie się strzelać na bramkę. Mam problem z napisaniem kodu który wykryje mi kolizję piłki z bramkarzem. Może ktoś coś doradzi ?

KOD:

$(document).ready(function(){

var documentHeight = document.documentElement.clientHeight;

var margintop = (documentHeight/2)-230;

function checkKey(e) {
		// Wykrywanie kolizji:
		var rect1 = {x: parseInt(getComputedStyle($('#pilka')).left, 10), y: parseInt(getComputedStyle($('#pilka')).top, 10), width: parseInt(getComputedStyle($('#pilka')).width, 10), height: parseInt(getComputedStyle($('#pilka')).height, 10)};
		var rect2 = {x: parseInt(getComputedStyle($('#bramkarz')).left, 10), y: parseInt(getComputedStyle($('#bramkarz')).top, 10), width: parseInt(getComputedStyle($('#bramkarz')).width, 10), height: parseInt(getComputedStyle($('#bramkarz')).height, 10)};
		
		if (rect1.x < rect2.x + rect2.width &&
			rect1.x + rect1.width > rect2.x &&
			rect1.y < rect2.y + rect2.height &&
			rect1.height + rect1.y > rect2.y) {
			$('body').append(" GOOOOOOOL ");
			}
}

$('#container').css("margin-top", margintop);

$('#bramka'). click(function(){
	var x = Math.floor(Math.random() * 220 +1);
	var y = Math.floor(Math.random() * 40 +1);
	var str = Math.floor(Math.random() * 2 +1);
	
	if (str == 1)
	{
		x = x-(x*2);
	}
	$(this).html('<div id="bramkarz" style="left:'+x+'px; top:'+y+'px;"><img src="bramkarz.png" width="100" height="100" /></div>');
	var pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("container").offsetLeft;
	var pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("container").offsetTop;
	$('body').append(pos_x+" "+pos_y+" | ");
	
	if (pos_x < 278)
	{
		pos_new_x = (278 - pos_x);
		pos_x = pos_new_x;
		pos_x = pos_x-(pos_x*2);
	}
	else
	{
		pos_x = pos_x - 278;
	}
	
	pos_y = pos_y - 145;
	
	$('#pilka').animate(
		{
			'position' : 'fixed',
			'left' : pos_x,
			'top' : pos_y,
			'width' : '50px',
			'height' : '50px'
		}, 500);
		
	checkKey;	
	
	
	setTimeout(function(){
		$('#pilka').css({
			'position' : 'relative',
			'left' : '0',
			'top' : '135px',
			'width' : '100px',
			'height' : '100px'
		});
		$('#bramka').html('<div id="bramkarz"style="left:0px; top:40px;"><img src="bramkarz.png" width="100" height="100" /></div>');
	}, 1500);
});

	
});

 

Answer 1

W sieci znalazłem taki artykuł. Może będzie przydatny.
http://jsdn.pl/tworzenie-gier-w-javascript-kolizje-czesc-pierwsza/

Comments

Widziałem to i właśnie na podstawie tego próbowałem napisać kod, ale nie działa. Myślę że problem tkwi w tym ze tam jest to jakoś do obiektów zastosowane, a u mnie muszę wykryć kolizję dwóch div`ów.

---

Zdefiniuj jeszcze width tych divow. Czyli ich szerokość. Jest potrzebna przy wykryciu kolizji. Może to pomoże? Albo w funkcji gdzie wykrywasz kolizje, zmień 'rect.width' na wartość szerokości.

Rozumiem, że sprawdzanie kolizji następuje po każdym ruchu, tak? Pojawiają Ci się jakieś błędy w konsoli?

Answer 2

var rect1 = {x: parseInt(getComputedStyle($('#pilka')).left, 10), y: parseInt(getComputedStyle($('#pilka')).top, 10), width: parseInt(getComputedStyle($('#pilka')).width, 10), height: parseInt(getComputedStyle($('#pilka')).height, 10)};
        var rect2 = {x: parseInt(getComputedStyle($('#bramkarz')).left, 10), y: parseInt(getComputedStyle($('#bramkarz')).top, 10), width: parseInt(getComputedStyle($('#bramkarz')).width, 10), height: parseInt(getComputedStyle($('#bramkarz')).height, 10)};

Polecam popatrzeć na $.fn.offset – to zdecydowanie ułatwi obliczenia ;)

Comments

Heh widze że to nie takie proste, nie mogę się w tym ogarnąć.

---

Dzięki tej metodzie uzyskasz odległość elementu od lewego i górnego brzegu ekranu. Dodając do tego wymiary elementu otrzymasz obszar, jaki zajmuje. Więc wystarczy porównać z obszarem innego elementu, by wiedzieć, czy się stykają.

---

Załapałem o co chodzi, tylko teraz mam problem z ustaleniem pozycji piłki po oddaniu strzału. offset() podaje mi cały czas pozycje piłki przed strzałem ;/

Zmieniłem tak kod:

$(document).ready(function(){

var documentHeight = document.documentElement.clientHeight;

var margintop = (documentHeight/2)-230;

$('#container').css("margin-top", margintop);

$('#bramka'). click(function(){
    var x = Math.floor(Math.random() * 220 +1);
    var y = Math.floor(Math.random() * 40 +1);
    var str = Math.floor(Math.random() * 2 +1);
    
    if (str == 1)
    {
        x = x-(x*2);
    }
    $(this).html('<div id="bramkarz" style="left:'+x+'px; top:'+y+'px;"><img src="bramkarz.png" width="100" height="100" /></div>');
    var pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("container").offsetLeft;
    var pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("container").offsetTop;
    //$('body').append(pos_x+" "+pos_y+" | ");
    
    if (pos_x < 278)
    {
        pos_new_x = (278 - pos_x);
        pos_new_x = pos_new_x-(pos_new_x*2);
    }
    else
    {
        pos_new_x = pos_x - 278;
    }
    
    pos_y = pos_y - 145;
    
    $('#pilka').animate(
        {
            'position' : 'absolute',
            'left' : pos_new_x,
            'top' : pos_y,
            'width' : '50px',
            'height' : '50px'
        }, 300);
    
    
    
    //checkKey;    
    
    var pilka =  $('#pilka').offset();
    $('body').append("Pilka: "+pilka.left + " "+pilka.top+ " | ");
    var bramkarz = $('#bramkarz').offset();
    $('body').append("bramkarz: " + bramkarz.left + " " + bramkarz.top + " | ");
    
    
    setTimeout(function(){
        $('#pilka').css({
            'position' : 'relative',
            'left' : '0',
            'top' : '135px',
            'width' : '100px',
            'height' : '100px'
        });
        $('#bramka').html('<div id="bramkarz"style="left:0px; top:40px;"><img src="bramkarz.png" width="100" height="100" /></div>');
    }, 1500);
});

    
})

Stronkę wrzuciłem na mp66.linuxpl.info/osagol