Position X et Y

Urgent !!!

9 novembre 2010 à 21:55:18

Bonjour le SdZ !
J'ai besoin de vous aujourd'hui pour un petit script. Je vous explique, il y a une image,
dans un div de la meme taille que l'image, qui est en fait une cible.
Il faut cliquer sur le div(qui contient l'img en background) pour que ça lance la fonction tirer(), qui doit lancer un son
(on verra après...) mais surtout, qui doit ajouter un div, contenant une image de sang (pixel art :lol:)
Et c'est là que je cale, j'ai bien commencé ça, mais x=largeur ou longueur ?

function tirer(){
var monBody=document.body;
var posx=window.event.x + monBody.scrollLeft;
var posy=window.event.y + monBody.scrollTop;
var element=document.getElementById('shotimg').createElement("div");
element.class="sang";
element.style.left=//Soit posx, ou posy
}

Le truc est donc de mettre en absolute, mais je préfèrerais un système plus simple,
qui récupère les coordonées, mais qui place le sang, aps apr rapport au bosy, mais par rapport au div !

Merci d'avance

LCaba

10 novembre 2010 à 10:22:29

Salut,
La mention "urgent" a plutôt tendance à rebuter tes potentiels sauveurs :-°

je te la déconseille.

Pour quoi une div qui contient une image est pas une image tout court ? Ensuite, window.event ça ne marche qu'avec IE. Les autres navigateurs passe l'objet event en premier paramètre :

function(event){
	event = event || window.event;
}

Ensuite, suffit de récupérer les coordonnées du tir par rapport à la fenêtre avec event.clientX et event.clientY. Tu met l'image nouvellement crée en position:absolute et tu règle les propriété left (clientX) et top (clientY).

Cabinet vétérinaire à Angers

bnrj

10 novembre 2010 à 13:21:46

Je vous montre mon code, FF me dit toujours event is undefined, et ie ne dit rien, mais n'afiche pas la croix.

<html>
<head>
<style>
.sang
{
position:absolute;
top:0px;
left:0px;
}
</style>
<script type="text/javascript">
function tirer(){
var monBody=document.body;
var event=event || window.event;
var posx=event.clientX;
var posy=event.clientY;
var element=document.createElement("div");
element.style.top=posy+"px";
element.style.left=posx+"px";
element.value="<b style='color:red'>X</b>";
}

</script>
</head>
<body>
<div id="shotimg" style="background-image:url('el_cipitto.jpg');height:375px;width:376px;" onclick="tirer();">

</div>
</body>
</html>

restimel

10 novembre 2010 à 15:17:08

Comme l'a dit LCaba, les navigateurs (autre que IE) font passer l'objet event par les paramètres.

donc il faut que tu mettes function tirer(event){
Que tu ne mettes pas de var devant event=event || window.event;
et que tu le passes en paramètres lors de l'appel: <div onclick="tirer(event);">

Ensuite j'ai pas compris le but de ton code...
ligne 17 tu crées un élément de type DIV
ligne 20 tu ajoutes à son attribut value une chaine de caractères. Or cet attribut n'existe pas pour les div. Et vu la chaine de caractère je suppose que tu souhaites ajouter du HTML. Donc je te conseilles plutôt d'utiliser innerHTML (attention aux majuscule/minuscules) à la place de value.
Et enfin tu n'ajoutes pas cet élément à la page... donc je pense qu'il faut que tu ajoutes une ligne du genre: monBody.appendChild(element);

PS: désolé pour la mise en forme mais le site a l'air de déconner quand on utilise les balises pour la coloration syntaxique...

bnrj

10 novembre 2010 à 20:39:21

J'ai fait ce que tu me dis, mais les X rouges viennent se placer en bas de l'image :

<html>
<head>
<style>
.sang
{
position:absolute;
top:0px;
left:0px;
}
</style>
<script type="text/javascript">
function tirer(event){
var monBody=document.body;
event=event || window.event;
var posx=event.clientX;
var posy=event.clientY;
var element=document.createElement("div");
element.style.top=posy+"px";
element.style.left=posx+"px";
monBody.appendChild(element);
element.innerHTML="<b style='color:red' style='position:absolute;top:"+posy+"px;left:"+posx+"px;'>X</b>";
}

</script>
</head>
<body>
<div id="shotimg" style="background-image:url('el_cipitto.jpg');height:375px;width:376px;" onclick="tirer(event);">

</div>
</body>
</html>

Golmote

11 novembre 2010 à 3:10:53

Ce n'est pas dans le body qu'il faut que tu insères l'élément créé, mais plutôt dans le div shotimg.

Ensuite, tu attribues des valeurs top et left à ton div créé, mais tu n'as donné aucune valeur à position... Il faut le mettre en absolute.

Par conséquent, le style dans le innerHTML devient obsolète, mis à part la couleur. (D'ailleurs j'ai pas compris pourquoi y'avait deux fois l'attribut style...)

function tirer(event){
var monBody=document.body;
event=event || window.event;
var posx=event.clientX;
var posy=event.clientY;
var element=document.createElement("div");
element.style.position='absolute';
element.style.top=posy+"px";
element.style.left=posx+"px";
document.getElementById('shotimg').appendChild(element);
element.innerHTML="<b style='color:red'>X</b>";
}

bnrj

11 novembre 2010 à 12:52:29

Merci

!
Je vais remplacer les "X" par une image, mais il me manque plus
que jouer un son des que la personne tire, dans la fonction tirer donc, comment faire rejouer le son à chaque appel de la fonction ?

Golmote

11 novembre 2010 à 12:54:53

Du son dans vos pages web avec SoundManager 2

bnrj

11 novembre 2010 à 13:18:26

Merci de votre aide

Mais, il me reste un petit problème...

<html>
<head>
<style>
.sang
{
position:absolute;
top:0px;
left:0px;
}
</style>
<script type="text/javascript" src="script/soundmanager2.js"></script>
<script type="text/javascript">
soundManager.url = 'swf/';
soundManager.debugMode = false;
var level=1;
var observ=0;
var score=0;
var munitions=100;
var pts=30;
var active=0;

function init_level(lvl_init){
active=0;
switch(lvl_init){
case 1:
var level=lvl_init;
var observ=0;
var score=0;
var munitions=100;
var pts=30;
break;
case 2:
var level=lvl_init;
var observ=1;
var score=0;
var munitions=70;
var pts=40;
break;
case 3:
var level=lvl_init;
var observ=2;
var score=0;
var munitions=60;
var pts=50;
break;
case 4:
var level=lvl_init;
var observ=3;
var score=0;
var munitions=55;
var pts=50;
break;
case 5:
var level=lvl_init;
var observ=4;
var score=5;
var munitions=45;
var pts=50;
break;
case 6:
var level=lvl_init;
var observ=5;
var score=10;
var munitions=30;
var pts=40;
break;
}
active=1;
return level;
return observ;
return score;
return munitions;
return pts;
return active;
write_stats();
}
function write_stats(){
document.getElementById("muni").innerHTML=munitions;
document.getElementById("obs").innerHTML=observ;
document.getElementById("score").innerHTML=score;
document.getElementById("pts").innerHTML=pts;
document.getElementById("lvl").innerHTML=level;
}
function add_observ(){
if(active!=0){
observ=observ+1;
if(observ>6){
document.getElementById("scr").write("Vous avez eu 6 observs !!");
}

}
}
function tirer(event){
if(active!=0){
var monBody=document.body;
event=event || window.event;
var posx=event.clientX;
var posy=event.clientY;
var element=document.createElement("div");
element.style.position='absolute';
element.style.top=posy+"px";
element.style.left=posx+"px";
document.getElementById('shotimg').appendChild(element);
	soundManager.play("feutir","gunshot2.mp3");


element.innerHTML="<img src='sang.png' />";
score=score+1;
munitions=munitions-1;

write_stats();
if(score>=pts){
level=level+1;
score=0;
active=0;
init_level(level);

}
}}
init_level(1);
write_stats();
setInterval("add_observ();",5000);

</script>
</head>
<body>
<div id="son"></div>
<div id="shotimg" style="background-image:url('el_cipitto.png');height:300px;width:220px;" onclick="tirer(event);" onmouseover="document.body.style.cursor='crosshair';">

</div>
<div id="scr" style="border:1px solid black;width:450px;">

<b>Munitions : </b><span id="muni"></span></b><b>||</b><b>Observs : </b><span id="obs"></span></b><b>||</b><b>Score : </b><span id="score"></span></b><b>||</b><b>Niveau : </b><span id="lvl"></span></b>
<b>||</b><b>Pts. Av. niveau suivant : </b><span id="pts"></span></b>
</div>
</body>
</html>

Le problème, c'est que les informations notées dans le switch ne prennent pas effet sur le jeu,
exemple, les points, etc...
allez voir par vous meme, ShootCpe

Golmote

11 novembre 2010 à 20:41:33

Erreur 404 sur ton lien.

bnrj

11 novembre 2010 à 20:42:24

Oui, je rectifie :
http://akafun.lescigales.org/shoot_cpe/

Golmote

11 novembre 2010 à 20:55:57

Enlève tous les var devant les variables dans le switch.

Tu veux modifier la valeur de variables existantes et non pas en déclarer de nouvelles.

Par ailleurs, indente ton code proprement, là c'est illisible.

Position X et Y

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

Position X et Y

Urgent !!!

Position X et Y

Supprimer

Modérer

Signaler le message aux modérateurs