AJAX/jQuery Spielwelt 2d Probelm

Einklappen
X
Einklappen
 
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige template Weiter
  • #1

    AJAX/jQuery Spielwelt 2d Probelm

    Hallo liebe User.

    Vor einigen Tagen habe ich angefangen eine Karte zu programmieren über die man "laufen" kann.

    Per jQuery prüfe ich welche Pfeiltaste ( w,a,s,d ) gedrückt wurde und dende die Daten per Ajaxfunktion an eine PHP-Datei wo die neuen Koordinaten in einer Session abgelegt werden.

    Die Karte selber lädt alle 100 Millisekunden neu wobei dann die Sessionvariablen abgerufen werden.

    Die Kartengröße ist immer 5 mal 5 und man befindet sich immer im mittlerem Div.


    Hier mal die 3 Datein damit ihr euch ein Bild machen könnt.


    DIE HTML-Datei von der alles ausgeht

    Index.html
    HTML-Code:
    <!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8"/>
    <title>OnePiece the Game</title>
    <script type="text/javascript" src="jQuery.js"></script> 
    <script type="text/javascript">
    var x = 1 ;
    var y = 1 ;
    var way = "" ;
        $(function () { 
            $(document).keydown(function (evt) {

                if(evt.keyCode == 87){
                    y = y - 1 ;
                    /* up */
                }
                if(evt.keyCode == 83){
                    y = y + 1 ;
                    /* down */
                }
                if(evt.keyCode == 65){
                    x = x - 1 ;
                    /* left */
                }
                if(evt.keyCode == 68){
                    x = x + 1 ;
                    /* right */
                }

                // Wird immer mindestens auf 3 gesetzt
                // wird noch geändert !!!!!
                if(x < 3)
                {
                    x = 3 ;
                }

                if(y < 3)
                {
                    y = 3 ;
                }

                $.post("test.php", { x: ""+x+"", y: ""+y+""},
                    function(data) {
                        $("#test").html(data);
                });

            }); 
        });


        $(document).ready(function() {
              setInterval(function() {
                  $('#karte').load('karte.php')              
              },100);
         });
    </script>
</head>

<body>
    <span id="test"></span>
    <div id="karte"></div>
