Έλεγχος αν υπάρχει div

[rafinos]

Γεια σας παιδιά!

 

Έχω αυτό:

http://codepen.io/rafail/pen/qqNwoY

 

Ξέρω ότι δεν κάνει τίποτα αυτός ο κώδικας απλά αν κάποιος ξέρει και θέλει ας με βοηθήσει.

 

Για παράδειγμα αν πατήσω το κουτάκι "20", υπάρχει τρόπος να γίνει έλεγχος για το αν υπάρχει κάποιο div ακριβώς από κάτω ώστε στην περίπτωση που υπάρχει να μην προχωρήσει; 

 

Εν μέρει με νοιάζει να μην μπορεί να επικαλύψει ένα div ένα άλλο. 

[Ρεkλα]

Χμ, μια λυση ειναι με το index https://api.jquery.com/index/

Να βρεις δηλαδη το index αυτου που εγινε κλικ, και με το legth να βρισκει αν υπαρχει div απο κατω (οπου απο κατω = index του clicked + 5)

Επισης με το index μπορεις να πεις οτι αν το index > 19 (ξεκιναει απο το 0 το index) τοτε δεν παει παρακατω.

 

Με αντιστοιχο τροπο ελεγχεις για πανω,κατω,δεξια,αριστερα (μιας και φανταζομαι τι παιχνιδι θελεις να φτιαξεις )

 

 

edit: ΑΚΥΡΟ. τωρα ειδα οτι τα τοποθετεις με top.

 

 

σαν εναλλακτικη, στο τελευταιο κενο σημειο, θα εβαζα ενα div με transparent bg και θα το εκανα swap με αυτο στο οποιο εγινε κλικ. επειτα θα εφαρμοζα το παραπανω.

[rafinos]

Δεν μου φαίνεται και πολύ σωστό αυτό. 

Θέλεις να μου δώσεις ένα παράδειγμα; 

 

Αν δεις το δοκίμασα αυτό που λες στον κώδικά μου, αλλά δεν υπάρχει διαφορά (πέραν του ότι δεν κατεβαίνουν προς τα κάτω μόνο τα 21-24).

 

*Είδα το edit, αλλά δεν νομίζω αυτό που λες να είναι σωστό. 

Πως θα κινηθώ δεξιά και αριστερά; Επίσης πως δεν θα επικαλύψω κάποιο div με τον έλεγχο του index;

Επεξ/σία 15 Νοεμβρίου 2016 από rafinos

[Ρεkλα]

Το ξερω, για δες αυτο:

 

http://codepen.io/anon/pen/oYzvKj

 

απλα πρεπει να κανει ελεγχο με βαση το position του, αν μπορει να κινηθει πανω κατω δεξια αριστερα.

[rafinos]

Αυτό που έκανες είναι εν μέρη σωστό, απλά αλλάζει θέση με όποιο div και αν επιλέξεις. 

 

Δεν πειράζει όμως γιατί την ίδια στιγμή έκανα ακριβώς την ίδια σκέψη (και νομίζω πως το σκεπτικό είναι σωστό) και κάνω δοκιμές με το offset.

 

Σε ευχαριστώ για τον κόπο σου. 

[Ρεkλα]

απλά αλλάζει θέση με όποιο div και αν επιλέξεις. 

 

Ναι, εξ'ου και η check_my_position η οποια θα ελεγχει για valid κινησεις. 

 

No problem, αλλα ας απαντησει και καποιος που ξερει καλυτερα και ασχολειται πιο πολυ.

[rafinos]

Νομίζω πως το έκανα.

Όποιος θέλει ας ρίξει μια ματιά: http://codepen.io/rafail/pen/qqNwoY

[vadou]

Μια χαρά. Κάντα shuffle, βάλε και ένα counter για τις κινήσεις και έτοιμο. Παιχνιδάκι σκάλωμα. xD

[lionheart82]

Ωραίος

[rafinos]

Παιδιά στον παρακάτω κώδικα, σε περίπτωση που ισχύει κάποιο από τα if και κινείται το "κουτί", πως γίνεται να παίρνω τις νέες τιμές των offsets πριν το "κλείσιμο" του click;

$(document).on("click",".box",function(){
	var transparent = $("#transparent");
	var transparent_left = transparent.offset().left;
	var transparent_top = transparent.offset().top;
	var box = $(this);
	var this_top = box.offset().top;
	var this_left = box.offset().left;
	console.log(this_top +" "+this_left);
	
	if(transparent_top === (this_top + 100)
	&& transparent_left === this_left){ //Πηγαίνει προς τα κάτω το box
		box.finish().animate({top: "+=100"});
		transparent.finish().animate({top: "-=100"});
	}else if(transparent_top === this_top
	&& transparent_left === (this_left + 100)){ //Πηγαίνει προς τα δεξιά το box
		box.finish().animate({left: "+=100"});
		transparent.finish().animate({left: "-=100"});
	}else if(transparent_top === this_top 
	&& (transparent_left + 100) === this_left){ //Πηγαίνει προς τα αριστερά το box
		box.finish().animate({left: "-=100"});
		transparent.finish().animate({left: "+=100"});
	}else if((transparent_top + 100) === this_top
	&& transparent_left === this_left){ //Πηγαίνει προς τα πάνω το box
		box.finish().animate({top: "-=100"});
		transparent.finish().animate({top: "+=100"});
	}
	this_top = box.offset().top; 
	this_left = box.offset().left;
	console.log(this_top +" "+this_left); //γιατί μου επιστρέφει την ίδια τιμή με το παραπάνω console.log;;;;;
});

Επεξ/σία 17 Νοεμβρίου 2016 από rafinos

[Ρεkλα]

Πρεπει να τελειωσει το animate για να βρεις τις νεες τιμες.

 

2 Λυσεις:

 

1. βαζεις callback function στο animate (με αρνητικο τα 4 ιδια κομματια κωδικα)

2. Χρησιμοποιεις settimeout το οποιο θα εκτελεστει μετα τα 100ms

[rafinos]

Οκ ευχαριστώ πολύ! 

 

Τη λύση με το callback θα κάνω. Θα φτιάξω μια συνάρτηση που θα κάνει ότι θέλω και θα την καλώ και στις τέσσερις animate.

[rafinos]

Γεια σας παιδιά!

 

Υπάρχει τρόπος να κάνω ότι κάνω με το "animate" δηλαδή να κουνήσω ένα div, αλλά να γίνεται χωρίς το animation;

Δηλαδή "ακαριαία" κατά κάποιο τρόπο. Πιο πολύ με νοιάζει η απόδοση του θέματος. Δηλαδή με ενδιαφέρει κάτι που χρειάζεται λιγότερους πόρους.

[Ρεkλα]

Ναι αλλαξε το 

transparent.finish().animate({top: "+=100"});

 

 

σε 

 

transparent.finish().animate({top: "+=100"},0);

 

 

κλπ..

 

η αντι για animate βαλε .css

[rafinos]

Δηλαδή μπορεί να δεχτεί τιμή 0; Δεν το ξέρα. Σε ευχαριστώ πολύ!