<html>
<head>
<title>test VDD-action</title>
</head>
<script language="Javascript" src="./xdhtml-VDD.js"></script>
<script language="Javascript">
//prechargement des images du personnage
var Per_g = new Image();
Per_g.src = "./Perso_G.png";
var Per_d = new Image();
Per_d.src = "./Perso_D.png";
var Per_h = new Image();
Per_h.src = "./Perso_H.png";
var Per_b = new Image();
Per_b.src = "./Perso_B.png";
var Per_bg = new Image();
Per_bg.src = "./Perso_BG.png";
var Per_bd = new Image();
Per_bd.src = "./Perso_BD.png";
var Per_hg = new Image();
Per_hg.src = "./Perso_HG.png";
var Per_hd = new Image();
Per_hd.src = "./Perso_HD.png";
function init(){
Tempo = null;
//Choix du Navigateur et positionnement des écouteurs
IE=MZ=false;
if(document.all){
IE = true;
}else if(document.getElementByID){
MZ = true;
}
if(MZ == true){
document.addEventListener('keydown',ToucheBas, true);
document.addEventListener('keyup', ToucheHaut, true);
}else{
document.onkeydown = ToucheBas;
document.onkeyup = ToucheHaut;
}
//Création du Bloc Personnage
bPerso = new xDHTML('blcPerso');
bPerso.width = bPerso.height = 25;
bPerso.deplace = 1;
bPerso.enHaut = bPerso.enBas = bPerso.aGauche = bPerso.aDroite = false;
//Création du bloc Porte
bPorte = new xDHTML('blcPorte');
bPorte.width = 25;
bPorte.height = 10;
}
function ToucheBas(e){
var nav = (IE) ? GetDirection(event.keyCode) : GetDirection(e.which) ;
if( nav == null ) return;
if( nav == "gauche" ){
bPerso.aGauche = true;
bPerso.aDroite = false;
}else if( nav == "droite" ){
bPerso.aGauche = false;
bPerso.aDroite = true;
}else if( nav == "haut" ){
bPerso.enHaut = true;
bPerso.enBas = false;
}else if( nav == "bas" ){
bPerso.enHaut = false;
bPerso.enBas = true;
}
var hitTest = TousLesHitTest();
if( hitTest == 'false' ){
if( !Tempo ) Bouge();
}
}
function ToucheHaut(e){
var nav = (IE) ? GetDirection(event.keyCode) : GetDirection(e.which) ;
if( nav == null ) return;
if( nav == "gauche" ) bPerso.aGauche = false;
if( nav == "droite" ) bPerso.aDroite = false;
if( nav == "haut" ) bPerso.enHaut = false;
if( nav == "bas" ) bPerso.enBas = false;
//test navigation elastique
if( nav == "a" ) bPerso.MoveToElastic( 500, 300 );
if( bPerso.aGauche == false && bPerso.aDroite == false && bPerso.enHaut == false && bPerso.enBas == false ){
clearTimeout(Tempo);
Tempo = null;
}
}
function TousLesHitTest(){
if (bPerso.HitTest('blcPorte1') == 'true' ) return 'true';
if (bPerso.HitTest('blcPorte2') == 'true' ) return 'true';
return 'false';
}
function Bouge(){
var hitTest = TousLesHitTest();
if( hitTest == 'false' ){
if( bPerso.aGauche ){
bPerso.MoveBy(-bPerso.deplace,0);
if( !( bPerso.enBas || bPerso.enHaut) ) bPerso.changeImage(Per_g.src);
}
if( bPerso.aDroite ){
bPerso.MoveBy(bPerso.deplace,0);
if( !( bPerso.enBas || bPerso.enHaut) ) bPerso.changeImage(Per_d.src);
}
if( bPerso.enHaut ){
bPerso.MoveBy(0,-bPerso.deplace);
if( !( bPerso.aGauche || bPerso.aDroite) ) bPerso.changeImage(Per_h.src);
}
if( bPerso.enBas ){
bPerso.MoveBy(0,bPerso.deplace);
if( !( bPerso.aGauche || bPerso.aDroite) ) bPerso.changeImage(Per_b.src);
}
if( bPerso.enBas && bPerso.aGauche){
bPerso.changeImage(Per_bg.src);
}
if( bPerso.enBas && bPerso.aDroite){
bPerso.changeImage(Per_bd.src);
}
if( bPerso.enHaut && bPerso.aGauche){
bPerso.changeImage(Per_hg.src);
}
if( bPerso.enHaut && bPerso.aDroite){
bPerso.changeImage(Per_hd.src);
}
Tempo = setTimeout("Bouge()",1);
}else{
if( bPerso.aGauche) bPerso.MoveBy(2,0);
if( bPerso.aDroite) bPerso.MoveBy(-2,0);
if( bPerso.enHaut) bPerso.MoveBy(0,2);
if( bPerso.enBas) bPerso.MoveBy(0,-2);
bPerso.changeImage('./obstacle.png');
clearTimeout(Tempo);
Tempo = null;
}
}
function GetDirection(CodeClavier){
if( CodeClavier==37 ) return "gauche";
if( CodeClavier==38 ) return "haut";
if( CodeClavier==39 ) return "droite";
if( CodeClavier==40 ) return "bas";
if( CodeClavier==65 ) return "a";
return null;
}
</script>
<body onLoad='init()'>
<div id="blcPerso" style="position:absolute;left:60px;top:150px;width:25px;height:25px"><img name='personnage' src="./Perso_B.png" width="25" height="25"></div>
<div id="blcPorte1" style="position:absolute;left:150px;top:50px;width:25px;height:10px"><img name='porte1' src="./porteH.png" width="25" height="10"></div>
<div id="blcPorte2" style="position:absolute;left:50px;top:200px;width:10px;height:25px"><img name='porte2' src="./porteV.png" width="10" height="25"></div>
</body>
</html>