</body>
</html>
    DIE KARTE WIRD HIER GENERIERT.
    Der Array ist lediglich zum testen gedacht.

    karte.php
    PHP-Code:

    <?php
        
        session_start    ();

            $x = $_SESSION['x'] ;
            $y = $_SESSION['y'] ;

            $map = array( 
    array(    "x" => 1 , "y" => 1 , "color" => 373399),
    array(    "x" => 2 , "y" => 1 , "color" => 632649),
    array(    "x" => 3 , "y" => 1 , "color" => 265923),
    array(    "x" => 4 , "y" => 1 , "color" => 167751),
    array(    "x" => 5 , "y" => 1 , "color" => 730929),
    array(    "x" => 6 , "y" => 1 , "color" => 992350),
    array(    "x" => 7 , "y" => 1 , "color" => 639946),
    array(    "x" => 8 , "y" => 1 , "color" => 991861),
    array(    "x" => 9 , "y" => 1 , "color" => 614501),
    array(    "x" => 10 , "y" => 1 , "color" => 357259),

    array(    "x" => 1 , "y" => 2 , "color" => 137234),
    array(    "x" => 2 , "y" => 2 , "color" => 473958),
    array(    "x" => 3 , "y" => 2 , "color" => 885226),
    array(    "x" => 4 , "y" => 2 , "color" => 144042),
    array(    "x" => 5 , "y" => 2 , "color" => 285563),
    array(    "x" => 6 , "y" => 2 , "color" => 697374),
    array(    "x" => 7 , "y" => 2 , "color" => 181993),
    array(    "x" => 8 , "y" => 2 , "color" => 436035),
    array(    "x" => 9 , "y" => 2 , "color" => 390489),
    array(    "x" => 10 , "y" => 2 , "color" => 634331),

    array(    "x" => 1 , "y" => 3 , "color" => 254801),
    array(    "x" => 2 , "y" => 3 , "color" => 872124),
    array(    "x" => 3 , "y" => 3 , "color" => 202012),
    array(    "x" => 4 , "y" => 3 , "color" => 590386),
    array(    "x" => 5 , "y" => 3 , "color" => 631428),
    array(    "x" => 6 , "y" => 3 , "color" => 646755),
    array(    "x" => 7 , "y" => 3 , "color" => 803466),
    array(    "x" => 8 , "y" => 3 , "color" => 426649),
    array(    "x" => 9 , "y" => 3 , "color" => 395209),
    array(    "x" => 10 , "y" => 3 , "color" => 287706),

    array(    "x" => 1 , "y" => 4 , "color" => 167073),
    array(    "x" => 2 , "y" => 4 , "color" => 448676),
    array(    "x" => 3 , "y" => 4 , "color" => 851698),
    array(    "x" => 4 , "y" => 4 , "color" => 767198),
    array(    "x" => 5 , "y" => 4 , "color" => 265055),
    array(    "x" => 6 , "y" => 4 , "color" => 517578),
    array(    "x" => 7 , "y" => 4 , "color" => 195339),
    array(    "x" => 8 , "y" => 4 , "color" => 835232),
    array(    "x" => 9 , "y" => 4 , "color" => 847412),
    array(    "x" => 10 , "y" => 4 , "color" => 938910),

    array(    "x" => 1 , "y" => 5 , "color" => 620578),
    array(    "x" => 2 , "y" => 5 , "color" => 575141),
    array(    "x" => 3 , "y" => 5 , "color" => 330810),
    array(    "x" => 4 , "y" => 5 , "color" => 684895),
    array(    "x" => 5 , "y" => 5 , "color" => 321858),
    array(    "x" => 6 , "y" => 5 , "color" => 514702),
    array(    "x" => 7 , "y" => 5 , "color" => 243028),
    array(    "x" => 8 , "y" => 5 , "color" => 949978),
    array(    "x" => 9 , "y" => 5 , "color" => 604736),
    array(    "x" => 10 , "y" => 5 , "color" => 737250),

    array(    "x" => 1 , "y" => 6 , "color" => 778510),
    array(    "x" => 2 , "y" => 6 , "color" => 706380),
    array(    "x" => 3 , "y" => 6 , "color" => 552544),
    array(    "x" => 4 , "y" => 6 , "color" => 881673),
    array(    "x" => 5 , "y" => 6 , "color" => 798366),
    array(    "x" => 6 , "y" => 6 , "color" => 259657),
    array(    "x" => 7 , "y" => 6 , "color" => 581949),
    array(    "x" => 8 , "y" => 6 , "color" => 142415),
    array(    "x" => 9 , "y" => 6 , "color" => 497043),
    array(    "x" => 10 , "y" => 6 , "color" => 359808),

    array(    "x" => 1 , "y" => 7 , "color" => 665174),
    array(    "x" => 2 , "y" => 7 , "color" => 825032),
    array(    "x" => 3 , "y" => 7 , "color" => 513427),
    array(    "x" => 4 , "y" => 7 , "color" => 423502),
    array(    "x" => 5 , "y" => 7 , "color" => 329996),
    array(    "x" => 6 , "y" => 7 , "color" => 346191),
    array(    "x" => 7 , "y" => 7 , "color" => 153076),
    array(    "x" => 8 , "y" => 7 , "color" => 311848),
    array(    "x" => 9 , "y" => 7 , "color" => 437527),
    array(    "x" => 10 , "y" => 7 , "color" => 122558),

    array(    "x" => 1 , "y" => 8 , "color" => 943766),
    array(    "x" => 2 , "y" => 8 , "color" => 330403),
    array(    "x" => 3 , "y" => 8 , "color" => 515543),
    array(    "x" => 4 , "y" => 8 , "color" => 237467),
    array(    "x" => 5 , "y" => 8 , "color" => 413275),
    array(    "x" => 6 , "y" => 8 , "color" => 340277),
    array(    "x" => 7 , "y" => 8 , "color" => 536268),
    array(    "x" => 8 , "y" => 8 , "color" => 329806),
    array(    "x" => 9 , "y" => 8 , "color" => 978271),
    array(    "x" => 10 , "y" => 8 , "color" => 647026),

    array(    "x" => 1 , "y" => 9 , "color" => 916368),
    array(    "x" => 2 , "y" => 9 , "color" => 482910),
    array(    "x" => 3 , "y" => 9 , "color" => 166530),
    array(    "x" => 4 , "y" => 9 , "color" => 222873),
    array(    "x" => 5 , "y" => 9 , "color" => 739176),
    array(    "x" => 6 , "y" => 9 , "color" => 335666),
    array(    "x" => 7 , "y" => 9 , "color" => 394721),
    array(    "x" => 8 , "y" => 9 , "color" => 262261),
    array(    "x" => 9 , "y" => 9 , "color" => 421359),
    array(    "x" => 10 , "y" => 9 , "color" => 860297),

    array(    "x" => 1 , "y" => 10 , "color" => 968397),
    array(    "x" => 2 , "y" => 10 , "color" => 626302),
    array(    "x" => 3 , "y" => 10 , "color" => 824028),
    array(    "x" => 4 , "y" => 10 , "color" => 806803),
    array(    "x" => 5 , "y" => 10 , "color" => 748670),
    array(    "x" => 6 , "y" => 10 , "color" => 731662),
    array(    "x" => 7 , "y" => 10 , "color" => 586073),
    array(    "x" => 8 , "y" => 10 , "color" => 258517),
    array(    "x" => 9 , "y" => 10 , "color" => 818874),
    array(    "x" => 10 , "y" => 10 , "color" => 439453),


                    );

        echo     '<div id="tt" style="width:250px;height:250px;">' ;
        foreach(    $map as $map)
        {
                // DIE 5 mal 5 FELDER AUSGEBEN UND NICHT MEHR !!!!
                if($x < $map['x'] + 3 && $x > $map['x'] - 3 && $y < $map['y'] + 3 && $y > $map['y'] - 3)
            {
            echo     '<div style="float:left;height:50px;width:50px;background:#'.$map['color'].';">' . $map["x"] . " - " . $map["y"];
            
                // Hier kommt der Rote Div der die Spielfigur zeigen soll
                if(floor($x) == $map["x"] && floor($y) == $map["y"])
            {
                echo     '<div style="height:10px;width:10px;margin-top:0px;margin-left:20px;background:red;"></div>' ;
            }

            echo     '</div>';
            }


        }
        echo     '</div>' ;

    ?>
    Hier wird die Session neu geschrieben wenn halt w,a,s oder d gedrückt wird ( richtungstasten )

    test.php
    PHP-Code:
    <?php
        session_start    ();

            $_SESSION['x'] = $_POST['x'] ;
            $_SESSION['y'] = $_POST['y'] ;
        
         echo     "x: " . $_POST['x'] . " y: " . $_POST['y'];

         ?>
    Mein ziemlich simples Problem ist einfach dass es mir zu abgehackt aussieht. Und Anstelle des Roten Vierecks als Figur möchte ich eine echte Figur die auch animiert ist wenn sie sich bewegt. Da die Karte aber andauernd neu geleaden wird, kann die Animierte Grafik nie durchlaufen sondern würde immer neu anfangen.

    Ich möchte mich einfach flüssiger über die Karte bewegen weiß aber nich wie ich das realisieren soll.

    Das System was ich nun habe funktioniert ja. Es erfüllt seinen Zweck, aber ich würde nun gerne die Feinarbeiten anfangen.

    Wenn mir bitte jemand erklären würde wie ich das realisieren kann, dann helft mir bitte.

    Danke =)
    Stichworte: -
  • #2
    Zitat von vonHagen Beitrag anzeigen
    Per jQuery prüfe ich welche Pfeiltaste ( w,a,s,d ) gedrückt wurde und dende die Daten per Ajaxfunktion an eine PHP-Datei wo die neuen Koordinaten in einer Session abgelegt werden.
    Wozu? Brauchst du serverseitig immer die aktuellen Koordinaten?

    Die Karte selber lädt alle 100 Millisekunden neu wobei dann die Sessionvariablen abgerufen werden.
    M.E. viel zu häufig, für einen flüssigen Spielfluss.



    Und Anstelle des Roten Vierecks als Figur möchte ich eine echte Figur die auch animiert ist wenn sie sich bewegt. Da die Karte aber andauernd neu geleaden wird, kann die Animierte Grafik nie durchlaufen sondern würde immer neu anfangen.
    Die Figur kann ja als „Sprite“ über der Karte liegen.
    Und die Karte kann im Hintergrund neu geladen werden.

    Ich möchte mich einfach flüssiger über die Karte bewegen weiß aber nich wie ich das realisieren soll.
    Nicht ständig neu laden.

    Wenn der sichtbare Kartenausschnitt 5*5 ist, dann können an allen „Rändern“ ja schon mal die nächsten x Tiles vorgeladen werden – dann kann man sich auch x Schritte in jede Richtung bewegen, ohne dass bei jedem einzelnen wieder nachgeladen werden muss.
    I don't believe in rebirth. Actually, I never did in my whole lives.

    Kommentar

    • #3
      Genau so würde ich es ja gerne machen. Aber weiß nunmal nicht wie.

      Wie kann ich die Karte weniger laden aber trotzdem IMMER die aktuelle Position RICHTIG angezeigt bekommen ? Wie kann ein andere Spieler ins Bild kommen wenn die Karte nich schnell genug geladen word ?
      Wäre blöd wenn er dann AUF EINMAL da ist.

      Das meine ich mit flüssig.... es soll immer neu geladen werden aber ich will nicht div für div weiter springen sonder mich auch innerhalb eines DIVBereiches bewegen können.

      Kommentar

      • #4
        Konzeptuell gehst du am besten so vor:

        Die Bewegungen finden nur auf dem Klient statt.

        Dann hast du ein Script was in gewissen Intervallen (<500ms) im hintergrund die aktuellen Daten an den Server sendet und neue Kartenabschnitte zwischenspeichert. Aber wie gesagt, nur in Intervallen und nicht bei jedem Klick. Ggf stellst du vor dem erneuten Senden noch sicher, dass der vorherige Request bereits beantwortet wurde.

        Kommentar

        Vorherige template Weiter
        Lädt...
        X