<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; bPerso.enContactAvec = 'rien !'; } function ToucheBas(e){ var nav = (IE) ? GetDirection(event.keyCode) : GetDirection(e.which) ; if( nav == null ) return; if( nav == "shift" ) bPerso.sprint = true; if( nav == "espace" ) 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(false); 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 == "espace" ) alert( "Le personnage est en contact avec " + bPerso.enContactAvec ); 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(true); if( hitTest != 'false' ){ 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); } } }else{ if( bPerso.aGauche == false && bPerso.aDroite == false && bPerso.enHaut == false && bPerso.enBas == false ){ var hitTest = TousLesHitTest(true); if( hitTest != 'false' ){ 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); } } } } function TousLesHitTest(sansDescription){ // ---- Début des objets uniques var blocUniques = Array( 'blcPorte1' , 'blcLit1' , 'blcPoele1' , 'blcCoffre1' , 'blcSortie1' ); var descriptionUniques = Array( 'une porte un peu grande pour lui !' , 'un lit !' , 'un poele du moyen-age !' , 'un coffre !' , 'la sortie !') for ( var i = 0 ; i < blocUniques.length ; i++){ if (bPerso.HitTest(blocUniques[i]) == 'true' ){ bPerso.enContactAvec = descriptionUniques[i]; // -- DEBUT Cas Spéciaux de HitTests if ( blocUniques[i] == 'blcSortie1'){ window.location.href = 'http://www.cross-code.com/en/start'; } // -- FIN Cas Spéciaux de HitTests return 'true'; } } // ---- Fin des objets uniques // ---- Début des MURS for (var i = 1 ; i < 5 ; i++ ){ var nomBloc = 'blcMurCoin' + i; if (bPerso.HitTest(nomBloc) == 'true' ){ bPerso.enContactAvec = 'un mur...'; return 'true'; } } for (var i = 1 ; i < 9 ; i++ ){ var nomBloc = 'blcMurVertical' + i ; if (bPerso.HitTest(nomBloc) == 'true' ){ bPerso.enContactAvec = 'un mur...'; return 'true'; } } for (var i = 1 ; i < 10 ; i++ ){ var nomBloc = 'blcMurHorizontal' + i ; if (bPerso.HitTest(nomBloc) == 'true' ){ bPerso.enContactAvec = 'un mur...'; return 'true'; } } for (var i = 1 ; i < 3 ; i++ ){ var nomBloc = 'blcFinMur' + i; if (bPerso.HitTest(nomBloc) == 'true' ){ bPerso.enContactAvec = 'une fin de mur...'; return 'true'; } } // ---- Fin des MURS // ---- Debut aucuns HitTests if ( sansDescription == false ){ bPerso.enContactAvec = 'rien'; } return 'false'; // ---- Fin aucuns HitTests } function Bouge(){ var hitTest = TousLesHitTest(false); 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==32 ) return "espace"; 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="./images/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="./images/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="./images/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="./images/coffre_G.png" width="35" height="60"></div> <!-- FIN Objet --> <!-- DEBUT Actions Controllées --> <div id="blcSortie1" style="position:absolute;left:280px;top:485px;width:80px;height:100px"><img name='sortie' src="./images/sortie_B.png" width="80" height="100"></div> <!-- FIN Actions Controllées--> <!-- DEBUT Murs --> <div id="blcMurCoin1" style="position:absolute;left:0px;top:0px;width:85px;height:70px"><img name='murHG' src="./images/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="./images/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="./images/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="./images/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="./images/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="./images/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="./images/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="./images/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="./images/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="./images/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="./images/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="./images/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="./images/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="./images/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="./images/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="./images/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="./images/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="./images/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="./images/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="./images/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="./images/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="./images/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="./images/Fin_Mur_BD.png" width="10" height="60"></div> <!-- FIN Murs --> <div id="blcPerso" style="position:absolute;left:300px;top:150px;width:25px;height:25px"><img name='personnage' src="./Perso_B.png" width="25" height="25"></div> </body> </html>