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>
