API tools faq
paste
Teddy78

Jeu Malharhakee

Teddy78
Nov 1st, 2011
55
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 5.85 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <script type="text/javascript" src="mousePos.js"></script>
  5. <style>
  6. #kevinou
  7. {
  8.      border : 1px solid black;
  9. }
  10. </style>
  11. </head>
  12. <body onKeyDown='keyDown(event)' onKeyUp='keyUp(event)'>
  13. <div id="kevin" style="position:absolute;width:16px;height:18px;"></div>
  14. <div id="mapDiv" style="position:absolute"></div>
  15. <script>
  16. t = 1;
  17. x = 20;
  18. y = 20;
  19. left = 0;
  20. right = 0;
  21. up = 0;
  22. bot = 0;
  23. w = 0;
  24. collones = 0;
  25. lignes = 0;
  26. divMapX = 0;
  27. divMapY = 0;
  28.  
  29.  
  30. map =  new Array();
  31. map[0] =  new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); // 1 = Mur ; 0 = Case vide
  32. map[1] =  new Array(1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1);
  33. map[2] =  new Array(0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1);
  34. map[3] =  new Array(0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1);
  35. map[4] =  new Array(1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1);
  36. map[5] =  new Array(1,1,1,1,0,0,1,1,1,1,1,0,0,1,1,1);
  37. map[6] =  new Array(1,1,1,1,0,0,1,1,1,1,1,0,0,1,1,1);
  38. map[7] =  new Array(1,1,1,1,0,0,1,1,1,1,1,0,0,1,1,1);
  39. map[8] =  new Array(1,1,1,1,0,0,1,1,1,1,1,0,0,1,1,1);
  40. map[9] =  new Array(1,1,1,1,0,0,0,0,0,0,0,0,0,1,1,1);
  41. map[10] = new Array(1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1);
  42. map[11] = new Array(1,1,1,1,1,1,0,0,1,1,1,1,1,1,5,1);
  43. map[12] = new Array(1,1,1,1,1,1,0,0,0,0,0,0,0,0,1,1);
  44. map[13] = new Array(1,1,1,1,1,1,0,0,0,0,0,0,0,0,1,1);
  45. map[14] = new Array(1,1,1,1,1,1,1,1,1,0,0,0,0,0,1,1);
  46. map[15] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1);
  47.  
  48. div =  new Array();
  49. for(i = 0; i < map.length; i++)
  50. {
  51.     div[i] = new Array();
  52.     divMapY += "16px";
  53.     for(j = 0; j < map[i].length; j++)
  54.         {
  55.         divMapX += "16px";
  56.         div[i][j] = new Array();
  57.         div[i][j] =document.createElement('div');
  58.         div[i][j].setAttribute('id', "divNumero"+i+","+j);
  59.         div[i][j].style.width = "16px";
  60.         div[i][j].style.height = "16px";
  61.         div[i][j].style.left = divMapX ;
  62.         div[i][j].style.top = divMapY ;
  63.         div[i][j].style.backgroundImage = 'url("tiles.png")';
  64.         if (map[i][j] == 1)
  65.             {
  66.             div[i][j].style.backgroundPosition= "16px 256px"; // affiche un mur si la position est 1
  67.             }
  68.         else
  69.             {
  70.             div[i][j].style.backgroundPosition= "32px 240px"; // sinon affiche une case vide (herbe)
  71.             }
  72.         }
  73.    
  74. }
  75.  
  76.  
  77. /*string = ""
  78. for (i = 0; i < map.length; i++)
  79.     {
  80.     for (j= 0; j < map[i].length; j++)
  81.         {
  82.         string += map[i][j]
  83.         }
  84.     string += "<br />"
  85.     }
  86. document.getElementById('mapDiv').innerHTML = string;
  87. */
  88.  
  89. kevin = document.getElementById('kevin');
  90. kevin.style.backgroundImage = 'url("playerTileSet.png")';
  91. gameplayLoop();
  92.  
  93. // J'ai ptete fait des fautes de frappe, j'ai pas testé le code.
  94. // On considère que la position du perso est définie par les variables x et y:
  95. // Cette fonction va se répéter toutes les 33ms, dedans tu mets le code qui gère ton jeu (affichage, déplacement, blabla)
  96. function gameplayLoop()
  97. {
  98. var begin = new Date(); // Moment de début de la boucle
  99.  
  100. kevin.style.left = x + "px";
  101. kevin.style.top = y + "px";
  102. /*
  103.     Code du jeu à éxécuter à chaque boucle (déplacements, etc)
  104. */
  105. movePlayer(); // Cette fonction sera apellée à chaque passage de boucle (donc toutes les 33 ms) pour déplacer le personnage.
  106.  
  107. var end = new Date(); // Moment de fin de la boucle
  108. delta = end.getTime() - begin.getTime();  //Delta correspond au temps que la boucle a mis à s'éxécuter. Ca permet de s'assurer que la gameplayLoop se répètera précisément toutes les 33ms
  109. if (delta > 33)
  110. {
  111. delta = 33;
  112. }
  113. setTimeout('gameplayLoop()', 33 - delta); // Cette ligne sert à répéter la fonction gameplayloop dans un temps egal à 33 - delta
  114. }
  115. function keyDown(event)
  116. {
  117.     // Cette fonction va s'occuper d'activer une variable quand le joueur appuie sur une touche
  118.     if (event.keyCode == 37)
  119.     {
  120.         left = 1; // 37 = flèche gauche
  121.     }
  122.     if (event.keyCode == 38)
  123.     {
  124.         up = 1; // 38 = flèche haut
  125.     }
  126.     if (event.keyCode == 39)
  127.     {
  128.         right = 1; // 39 = flèche droite
  129.     }
  130.     if (event.keyCode == 40)
  131.     {
  132.         bot = 1; // 40 = flèche bas
  133.     }
  134. }
  135. function keyUp(event)
  136. {
  137.     // Cette fonction va désactiver les variables quand le joueur lache une touche.
  138.     if (event.keyCode == 37)
  139.     {
  140.         left = 0; // 37 = flèche gauche
  141.     }
  142.     if (event.keyCode == 38)
  143.     {
  144.         up = 0; // 38 = flèche haut
  145.     }
  146.     if (event.keyCode == 39)
  147.     {
  148.         right = 0; // 39 = flèche droite
  149.     }
  150.     if (event.keyCode == 40)
  151.     {
  152.         bot = 0; // 40 = flèche bas
  153.     }
  154. }
  155. function movePlayer()
  156. {
  157.     // Cette fonction va vérifier quelles touches sont activées et déplacer le joueur en conséquence. Par exemple:
  158.     if (left == 1)
  159.     {
  160.         x -= 5;
  161.         caractAnim("left"); // Déplace le joueur de - 5 sur x (donc vers la gauche)
  162.     }
  163.     if (right == 1)
  164.     {
  165.         x += 5;
  166.         caractAnim("right");
  167.     }
  168.     if (up == 1)
  169.     {
  170.         y -= 5;
  171.         caractAnim("up");
  172.     }
  173.     if (bot == 1)
  174.     {
  175.         y += 5;
  176.         caractAnim("bot");
  177.     }
  178. }
  179. function caractAnim(p)
  180. {
  181.     if (p == "left")
  182.     {
  183.          switch(t)
  184.         {
  185.         case 1:
  186.         kevin.style.backgroundPosition= "16px 18px";
  187.         t = 2;
  188.         break;
  189.         case 2:
  190.         kevin.style.backgroundPosition= "30px 18px";
  191.         t = 3;
  192.         break;
  193.         case 3:
  194.         kevin.style.backgroundPosition= "45px 18px";
  195.         t = 1;
  196.         break;
  197.         }
  198.     }
  199.    
  200.     if (p == "right")
  201.     {
  202.          switch(t)
  203.         {
  204.         case 1:
  205.         kevin.style.backgroundPosition= "18px 54px";
  206.         t = 2;
  207.         break;
  208.         case 2:
  209.         kevin.style.backgroundPosition= "33px 54px";
  210.         t = 3;
  211.         break;
  212.         case 3:
  213.         kevin.style.backgroundPosition= "48px 54px";
  214.         t = 1;
  215.         break;
  216.         }
  217.     }
  218.     if (p == "up")
  219.     {
  220.          switch(t)
  221.         {
  222.         case 1:
  223.         kevin.style.backgroundPosition= "1px 72px";
  224.         t = 2;
  225.         break;
  226.         case 2:
  227.         kevin.style.backgroundPosition= "17px 72px";
  228.         t = 3;
  229.         break;
  230.         case 3:
  231.         kevin.style.backgroundPosition= "31px 72px";
  232.         t = 1;
  233.         break;
  234.         }
  235.     }
  236.     if (p == "bot")
  237.     {
  238.          switch(t)
  239.         {
  240.         case 1:
  241.         kevin.style.backgroundPosition= "1px 36px";
  242.         t = 2;
  243.         break;
  244.         case 2:
  245.         kevin.style.backgroundPosition= "17px 36px";
  246.         t = 3;
  247.         break;
  248.         case 3:
  249.         kevin.style.backgroundPosition= "31px 36px";
  250.         t = 1;
  251.         break;
  252.         }
  253.     }
  254. }
  255. </script>
  256. </body>
  257. </html>
  258.  
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!