dimanche 26 avril 2015

Javascript "Bild mit Pfeiltasten automatisch bewegen" HILFE

Posted on 08:56 by verona
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.


Javascript "Bild mit Pfeiltasten automatisch bewegen" HILFE
Categories:

0 commentaires:

Enregistrer un commentaire

Inscription à : Publier les commentaires (Atom)