<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('blcPorte1');
bPorte.width = 10;
bPorte.height = 80;
//Création des bloc Mur
bMur0 = new xDHTML('blcMurCoin1');
bMur0.width = 70;
bMur0.height = 85;
bMur1 = new xDHTML('blcMurCoin2');
bMur1.width = 85;
bMur1.height = 70;
bMur2 = new xDHTML('blcMurCoin3');
bMur2.width = 85;
bMur2.height = 70;
bMur3 = new xDHTML('blcMurCoin4');
bMur3.width = 70;
bMur3.height = 85;
bMur10 = new xDHTML('blcMurHorizontal1');
bMur10.width = 100;
bMur10.height = 60;
bMur11 = new xDHTML('blcMurHorizontal2');
bMur11.width = 100;
bMur11.height = 60;
bMur12 = new xDHTML('blcMurHorizontal3');
bMur12.width = 100;
bMur12.height = 60;
bMur13 = new xDHTML('blcMurHorizontal4');
bMur13.width = 100;
bMur13.height = 60;
bMur14 = new xDHTML('blcMurHorizontal5');
bMur14.width = 100;
bMur14.height = 60;
bMur15 = new xDHTML('blcMurHorizontal6');
bMur15.width = 100;
bMur15.height = 60;
bMur16 = new xDHTML('blcMurHorizontal7');
bMur16.width = 100;
bMur16.height = 60;
bMur17 = new xDHTML('blcMurHorizontal8');
bMur17.width = 100;
bMur17.height = 60;
bMur18 = new xDHTML('blcMurHorizontal9');
bMur18.width = 100;
bMur18.height = 60;
bMur20 = new xDHTML('blcMurVertical1');
bMur20.width = 60;
bMur20.height = 100;
bMur21 = new xDHTML('blcMurVertical2');
bMur21.width = 60;
bMur21.height = 100;
bMur22 = new xDHTML('blcMurVertical3');
bMur22.width = 60;
bMur22.height = 100;
bMur23 = new xDHTML('blcMurVertical4');
bMur23.width = 60;
bMur23.height = 100;
bMur24 = new xDHTML('blcMurVertical5');
bMur24.width = 60;
bMur24.height = 100;
bMur25 = new xDHTML('blcMurVertical6');
bMur25.width = 60;
bMur25.height = 100;
bMur26 = new xDHTML('blcMurVertical7');
bMur26.width = 60;
bMur26.height = 100;
bMur27 = new xDHTML('blcMurVertical8');
bMur27.width = 60;
bMur27.height = 100;
bPoele = new xDHTML('blcPoele1');
bPoele.width = 200;
bPoele.height = 80;
bFinMur1 = new xDHTML('blcFinMur1');
bFinMur1.width = 10;
bFinMur1.height = 80;
bFinMur2 = new xDHTML('blcFinMur2');
bFinMur2.width = 10;
bFinMur2.height = 80;
}
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('blcMurCoin1') == 'true' ) return 'true';
if (bPerso.HitTest('blcMurCoin2') == 'true' ) return 'true';
if (bPerso.HitTest('blcMurCoin3') == 'true' ) return 'true';
if (bPerso.HitTest('blcMurCoin4') == 'true' ) return 'true';
if (bPerso.HitTest('blcMurVertical1') == 'true' ) return 'true';
if (bPerso.HitTest('blcMurVertical2') == 'true' ) return 'true';
if (bPerso.HitTest('blcMurVertical3') == 'true' ) return 'true';
if (bPerso.HitTest('blcMurVertical4') == 'true' ) return 'true';
if (bPerso.HitTest('blcMurVertical5') == 'true' ) return 'true';
if (bPerso.HitTest('blcMurVertical6') == 'true' ) return 'true';
if (bPerso.HitTest('blcMurVertical7') == 'true' ) return 'true';
if (bPerso.HitTest('blcMurVertical8') == 'true' ) return 'true';
if (bPerso.HitTest('blcMurHorizontal1') == 'true' ) return 'true';
if (bPerso.HitTest('blcMurHorizontal2') == 'true' ) return 'true';
if (bPerso.HitTest('blcMurHorizontal3') == 'true' ) return 'true';
if (bPerso.HitTest('blcMurHorizontal4') == 'true' ) return 'true';
if (bPerso.HitTest('blcMurHorizontal5') == 'true' ) return 'true';
if (bPerso.HitTest('blcMurHorizontal6') == 'true' ) return 'true';
if (bPerso.HitTest('blcMurHorizontal7') == 'true' ) return 'true';
if (bPerso.HitTest('blcMurHorizontal8') == 'true' ) return 'true';
if (bPerso.HitTest('blcMurHorizontal9') == 'true' ) return 'true';
if (bPerso.HitTest('blcPoele1') == 'true' ) return 'true';
if (bPerso.HitTest('blcFinMur1') == 'true' ) return 'true';
if (bPerso.HitTest('blcFinMur2') == '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(5,0);
if( bPerso.aDroite) bPerso.MoveBy(-5,0);
if( bPerso.enHaut) bPerso.MoveBy(0,5);
if( bPerso.enBas) bPerso.MoveBy(0,-5);
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()'>
<!-- DEBUT Objet -->
<!-- POELE -->
<div id="blcPoele1" style="position:absolute;left:300px;top:60px;width:200px;height:80px"><img name='poele' src="./poele_H.png" width="200" height="80"></div>
<!-- PORTE -->
<div id="blcPorte1" style="position:absolute;left:350px;top:410px;width:20px;height:80px"><img name='porte' src="./porte_H.png" width="20" height="80"></div>
<!-- FIN Objet -->
<!-- DEBUT Murs -->
<div id="blcMurCoin1" style="position:absolute;left:0px;top:0px;width:85px;height:70px"><img name='murHG' src="./Mur_HG.png" width="85" height="70"></div>
<div id="blcMurCoin2" style="position:absolute;left:0px;top:465px;width:70px;height:85px"><img name='murBG' src="./Mur_BG.png" width="70" height="85"></div>
<div id="blcMurCoin3" style="position:absolute;left:585px;top:0px;width:70px;height:85px"><img name='murHD' src="./Mur_HD.png" width="70" height="85"></div>
<div id="blcMurCoin4" style="position:absolute;left:570px;top:480px;width:85px;height:70px"><img name='murBD' src="./Mur_BD.png" width="85" height="70"></div>
<!-- Horizontal HAUT -->
<div id="blcMurHorizontal1" style="position:absolute;left:85px;top:5px;width:100px;height:60px"><img name='murH1' src="./Mur_H.png" width="100" height="60"></div>
<div id="blcMurHorizontal2" style="position:absolute;left:185px;top:5px;width:100px;height:60px"><img name='murH2' src="./Mur_H.png" width="100" height="60"></div>
<div id="blcMurHorizontal3" style="position:absolute;left:285px;top:5px;width:100px;height:60px"><img name='murH3' src="./Mur_H.png" width="100" height="60"></div>
<div id="blcMurHorizontal4" style="position:absolute;left:385px;top:5px;width:100px;height:60px"><img name='murH4' src="./Mur_H.png" width="100" height="60"></div>
<div id="blcMurHorizontal5" style="position:absolute;left:485px;top:5px;width:100px;height:60px"><img name='murH5' src="./Mur_H.png" width="100" height="60"></div>
<!-- Vertical GAUCHE -->
<div id="blcMurVertical1" style="position:absolute;left:5px;top:70px;width:60px;height:100px"><img name='murG1' src="./Mur_G.png" width="60" height="100"></div>
<div id="blcMurVertical2" style="position:absolute;left:5px;top:165px;width:60px;height:100px"><img name='murG2' src="./Mur_G.png" width="60" height="100"></div>
<div id="blcMurVertical3" style="position:absolute;left:5px;top:265px;width:60px;height:100px"><img name='murG3' src="./Mur_G.png" width="60" height="100"></div>
<div id="blcMurVertical4" style="position:absolute;left:5px;top:365px;width:60px;height:100px"><img name='murG4' src="./Mur_G.png" width="60" height="100"></div>
<!-- Horizontal BAS -->
<div id="blcMurHorizontal6" style="position:absolute;left:70px;top:485px;width:100px;height:60px"><img name='murB1' src="./Mur_B.png" width="100" height="60"></div>
<div id="blcMurHorizontal7" style="position:absolute;left:170px;top:485px;width:100px;height:60px"><img name='murB2' src="./Mur_B.png" width="100" height="60"></div>
<div id="blcMurHorizontal8" style="position:absolute;left:370px;top:485px;width:100px;height:60px"><img name='murB4' src="./Mur_B.png" width="100" height="60"></div>
<div id="blcMurHorizontal9" style="position:absolute;left:470px;top:485px;width:100px;height:60px"><img name='murB5' src="./Mur_B.png" width="100" height="60"></div>
<!-- Vertical DROITE -->
<div id="blcMurVertical5" style="position:absolute;left:590px;top:85px;width:60px;height:100px"><img name='murD1' src="./Mur_D.png" width="60" height="100"></div>
<div id="blcMurVertical6" style="position:absolute;left:590px;top:180px;width:60px;height:100px"><img name='murD2' src="./Mur_D.png" width="60" height="100"></div>
<div id="blcMurVertical7" style="position:absolute;left:590px;top:280px;width:60px;height:100px"><img name='murD3' src="./Mur_D.png" width="60" height="100"></div>
<div id="blcMurVertical8" style="position:absolute;left:590px;top:380px;width:60px;height:100px"><img name='murD4' src="./Mur_D.png" width="60" height="100"></div>
<!-- Fins de murs pour portes -->
<div id="blcFinMur1" style="position:absolute;left:270px;top:485px;width:10px;height:60px"><img name='finPorte1' src="./Fin_Mur_BG.png" width="10" height="60"></div>
<div id="blcFinMur2" style="position:absolute;left:360px;top:485px;width:10px;height:60px"><img name='finPorte2' src="./Fin_Mur_BD.png" width="10" height="60"></div>
<!-- FIN Murs -->
<div id="blcPerso" style="position:absolute;left:100px;top:150px;width:25px;height:25px"><img name='personnage' src="./Perso_B.png" width="25" height="25"></div>
</body>
</html>