Ergebnis 1 bis 2 von 2

Thema: Javascript "Bild mit Pfeiltasten automatisch bewegen"

  1. #1
    HTML Newbie
    Registriert seit
    26.04.2015
    Beiträge
    1
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Javascript "Bild mit Pfeiltasten automatisch bewegen"

    Guten Tag, wir machen in der Schule ein Projekt wo wir Space Invaders programmieren.
    Allerdings häng ich grad bei einer Aufgabe fest, bei dieser Aufgabe geht es darum, dass wenn man einmal die Pfeiltaste nach Rechts klickt, er automatisch bis zumSchluss des Fenster weiter geht.
    Wenn man ein 2tes mal nach Rechts klickt, soll er doppelt so schnell weiterlaufen.
    Wenn ich jetzt jedoch nach Links drücke, soll er Stoppen. Und erst dann wenn ich danach wieder nach Links drücke immer soviele Pixel weiter gehen bis zum Schluss.

    Wenn er nun zB nach Rechts läuft und ich drücke nach unten soll er nach rechts und nach unten laufen.

    Dies soll alles in den Code eingebaut werden:

    Code:
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>Bild bewegen</title>
            <script type="text/javascript">
                function myFunction(event) {
    
                var x = event.keyCode;
                var image = document.getElementById("image");
                var top = parseInt(image.style.top);
                var left = parseInt(image.style.left);
    
    
    
    
                if ( x == 37 && left > 0 ) 
                {
                        image.style.left = left - 10 + 'px';
                } 
    
                else if ( x == 38 && top > 0 ) 
                {    
                        image.style.top = top - 10 + 'px';
                } 
    
                else if ( x == 39 && left+image.width+10 < window.innerWidth ) 
                { 
                            image.style.left = left + 10 +'px';
        
                }
                else if ( x == 40 && top+image.height+10 < window.innerHeight) 
                { 
                    
                        image.style.top = top + 10 +'px';
                    
                }
            }
    
    
    
        
    
    
    </script>
    <style>
    #image {
        position:absolute; 
        width: 119px;
        height: 55px; 
    }
    </style>
        </head>
        <body onkeydown="myFunction(event)">
            <img src="Starwars-Zerstoerer.gif" id="image" style="position:absolute;top:0px;left:0px;bottom:0px;"/>
        </body>
    </html>
    Danke im vorraus.
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Javascript "Bild mit Pfeiltasten automatisch bewegen"

    da es ja ne schulaufgabe ist bekommst du von mir nen link und ein paar schlagworte

    https://www.google.com/search?q=java...utf-8&oe=utf-8


    keydown, keyup, keypress, crossbrowser-kompatibilität bei key-events

    damit hast du jetzt eigentlich alle nötigen infos deine schulaufgabe zu lösen.
    wollte erst gar nichts schreiben, aber so ganz im regen stehen lassen will ich dich auch nicht, denn entweder habt ihr das alles schon besprochen oder euer lehrer möchte initiative von euch.
    eine fertige lösung bringt dir dann gar nichts
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

Ähnliche Themen

  1. Automatisch "Unerwünschte Zeile" bei eBay HTML-Vorlage
    Von vespa-schmiede im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 29.02.2012, 22:17
  2. Infotext "JavaScript ist deaktiviert" anzeigen (XHTML 1.0 Strict)
    Von mephisto2k im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 6
    Letzter Beitrag: 18.07.2010, 14:19
  3. JavaScript: Zugriff auf <input type="file">
    Von makroy im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 8
    Letzter Beitrag: 09.07.2009, 18:03
  4. Hilfe beim "Polybios-Chiffre" ; Javascript
    Von Iteritox im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 9
    Letzter Beitrag: 25.05.2008, 13:32
  5. Antworten: 4
    Letzter Beitrag: 31.08.2005, 09:28

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •