API tools faq
paste
Teddy78

Tableau jeu

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