Suche Animation/Script oder Snippet ...

rernanded

rernanded

Erfahrenes Mitglied
Hallo.

Suche css-Animation/Script/Snippet oder auch js bei dem ein 1. div auf ein 2. div trifft und dieses quasi wegstösst,
so ähnlich als würde man eine Billardkugel treffen.
1. div muß man per Maus bewegen können und 2. div hat nach Aufprall erst höhere Geschwindigkeit und verlangsamt sich bis zum erliegen. 2. div soll immer genau in die Gegenrichtung der Bewegung von 1. div. geschoben werden.
Was die Bewegung des 1. div mit der Maus angeht so habe ich schon eine Lösung per js.

HTML: 
var ie=document.all;
var xxx=document.getElementById && !document.all;
var verschieben=false;
var x,y;
var dobj;

function movemouse(e)
{
  if (verschieben)
  {
    dobj.style.left = xxx ? tx + e.clientX - x : tx + event.clientX - x;
    dobj.style.top  = xxx ? ty + e.clientY - y : ty + event.clientY - y;
    return false;
  }
}

function selectmouse(e)
{
  var fobj       = xxx ? e.target : event.srcElement;
  var topelement = xxx ? "HTML" : "BODY";
  while (fobj.tagName != topelement && fobj.className != "dragme")
  {
    fobj = xxx ? fobj.parentNode : fobj.parentElement;
  }
  if (fobj.className=="dragme")
  {
    verschieben = true;
    dobj = fobj;
    tx = parseInt(dobj.style.left+0);
    ty = parseInt(dobj.style.top+0);
    x = xxx ? e.clientX : event.clientX;
    y = xxx ? e.clientY : event.clientY;
    document.onmousemove=movemouse;
    return false;
  }
}
document.onmousedown=selectmouse;
document.onmouseup=new Function("verschieben=false");

Hab schon gegoogelt aber nichts passendes gefunden.

Danke vorab.

MONI
 
Interessante Aufgabe. Der elastische Stoß ist eine Wissenschaft für sich, aber deine Absicht scheint ja etwas einfacher zu sein, wenn ich es richtig verstehe:
Beide Kugeln sind gleich schwer, d. h. die erste kommt zum Stehen und die zweite bewegt sich mit der selben Geschwindigkeit.
2. div soll immer genau in die Gegenrichtung der Bewegung von 1. div. geschoben werden.
Zum Vergrößern anklicken....
Das verstehe ich nicht richtig: Bewegt sich die zweite Kugel nicht in der selben Richtung wie die erste? Genau genommen hängt die Bewegungsrichtung der zweiten Kugel vom Winkel des Auftreffens ab. Möchtest Du das vernachlässigen und die zweite Kugel soll sich in der selben Richtung wie die erste bewegen?
 
Du hast vollkommen recht, beide Kugeln bewegen sich in dieselbe Richtung, ich meine mit Gegenrichtung quasi eine Ausholbewegung von Kugel 1 aus der Gegenrichtung. Je weiter die Ausholung ist und/oder je schneller die Mausbewegung(mit der man Kugel 1 bewegt),, desto fester der Aufprall auf Kugel 2, desto schneller und weiter rollt 2. Und: Ist der Aufprall nicht frontal müsste es ein abdriften von 2 nach rechts oder links geben.

Was den Begriff "schwer" angeht, so kommt Kugel 1 zum liegen weil man sie nicht mehr per Maus bewegt. Kugel 2 kann ich also nur mittels 1 bewegen nicht aber per Maus.

Vgl. Pong-Spiel. Oder hier: https://codepen.io/vedatsozen/pen/WbJmbJ

MONI
 
Je weiter die Ausholung ist, desto fester der Aufprall auf Kugel 2, desto schneller und weiter rollt 2. Und: Ist der Aufprall nicht frontal müsste es ein abdriften von 2 nach rechts oder links geben.
Zum Vergrößern anklicken....
Also doch der elastische Stoß in voller Schönheit. Ich habe dieses Problem vor einiger Zeit schon Mal in einem Forum gesehen und dort wurde ein Link angegeben, wie man das ganze, Richtung und Geschwindigkeit, berechnen kann. Heute ist es schon spät, aber morgen werde ich mal versuchen, es zu finden. Man muss die Formeln ja nicht selber entwickeln. Du kannst ja auch selber recherchieren.
BTW: Das Skript, das Du da gefunden hast, ist von Anno Tobak. Leider geistern im Netz viele veraltete Skripte herum.
 
Sehr gut das Fiddle. Ich habe es selber früher gesehen. Das kann man sicher verwenden und die Berechnung heraus ziehen.
Wofür brauchst Du denn das Ganze?
Man findet über die Grundlagen viele Quellen im Netz. Man braucht Vektorrechnung dafür. In deinem Fall, die Kugeln sind gleich groß und gleich schwer und die zweite ruht zunächst, wird das Ganze relativ einfach, weil die Vektoren ein rechtwinkliges Dreieck bilden. Mir gefällt der Artikel bei Wikipedia am besten.
 
Ich habe mal versucht mein js-Script (s.o.) zu integrieren. Geht aber nicht. Tja meine js-skills sind nicht so berühmt. Vllt. kannst Du mal helfen.
Das Fiddle-Script kann ich verändern, Anzahl Bälle, deren Größe etc.

Ich will eine kleine Fußball-Simulation erstellen mit der mein Sohn weiter "rumprobieren" kann. Er ist schon ganz gut in html und css.
Könnte also Spielerköpfe einbauen usw. So kommt er spielerisch zu mehr Wissen. Außerdem kann er damit in der Schule "glänzen".

Ich hoffe es ist Dir nicht zu banal damit Du noch ein wenig am Ball bleibst. ;-)

