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>
Configuration: Windows Vista Firefox 3.0.15
A voir également:
- Eviter qu'un div ne depasse pas d'un carré
- Parenthese carre ✓ - Forum Word
- Metre carré clavier ✓ - Forum Windows
- Crochets carrés ✓ - Forum MacOS
- Comment faire pour écrire en mètre carré sur un ordinateur ✓ - Forum Bureautique
- 1 centieme de terre en metre carré - Forum Architecture / décoration
