So verschieben Sie ein Bild, um mit Pfeiltasten javascript
Ich habe vor kurzem begann mit der Entwicklung eines kleinen javascript-Spiel, nur zum Spaß. Die Idee war, dass Sie kontrollierte einen kleinen Punkt mit den Pfeiltasten oder awsd oder ich interessiere mich nicht, was) in einen Kasten auf dem Bildschirm. Kleine Rechtecke würden dann nach dem Zufallsprinzip laichen auf alle Kanten der box und der Fortschritt über Sie hinweg. Sie haben zu vermeiden, den Kontakt mit Ihnen. Das Projekt erwies sich schwieriger, als ich erwartet hatte, und ich konnte nicht die Bewegung richtig zu arbeiten. Wenn Sie mir helfen könnte, daß wäre Super. auch, fühlen Sie sich frei, um das Konzept und das wenige, was ich bisher getan habe und tun, was Sie will. Ich wäre daran interessiert zu sehen, Ihre Ergebnisse. Unten ist der code, den ich für die spawns ohne die Bewegung scripts. Ich war mit der Grundgedanke dieser code für die Bewegung:
var x = 5; //Starting Location - left
var y = 5; //Starting Location - top
var dest_x = 300; //Ending Location - left
var dest_y = 300; //Ending Location - top
var interval = 2; //Move 2px every initialization
function moveImage() {
//Keep on moving the image till the target is achieved
if(x<dest_x) x = x + interval;
if(y<dest_y) y = y + interval;
//Move the image to the new location
document.getElementById("ufo").style.top = y+'px';
document.getElementById("ufo").style.left = x+'px';
if ((x+interval < dest_x) && (y+interval < dest_y)) {
//Keep on calling this function every 100 microsecond
// till the target location is reached
window.setTimeout('moveImage()',100);
}
}Hauptteil:
<html>
<head>
<style type="text/css">
html::-moz-selection{
background-color:Transparent;
}
html::selection {
background-color:Transparent;
}
img.n {position:absolute; top:0px; width:5px; height:10px;}
img.e {position:absolute; right:0px; width:10px; height:5px;}
img.s {position:absolute; bottom:0px; width:5px; height:10px;}
img.w {position:absolute; left:0px; width:10px; height:5px;}
#canvas {
width:300px;
height:300px;
background-color:black;
position:relative;
}
</style>
<script type="text/javascript">
nmecount=0
function play(){
spawn()
var t=setTimeout("play()",1000);
}
function spawn(){
var random=Math.floor(Math.random()*290)
var side=Math.floor(Math.random()*5)
var name=1
var z=10000
if (side=1)
{
var nme = document.createElement('img');
nme.setAttribute('src', '1.png');
nme.setAttribute('class', 'n');
nme.setAttribute('id', name);
nme.setAttribute('style', 'left:'+random+'px;');
nme.onload = moveS;
document.getElementById("canvas").appendChild(nme);
}
if (side=2)
{
var nme = document.createElement('img');
nme.setAttribute('src', '1.png');
nme.setAttribute('class', 'e');
nme.setAttribute('id', name);
nme.setAttribute('style', 'top:'+random+'px;');
nme.onload = moveW;
document.getElementById("canvas").appendChild(nme);
}
if (side=3)
{
var nme = document.createElement('img');
nme.setAttribute('src', '1.png');
nme.setAttribute('class', 's');
nme.setAttribute('id', name);
nme.setAttribute('style', 'left:'+random+'px;');
nme.onload = moveN;
document.getElementById("canvas").appendChild(nme);
}
if (side=4)
{
var nme = document.createElement('img');
nme.setAttribute('src', '1.png');
nme.setAttribute('class', 'w');
nme.setAttribute('id', name);
nme.setAttribute('style', 'top:'+random+'px;');
nme.onload = moveE;
document.getElementById("canvas").appendChild(nme);
}
name=name+1
}
</script>
</head>
<body onLoad="play()">
<div id="canvas">
<img id="a" src="1.png" style="position:absolute; z-index:5; left:150px; top:150px; height:10px; width=10px;" />
<button onclick="moveleft()"><</button>
</body>
</html>height:10px; width=10px; wo die Breite sollte width:10px;.
InformationsquelleAutor Quinn | 2011-08-27
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich kann nicht herausfinden, was Ihr Spiel ist, und so nicht wissen, was zu tun mit diesem code. Da jedoch erwähnten Sie, dass Sie Schwierigkeiten mit der Bewegung, schrieb ich eine schnelle JavaScript-Bewegung Motor nur für Sie, komplett mit Beschleunigung und Verzögerung. Verwenden Sie die Pfeiltasten zu bewegen. Der folgende code stellt ein vollständiges HTML-Dokument, so kopieren Sie und fügen Sie Sie in eine leere text-Datei und speichern als .html-Code. Und stellen Sie sicher, Sie haben ein 10x10 Bild mit dem Namen '1.png " im selben Ordner wie die Datei.
Funktioniert es wie folgt: Es ist ein Spiel-Schleife, die aufgerufen wird, sobald der Körper Lasten. Dieses game loop ruft sich selbst alle 10 millis für glatte animation. Während es möglicherweise nicht wirklich-Schleife alle 10 millis, weil der run-time-Geschwindigkeiten, ein so niedriger Wert bedeutet, dass die frame rate ist so glatt, wie sein kann für jeden beliebigen browser.
In der Spiel-Schleife, die wir manipulieren die x-und y-position des Objekts auf der Grundlage der aktuellen Geschwindigkeit. Ganz einfach: fügen Sie x-speed, x-position und y-Geschwindigkeit, y-position. Dann ändern wir die aktuelle position des Elements auf der Basis der aktuellen x-und y-Koordinaten.
Zum Bearbeiten der x-und y-Geschwindigkeiten, wir nehmen Tastatur-Eingaben mit Hilfe von event-Handlern. Basierend auf den Schlüssel-code, setzen wir eine variable, die sagt dem Spiel, wenn eine Taste nach unten oder oben. Je nachdem, ob die Taste nach oben oder unten, wir verlangsamen oder beschleunigen das Objekt bis zur maximalen Geschwindigkeit. Weitere allmähliche speed-ups und slow-downs, floating-point-Werte verwendet werden können.
Sollten Sie in der Lage sein, um das wesentliche von dieser einfachen Motor durch die Untersuchung des Codes. Hoffentlich helfen Sie bei der Umsetzung Ihrer eigenen Bewegung-Motor für das Spiel.
Wenn Sie verstehen können, die sein Spiel, vielleicht kann man ändern, seinen code zu machen, so zu arbeiten, wie er will. Ich verstehe es nicht 😛
vergessen ein kleines Stück könnten Sie hinzufügen möchten. Du bist wahrscheinlich gehen zu wollen, um eine Grenze, sonst ist der Charakter bewegen könnte, für immer in eine bestimmte Richtung. Also vor dem aktualisieren der position des Zeichens, so stellen Sie sicher, dass die position innerhalb der Grenze. Wenn es nicht, legen Sie einfach die position, gleich an der Grenze.
Okay, Grenzen Hinzugefügt. Aber ich will nicht zu gehen, komplizierter als das, oder es werden Auswirkungen auf die Lesbarkeit des Codes. Ich möchte die grundsätzliche Idee, über ihn sowie jeden anderen, der kommt über diesen code. Beachten Sie, dass anstelle der Einstellung der position gleich der Grenze, ich habe gerade die position, um das, was es sein sollte, und nehmen Sie dann die maximum-und minimum-auf der Grundlage der Grenzen angegeben.
wow, das Bewegung sieht genial aus. Hoffentlich bekomme ich eine chance, es zu realisieren, bevor die Schule beginnt! 😛 Für alle anderen Leute gibt es aber, wenn (Sie.Wert == coolIdeas) {document.schreiben Sie diese Ideen}!
InformationsquelleAutor Dalal