MONI
 
Nein, ist mir nicht zu banal, ich bin Spielereien gegenüber aufgeschlossen.
Habe in der Zwischenzeit versucht, Schritt für Schritt so etwas aufzubauen und hoffe, dass ich die Mathematik richtig umgesetzt habe:
Code: 
    <style>
        #bouncewrapper {
            width: 800px;
            height: 600px;
            position: relative;
        }
        .ball {
            width: 38px;
            height: 38px;
            border-radius: 20px;
            border: 2px solid black;
            position: absolute;
        }
        #ball2 {
            left: 200px;
            top: 150px;
        }
    </style>
    <div id="bouncewrapper">
        <div class="ball" id="ball1"></div>
        <div class="ball" id="ball2"></div>
    </div>
    <script>
        var balls = [{ ele: $("#ball1"), x: 0, y: 0, radius: 20, speedx: 0, speedy: 0, factor: 10 },
            { ele: $("#ball2"), x: 200, y: 150, radius: 20, speedx: 0, speedy: 0, factor: 10 }];
        var dragging = false, collided = false;
        function insideball(idx, x, y) {
            var centerx = balls[idx].x + balls[idx].radius;
            var centery = balls[idx].y + balls[idx].radius;
            var dx = centerx - x;
            var dy = centery - y;
            var dist = Math.sqrt(dx * dx + dy * dy);
            return dist < balls[idx].radius;
        }
        function collision() {
            var distx = balls[1].x - balls[0].x;
            var disty = balls[1].y - balls[0].y;
            var dist = Math.sqrt(distx * distx + disty * disty);
            if (dist < (balls[0].radius + balls[1].radius)) {
                if (!collided) {
                    collided = true;
                    var xspeed1 = balls[0].speedx;
                    var yspeed1 = balls[0].speedy;
                    var speed1 = Math.sqrt(xspeed1 * xspeed1 + yspeed1 * yspeed1);
                    var speed2 = 0;
                    var angle1 = Math.atan(balls[0].speedy / balls[0].speedx);
                    var anglecoll1 = Math.atan(disty / distx);
                    var anglecoll = anglecoll1 - angle1;
                    var speed1new = speed1 * Math.abs(Math.sin(anglecoll));
                    var speed2new = speed1 * Math.abs(Math.cos(anglecoll));
                    if (anglecoll < 0) var angle1new = angle1 + anglecoll + Math.PI / 2;
                    else var angle1new = angle1 + anglecoll - Math.PI / 2;
                    var angle2new = angle1 + anglecoll;
                    balls[0].speedx = speed1new * Math.cos(angle1new);
                    balls[0].speedy = speed1new * Math.sin(angle1new);
                    balls[1].speedx = speed2new * Math.cos(angle2new);
                    balls[1].speedy = speed2new * Math.sin(angle2new);
                    console.log(dist, collided);
                }
            }
        }
        function move() {
            balls.forEach(function (ball, idx) {
                ball.x += ball.speedx * ball.factor;
                ball.y += ball.speedy * ball.factor;
                ball.ele.css({ left: ball.x + "px", top: ball.y + "px" });
                ball.factor *= 1;
            });
            collision();
            requestAnimationFrame(move);
        }
        $("#bouncewrapper").on("mousedown", function (e) {
            //var x = e.pageX - $(e.target).offset().left;
            //var y = e.pageY - $(e.target).offset().top;
            var x = e.pageX - $(this).offset().left;
            var y = e.pageY - $(this).offset().top;
            if (insideball(0, x, y)) {
                console.log(x, y, "inside");
                dragging = true;
                balls[0].mousedx = x - balls[0].x;
                balls[0].mousedy = y - balls[0].y;
                balls[0].starttime = Date.now();
                balls[0].startx = balls[0].x;
                balls[0].starty = balls[0].y;
            } else console.log(x, y, "outside");
        });
        $("#bouncewrapper").on("mousemove", function (e) {
            var x = e.pageX - $(this).offset().left;
            var y = e.pageY - $(this).offset().top;
            if (dragging) {
                balls[0].x = x - balls[0].mousedx;
                balls[0].y = y - balls[0].mousedy;
                balls[0].ele.css({ left: balls[0].x + "px", top: balls[0].y + "px" })
            }
        });
        $("#bouncewrapper").on("mouseup", function (e) {
            dragging = false;
            var deltatime = Date.now() - balls[0].starttime;
            balls[0].speedx = (balls[0].x - balls[0].startx) / deltatime;
            balls[0].speedy = (balls[0].y - balls[0].starty) / deltatime;
            balls[0].speed = Math.sqrt(balls[0].speedx * balls[0].speedx + balls[0].speedy * balls[0].speedy);
            balls[0].factor = 10;
            console.log(balls[0].speedx, balls[0].speedy);
            requestAnimationFrame(move);
        });

    </script>
Hatte Billard im Kopf, Du kannst die Variablennamen ja an Fußball anpassen.
 
OK, danke, ich werds mal probieren und melde mich. Hatte auch ein Script gefunden, wo man mit der Maus einen Ball anspielt. Finde den Link nur nicht mehr.
War eine belgische Seite, zumindest mit soundso.be.
MONI
 
Hi
komme mit Deinem Code nicht zurecht. Irgendwas stimmt nicht. Müsste nicht auch zB #ball1 im style vorhanden sein?.!

Hier mal eine andere gute Idee aus Belgien: http://minimal.be/lab/soccerBall/
Dabei wird die Maus genutzt, diese kann sich aber irgendwo befinden, Hauptsache man bewegt sie.
Benutzt wir ein sprite3d.js.

Der Ball ist aber schon sehr gut animiert.

Komt Zeit, kommt Rat.

MONI
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück