Position HTML

Fermé
auhasard - Modifié par auhasard le 17/05/2015 à 10:57
Bonjours,
je crée un jeu en javascript ou le but serait que des balles tombent a l'intérieur de mon canevas.
Mon canevas est placer au centre.
En revanche mon code qui me permet de produire une chute de balles n'est pas dans mon canevas mais a gauche de l'écran.
Je souhaiterai savoir comment placer le code qui produit la chute de balles dans le canevas sans qu'il en pop de partout sur mon écran.
Voici mon code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="joueractb.css" />
<title> Projet ISN </title>
</head>

<body>
<div id="bloc_page">
<header>
<h1><center> Projet ISN : Catch The Ball </center></h1>
</div>
<nav>
<ul>
<li><a href="siteweb.html">Présentation</a></li>
<li><a href="carnetbord.html">Carnet de bord</a></li>
<li><focus href="joueractb.html">Jouer à CTB</focus></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>

<canvas id="cadre" width=763px height=697px></canvas>

<script>
function poubelle () {
var ctx = document.getElementById("cadre").getContext("2d");
var img = new Image();
img.src = 'corbeille-poubelle-icone-5980-48.png';
img.onload = function(){
ctx.drawImage(img, 368, 600)
}
}

poubelle();
</script>
<script>
// Indiquer l'URL de l'image du flocon :
var urlflocon="balle 32x32.png"
// Ecrire le nombre de flocons :
var nombreflocons = 20;
// Indiquer si la neige doit être vue sur la fenêtre ou toute la page avant de disparaître ("windowheight"=la fenêtre, "pageheight"=toute la page)
var voirflocons = "windowheight";
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
function testIEcompatible(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
var dx, xp, yp; // Variables de coordonnées et de position
var am, stx, sty; // Variables d'amplitude
var i, doc_width = 1000, doc_height = 1000; // Taille de l'écran
if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = testIEcompatible().clientWidth;
doc_height = testIEcompatible().clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
for (i = 0; i < nombreflocons; ++ i) {
dx[i] = 0; // Variables de coordonnées
xp[i] = Math.random()*(doc_width-1000); // Variables de position
yp[i] = Math.random()*doc_height ;
am[i] = Math.random()*0; // Variables d'amplitude
stx[i] = 0.02; // Variables de pas?
sty[i] =1; // Variables de pas
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+urlflocon+"' border=\"0\"><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+urlflocon+"' border=\"0\"><\/div>");
}
}
}
function neigeIE_NS6() { // IE et NS6 : fonctions principales d'animation
doc_width = ns6up?window.innerWidth -1000 : testIEcompatible().clientWidth -1000;
doc_height=(window.innerHeight && voirflocons=="windowheight")? window.innerHeight : (ie4up && voirflocons=="windowheight")? testIEcompatible().clientHeight : (ie4up && !window.opera && voirflocons=="pageheight")? testIEcompatible().scrollHeight : testIEcompatible().offsetHeight;
for (i = 0; i < nombreflocons; ++ i) { // déplacement pour chaque point ("dot")
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 1;
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("neigeIE_NS6()", 1);
}
function cacherneige(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<nombreflocons; i++) document.getElementById("dot"+i).style.visibility="hidden"
}
if (ie4up||ns6up){
neigeIE_NS6();
if (cacherflocons>0)
setTimeout("cacherneige()", cacherflocons*1000)
}
</script>


<p><button type="button" style="background:#F56A13; cursor:"hand"; border:solid 1px black;"
<button style="cursor:pointer; font-class:verdana; font-weight:700;" type="button" onclick=poubelle ()> Jouer a CTB
</button>

</body>
</html>