Eviter qu'un div ne depasse pas d'un carré
Toh!
-
Toh! -
Toh! -
Bonsoir,
J'ai reussi à faire déplacer mon p'ti cube rouge (avec les flèches du clavier), mais j'aimerais qu'il ne sorte pas du cadre noire, je ne sais pas si c'est possible?
Voila le code
J'ai reussi à faire déplacer mon p'ti cube rouge (avec les flèches du clavier), mais j'aimerais qu'il ne sorte pas du cadre noire, je ne sais pas si c'est possible?
Voila le code
<style type="text/css">
#Jeu{
width: 600px;
height: 400px;
border: solid #000 2px;
margin: auto;
padding: 5px;
}
#Pion{
width: 10px;
height: 10px;
background-color: red;
/*position: absolute;*/
}
#Bouffeur{
width: 10px;
height: 10px;
background-color: blue;
position: absolute;
}
</style>
<script type="text/javascript" src="keyboard.js"></script> <!--utilisitation de mon script des detections de touches-->
<script type="text/javascript">
Pion = document.getElementById("Pion");
function applyKey (_event_){
// --- Retrieve event object from current web explorer
var winObj = checkEventObj(_event_);
var intKeyCode = winObj.keyCode;
var intAltKey = winObj.altKey;
var intCtrlKey = winObj.ctrlKey;
switch(intKeyCode)
{
case KEY_RIGHT:
Deplacer(1, 0, 7, 3);
break;
case KEY_LEFT:
Deplacer(-1, 0, 2, 5);
break;
case KEY_UP:
Deplacer(0, -1, 6, 2);
break;
case KEY_DOWN:
Deplacer(0, 1, 5, 3);
break;
}
}
x = 0;
y = 0;
function Deplacer(dx, dy, MechantX, MechantY)
{
Gentil = document.getElementById("Pion");
Mechant = document.getElementById("Bouffeur");
// on enregistre la nouvelle position
x += dx;
y += dy;
// on place le bloc
Gentil.style.marginLeft = x + "px";
Gentil.style.marginTop = y + "px";
// Mechant.style.left = x * (MechantX / 10) + "px";
// Mechant.style.top = y * (MechantY / 10)+ "px";
}
</script>
<body>
<script>
document.onkeydown = applyKey;
</script>
<div id="Jeu">
<div id="Pion"></div>
</div>
A voir également:
- Eviter qu'un div ne depasse pas d'un carré
- Éviter pub youtube - Accueil - Streaming
- Metre carré clavier ✓ - Forum Windows
- Point d'interrogation dans un carré ✓ - Forum Samsung
- Faire un ² sur clavier QWERTZ ✓ - Forum Bureautique
- Signe au carré - Forum iPad
