<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 = bPerso.sprint = false;
}
function ToucheBas(e){
var nav = (IE) ? GetDirection(event.keyCode) : GetDirection(e.which) ;
if( nav == null ) return;
if( nav == "shift" ) bPerso.sprint = true;
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 == "shift" ) bPerso.sprint = false;
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( 300, 495 );
if( bPerso.sprint == true){
if( bPerso.aGauche == false && bPerso.aDroite == false && bPerso.enHaut == false && bPerso.enBas == false ){
var hitTest = TousLesHitTest();
if( hitTest == 'true' ){
if( nav == "gauche" ) bPerso.MoveBy(bPerso.deplace,0);
if( nav == "droite" ) bPerso.MoveBy(-bPerso.deplace,0);
if( nav == "haut" ) bPerso.MoveBy(0,bPerso.deplace);
if( nav == "bas" ) bPerso.MoveBy(0,-bPerso.deplace);
}
clearTimeout(Tempo);
Tempo = null;
}
}else{
if( bPerso.aGauche == false && bPerso.aDroite == false && bPerso.enHaut == false && bPerso.enBas == false ){
var hitTest = TousLesHitTest();
if( hitTest == 'true' ){
if( nav == "gauche" ) bPerso.MoveBy(bPerso.deplace*3,0);
if( nav == "droite" ) bPerso.MoveBy(-bPerso.deplace*3,0);
if( nav == "haut" ) bPerso.MoveBy(0,bPerso.deplace*3);
if( nav == "bas" ) bPerso.MoveBy(0,-bPerso.deplace*3);
}
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';
for (var i = 1 ; i < 9 ; i++ ){
var nomBloc = 'blcMurVertical' + i ;
if (bPerso.HitTest(nomBloc) == 'true' ) return 'true';
}
for (var i = 1 ; i < 10 ; i++ ){
var nomBloc = 'blcMurHorizontal' + i ;
if (bPerso.HitTest(nomBloc) == 'true' ) return 'true';
}
if (bPerso.HitTest('blcPoele1') == 'true' ) return 'true';
if (bPerso.HitTest('blcLit1') == 'true' ) return 'true';
if (bPerso.HitTest('blcCoffre1') == 'true' ) return 'true';
if (bPerso.HitTest('blcFinMur1') == 'true' ) return 'true';
if (bPerso.HitTest('blcFinMur2') == 'true' ) return 'true';
return 'false';
}
function Bouge(){
var hitTest = TousLesHitTest();
var modSprint = 1;
if ( bPerso.sprint ) modSprint=3;
if( hitTest == 'false' ){
if( bPerso.aGauche ){
bPerso.MoveBy(-bPerso.deplace*modSprint,0);
if( !( bPerso.enBas || bPerso.enHaut) ) bPerso.changeImage(Per_g.src);
}
if( bPerso.aDroite ){
bPerso.MoveBy(bPerso.deplace*modSprint,0);
if( !( bPerso.enBas || bPerso.enHaut) ) bPerso.changeImage(Per_d.src);
}
if( bPerso.enHaut ){
bPerso.MoveBy(0,-bPerso.deplace*modSprint);
if( !( bPerso.aGauche || bPerso.aDroite) ) bPerso.changeImage(Per_h.src);
}
if( bPerso.enBas ){
bPerso.MoveBy(0,bPerso.deplace*modSprint);
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(bPerso.deplace*modSprint,0);
if( bPerso.aDroite) bPerso.MoveBy(-bPerso.deplace*modSprint,0);
if( bPerso.enHaut) bPerso.MoveBy(0,bPerso.deplace*modSprint);
if( bPerso.enBas) bPerso.MoveBy(0,-bPerso.deplace*modSprint);
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==16 ) return "shift";
if( CodeClavier==65 ) return "a";
return null;
}
</script>
<body onLoad='init()'>
<!-- DEBUT Objet -->
<!-- POELE -->
<div id="blcPoele1" style="position:absolute;left:450px;top:60px;width:100px;height:40px"><img name='poele' src="./poele_H.png" width="100" height="40"></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>
<!-- LIT -->
<div id="blcLit1" style="position:absolute;left:75px;top:70px;width:75px;height:125px"><img name='lit' src="./lit_H.png" width="75" height="125"></div>
<!-- CAISSE -->
<div id="blcCoffre1" style="position:absolute;left:70px;top:350px;width:35px;height:60px"><img name='caisse' src="./coffre_G.png" width="35" height="60"></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>