Was genau hast Du vor?
Beispiel, wie ich es verstanden habe:
Alle <div> auf Position left:100px; top:100px;:
var _result = [];
document.querySelectorAll( 'div' ).forEach( i => {
_style = window.getComputedStyle( i, null );
if ( _style.getPropertyValue('left') == '100px' && _style.getPropertyValue('top') == '100px' )
_result.push( i );
});
console.log( _result );Mit checkIntersection müsste es auch gehen, aber leider ... nicht von Firefox untersützt.
PS: Ich sehe gerade, dass die Felder keine Elemente sind, sondern dass Du das mit Dasharray gelöst hat. Dann wird das mit checkIntersection wohl nicht gehen.
Man könne es aber sicherlich händisch berechnen: Zunächst den Abstand vom Mittelpunkt und dann den Winkel. Daraus könnte man dann sicher berechnen, welches Feld getroffen wurde.
Ich hätte gedacht das es einfacher geht ,aber da habe ich wohl falsch gedacht.
Bei den Code von Arne bekomme ich immer ein ein Leeres Resultat. Also ein leeres array.
Selbst wenn ich bei top und left Werte eingebe wo auf jedenfall ein Circle ist.
Gebe ich aber zb top >= 0 und left >= 0 ein dann findet er auch alles was auf der Seite ist .
Irgendwie ist da noch ein Harken drinne den ich noch nicht gefunden habe.
Den Link von Sempervivum habe ich mir auch angeschaut doch das verwirrt mich jetzt leicht.
Gut das
PS: Ich sehe gerade, dass die Felder keine Elemente sind, sondern dass Du das mit Dasharray gelöst hat. Dann wird das mit checkIntersection wohl nicht gehen.
du das schon geschrieben hast sonst hätte ich mich dumm probiert,bzw schlau probiert weil dumm bin ich schon.
Abpropo dumm.
Man könne es aber sicherlich händisch berechnen: Zunächst den Abstand vom Mittelpunkt und dann den Winkel. Daraus könnte man dann sicher berechnen, welches Feld getroffen wurde.
Da ist so wieso Ende für mich. Bin eigentlich ganz gut in Mathe , doch bei Kreis ,Dreieck und Winkel und co hört es leider auf bei mir.
Wäre es eigentlich einfacher die ganze Dartscheibe mit Canvas zu machen ?
Hätte nicht gedacht das ich mir daran die Zähne ausbeiße.
ZitatDa ist so wieso Ende für mich. Bin eigentlich ganz gut in Mathe , doch bei Kreis ,Dreieck und Winkel und co hört es leider auf bei mir.
Ich kann mich dunkel erinnern, dass Du mal irgend eine Aufgabe mit Winkelfunktionen selber gelöst hattest.
ZitatWäre es eigentlich einfacher die ganze Dartscheibe mit Canvas zu machen ?
Da bin ich mir gar nicht mal sicher. Ich habe früher mal mit jCanvas solche Kreissegmente gezeichnet und das wurde ganz gut unterstützt und war relativ einfach. Nicht jedoch die Prüfung, ob ein Koordinatenpaar in einer Form liegt. Außer bei Klick, aber das geht ja bei dem Fadenkreuz nicht.
Auf jeden Fall hat Canvas den Nachteil, dass es nicht verlustfrei skaliert werden kann.
Mit jCanvas kannst Du ganz leicht Kreisbögen zeichnen:
https://projects.calebevans.me/jcanvas/docs/arcs/
gleich das erste Beispiel.
Ich finde jedoch nichts, wie man feststellen kann, ob ein Koordinatenpaar innerhalb eines solchen Kreisbogens liegt. Da ist wohl auch angesagt, es selbst auszurechnen. Wenn es ausreicht, die Farbe eines Feldes zu ermitteln, kann man das jedoch in Canvas sehr leicht, weil man Zugriff auf die RGB-Werte hat.
Ich habe mir schon immer vorgenommen mal mehr mit Canvas zu machen, aber ich traue mich da noch nicht richtig dranne , vor allem nicht gleich so was wie die Dartscheibe wo man über 60 Felder brauch 
Ich fange mal mit einen Würfel an 
Zu meinen problem.
Der Code von Arne Drews würde funktionieren wenn es div elemente sind .
Ich habe den Code mal Komplette mit einen * ausprobiert , und alle divs geben mir Pixel Angaben zurück.
Die Circle Svg Elemente geben mir nur auto, auto zurück.
Habe das mal im Codepen so gelassen zum ankucken.
Ist das mit den Svg irgendwie anders oder habe ich da was übersehen ?
Ja, bei SVG ist das schon anders. Ich sehe jedoch noch ein ganz anderes Problem:
Ich kenne die Spielregeln von Darts leider nicht, aber sicherlich musst Du doch prüfen, ob der Pfeil ein bestimmtes Feld getroffen hat bzw. ein bestimmtes Kreissegment. Da ein solches Kreissegment jedoch als Element gar nicht existiert, sondern nur der ganze Kreis, kannst Du, wenn Du die Koordinaten des ganzen Elementes prüfst, nur heraus bekommen, ob der ganze Kreis bzw. das umschließende Quadrat getroffen wurde und nicht ein einzelnes Segment.
Jedenfalls, wenn ich deinen Code richtig interpretiere, ich habe nicht bis ins letzte Detail hinein geschaut.
BTW: Es hat mich interessiert und ich habe heraus gefunden, dass man mit getBoundingClientRect() problemlos die Koordinaten eines (SVG-)Elementes ermitteln kann, siehe hier:
Oh man. Svg und Canvas ist echt nicht mein ding.Jetzt weiß ich auch warum ich das immer nach hinten geschoben habe.
Zumindest habe ich jetzt schon mal die positionen der 6 Ringe.Ist noch nicht 100% aber das paßt soweit wenn man Border und co mit beachtet.
Nun muß ich noch an den Feld kommen wo der Pfeil im Ring ist. Jetzt zeigt er mir an das zb beim außen Ring 20 Felder mit den gleichen Werten.
Ich glaube langsam das eine Dartscheibe aus divs einfacher währe.
Leider habe ich auch noch nix vergleichbares gefunden, wo das mit Canvas oder Svg gemacht wird.
Warum suche ich mir eigentlich immer so was komplziertes aus ?
Sollte lieber beim kleinen 1 x 1 beiben.
Da wirst Du wohl an ein wenig Mathe nicht vorbei kommen:
// xCenter und yCenter sind die Koordinaten des Mittelpunktes der Darts-Scheibe
// x und y sind die Koordinaten des Mittelpunktes des Fadenkreuzes
var deltaX = x - xCenter, deltaY = y - yCenter;
var dist = hypot(deltaX, deltaY); // der Abstand
var angle = asin(deltaY / dist); // der Winkel im Bogenmass
var deg = angle / Math.PI * 180; // der Winkel in Grad(ungetestet). Aus dem Winkel und dem Abstand ist es dann kein Problem, das Feld zu berechnen.
Ja ich und Kreis rechnen hat natürlich nicht so richtig funktioniert.
Am Anfang hattest du ja erwähnt das deine erste Idee wegen den dasharray wohl nicht klappt.
Jetzt habe ich circle mit path ausgetauscht und es klappt auch mit den Code von Arne schon mal ganz gut.
Verstehe ich zwar nicht warum circle so anders ist als path , aber gut , wieder was dazu gelernt.
Durch solche spielerein findet man auch wieder andere sachen die wieder kein sinn ergeben.
Warum fliegen die Pfeile die durch createElement erstellt wurden nicht ins Fenster rein ( transition ) ?
Warum wird aus ein klein vorhaben zum Schluss doch eine größere Sache als wie man gedacht hat ?
Ich kann mich dunkel erinnern, dass Du mal irgend eine Aufgabe mit Winkelfunktionen selber gelöst hattest.
Das stmmt. Das wahr nee Uhr .Da hatte ich aber auch mehr Glück als wissens.
Hallo Basti, da bin ich leider überfragt. X-Box und Playstation kenne ich nur dem Namen nach. Ich halte es aber für unwahrscheinlich, dass Javascript oder ein Plugin mit vertretbarem Aufwand Wurfbewegungen erkennen können.
Da gibt es dich sicher APIs zu den entsprechenden Technologien. Das macht dann mehr Sinn, als was mit JS zu fummeln.
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!