Comment déplacer une image autour avec les touches fléchées javascript
J'ai récemment commencé à développer un petit bout de javascript jeu, juste pour le plaisir. L'idée est que vous avez commandé un petit point avec les touches fléchées (ou awsd ou je n'aime pas ce qu') à l'intérieur d'une zone à l'écran. Des petits rectangles aurait ensuite été transporté sur tous les bords de la boîte et le progrès à travers elle. vous devez éviter tout contact avec eux. Le projet s'est avéré être plus difficile que ce que j'attendais et je ne pouvais pas obtenir le mouvement à l'œuvre. Si vous pouviez m'aider ce serait génial. aussi, n'hésitez pas à prendre le concept et le peu que j'ai fait jusqu'à présent et de faire ce que vous voulez avec elle. Je serais intéressé de voir vos résultats. Ci-dessous le code que j'ai utilisé pour la fraie, sans aucun mouvement de scripts. J'ai été en utilisant l'idée de base de ce code pour faire le mouvement:
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);
}
}corps principal:
<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; où la largeur doit être de width:10px;.OriginalL'auteur Quinn | 2011-08-27
Vous devez vous connecter pour publier un commentaire.
Je ne peux pas comprendre ce que votre jeu est à propos, et donc ne savent pas quoi faire avec ce code. Cependant, puisque vous avez mentionné que vous ayez des problème avec le mouvement, j'ai envoyé un petit JavaScript moteur à mouvement juste pour vous, complet avec l'accélération et la décélération. Utilisez les touches fléchées pour se déplacer. Le code suivant représente une complète document HTML, de sorte que le copier et de le coller dans un fichier texte vide et enregistrer sous .html. Et assurez-vous d'avoir un 10x10 image appelée '1.png' dans le même dossier que le fichier.
Il fonctionne de la manière suivante: Il y a une boucle de jeu qui est appelée dès que le corps de la charge. Cette boucle de jeu s'appelle elle-même toutes les 10 millis une animation plus fluide. Bien qu'il ne pourrait pas en fait en boucle toutes les 10 millis en raison de la durée d'exécution des vitesses, par exemple une faible valeur veillera à ce que le taux de trame est aussi lisse que peut être pour n'importe quel navigateur.
À l'intérieur de la boucle de jeu nous manipuler la position x et y de l'objet en fonction de sa vitesse actuelle. Simple: ajoutez x vitesse à la position x et y de la vitesse à la position y de. Puis, nous changeons la position réelle de l'élément basé sur les coordonnées x et y.
Pour manipuler les x et y de la vitesse, nous prenons la saisie au clavier à l'aide de gestionnaires d'événements. Basé sur le code de la clé, nous avons créé une variable qui indique le jeu si une clé est vers le bas ou vers le haut. Selon que la clé est vers le bas ou vers le haut, nous accélérer ou de décélérer l'objet jusqu'à la vitesse maximale. Pour plus d'progressive de la vitesse-ups et les ralentissements, des valeurs à virgule flottante peuvent être utilisés.
Vous devriez être en mesure d'obtenir l'essentiel de ce moteur simple en examinant le code. J'espère que cela va vous aider dans la mise en œuvre de votre propre moteur de mouvement pour le jeu.
Si vous pouvez comprendre son jeu, peut-être que vous pouvez modifier son code pour le faire fonctionner de la manière qu'il veut. Je ne comprends pas 😛
il a oublié une pièce mineure, vous voudrez peut-être ajouter. Vous allez probablement avoir à mettre une limite, sinon, le personnage peut se déplacer à jamais dans une quelconque direction. Donc, avant de mettre à jour la position du personnage, assurez-vous que la position est à l'intérieur de la frontière. Si elle ne l'est pas, il suffit de régler la position de l'égalité à la frontière.
D'accord, les limites ajouté. Mais je ne veux pas aller plus compliqué que cela, ou il va affecter la lisibilité du code. Je veux obtenir de l'idée de base à travers lui et à toute autre personne qui vient sur ce code. Notez qu'au lieu de définir la position égale à la limite, j'ai juste mis de la position dans la quelle qu'elle devrait être, et puis de prendre le maximum et le minimum de base sur les limites spécifiées.
wow, ce mouvement semble impressionnant. J'espère que je vais avoir la chance de la mettre en œuvre avant la rentrée scolaire! 😛 Pour tous les autres gars là-bas si, si, vous.valeur == coolIdeas) {document.écrire ces idées}!
OriginalL'auteur Dalal