# Javascript "Bild mit Pfeiltasten automatisch bewegen"  HILFE



## KyuubiDDragon (26. Apr 2015)

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:




```
<!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.


----------

