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:
HTML
<!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.