API tools faq
paste
Advertisement
PifyZ

Jeu (Game) canvas HTML5

PifyZ
Mar 9th, 2012
363
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 10.02 KB | None | 0 0
raw download clone embed print report diff
  1. /* Initialisation des variables */
  2.     /* Informations passés par les fichiers de niveaux */
  3.         /* Carte du jeu -> 0 = sol ; 1 = mur ; 2 = sol traversé */
  4.             /* A revoir -> Carte du jeu -> 0 = mur ; 1 = sol traversé ; 2 = sol */
  5.         /* Informations sur le joueur */
  6.  
  7.     var
  8.         canvas = document.getElementById('canvas'),
  9.         context = canvas.getContext('2d'),
  10.         niveauLargeur = 0,
  11.         niveauHauteur = 0,
  12.         nbCasesVide = 0,
  13.         nbCaisses = caisses.length,
  14.         nbDeplacementsTotalNecessaire = 0,
  15.         nbDeplacementsJoueur = 0,
  16.         nbDeplacementsCaisses = 0,
  17.         image = {},
  18.         images = {
  19.             joueur: 'images/joueur.png',
  20.             mur: 'images/mur.png',
  21.             sol: 'images/sol.png',
  22.             solTraverse: 'images/solTraverse.png',
  23.             caisse: 'images/caisse.png',
  24.             interrupteur: 'images/interrupteur.png',
  25.             porte: 'images/porte.png',
  26.             tir: 'images/tir.png'
  27.         },
  28.         cases = {
  29.             sol: 0,
  30.             mur: 1,
  31.             solTraverse: 2
  32.         },
  33.         tir = {
  34.             x: -1,
  35.             y: -1,
  36.             sens: 1
  37.         };
  38.  
  39. /* Fonctions */
  40.     /* Fonction de jeu */
  41.         /* Fonction exécuté SEULEMENT à l'exécution du jeu */
  42.             function Create() {
  43.                 niveauLargeur = niveau[0].length;
  44.                 niveauHauteur = niveau.length;
  45.  
  46.                 canvas.width = niveauLargeur * niveauZoom;
  47.                 canvas.height = niveauHauteur * niveauZoom;
  48.  
  49.                 $(canvas).css('width', (niveauLargeur * niveauZoom) + 'px');
  50.                 $(canvas).css('height', (niveauHauteur * niveauZoom) + 'px');
  51.  
  52.                 for (var lien in images) {
  53.                     image[lien] = new Image();
  54.                     image[lien].src = images[lien];
  55.                 }
  56.  
  57.                 Update();
  58.  
  59.                 nbDeplacementsTotalNecessaire = nbCasesVide - nbCaisses;
  60.             }
  61.  
  62.         /* Mise à jour du jeu */
  63.             function Update() {
  64.                 dessineNiveau();
  65.                 dessineCaisses();
  66.                 dessineJoueur();
  67.                 dessineTir();
  68.                 dessineInterrupteurs();
  69.                 victoire();
  70.             }
  71.  
  72.         /* Destruction du jeu */
  73.             function Destroy() {
  74.                 /* Affiche un fond coloré */
  75.                     context.rect(0, 0, canvas.width, canvas.height);
  76.                     context.fillStyle = 'rgba(236, 236, 236, .5)';
  77.                     context.fill();
  78.  
  79.                 /* Afficher le texte de la victoire */
  80.                     context.font = '24px Arial';
  81.                     context.fillStyle  = 'rgb(50, 120, 50)';
  82.                     context.textAlign = 'center';
  83.                     context.fillText('Victoire!', canvas.width / 2, canvas.height / 2 + 12);
  84.             }
  85.  
  86.     /* Fonctions utilitaires */
  87.         /* Annonce la fin du niveau */
  88.             function victoire() {
  89.                 /* Si toutes les sols ont été recouvert, on lance la victoire */
  90.                     if (nbCasesVide == nbCaisses) {
  91.                         /* Stop la boucle de mise à jour du jeu */
  92.                             clearInterval(Update);
  93.  
  94.                         /* Destruction du jeu après 0.5 secondes */
  95.                             setTimeout(Destroy, 500);
  96.                     }
  97.             }
  98.  
  99.         /* Fonctions de dessins */
  100.             /* Dessine le niveau */
  101.                 function dessineNiveau() {
  102.                     nbCasesVide = 0;
  103.  
  104.                     for (var y = 0 ; y < niveauHauteur ; y++) {
  105.                         for (var x = 0 ; x < niveauLargeur ; x++) {
  106.                             var contenu = niveau[y][x];
  107.  
  108.                             if (contenu >= 0) {
  109.                                 if (contenu == cases.sol) {
  110.                                     context.drawImage(image.sol, x * niveauZoom, y * niveauZoom, niveauZoom, niveauZoom);
  111.                                     nbCasesVide += 1;
  112.                                 } else if (contenu == cases.mur) {
  113.                                     context.drawImage(image.mur, x * niveauZoom, y * niveauZoom, niveauZoom, niveauZoom);
  114.                                 } else if (contenu == cases.solTraverse) {
  115.                                     context.drawImage(image.solTraverse, x * niveauZoom, y * niveauZoom, niveauZoom, niveauZoom);
  116.                                 }
  117.                             }
  118.                         }
  119.                     }
  120.                 }
  121.  
  122.             /* Dessiner le joueur */
  123.                 function dessineJoueur() {
  124.                     // context.drawImage(image.joueur, joueur.x * niveauZoom, joueur.y * niveauZoom, niveauZoom, niveauZoom);
  125.                     context.drawImage(image.joueur, joueur.sens * niveauZoom - niveauZoom, 0, niveauZoom, niveauZoom, joueur.x * niveauZoom, joueur.y * niveauZoom, niveauZoom, niveauZoom);
  126.                 }
  127.  
  128.             /* Dessiner le tir du joueur */
  129.                 function dessineTir() {
  130.                     context.drawImage(image.tir, tir.sens * niveauZoom - niveauZoom, 0, niveauZoom, niveauZoom, tir.x * niveauZoom, tir.y * niveauZoom, niveauZoom, niveauZoom);
  131.                 }
  132.  
  133.             /* Dessiner les caisses */
  134.                 function dessineCaisses() {
  135.                     for (var i in caisses) {
  136.                         context.drawImage(image.caisse, caisses[i].x * niveauZoom, caisses[i].y * niveauZoom, niveauZoom, niveauZoom);
  137.                     }
  138.                 }
  139.  
  140.             /* Dessiner les interrupteurs (+ les portes avec des traits) */
  141.                 function dessineInterrupteurs() {
  142.                     for (var i in interrupteurs) {
  143.                         if (interrupteurs[i].ouvert == false) {
  144.                             /* Dessine l'interrupteur */
  145.                                 context.drawImage(image.interrupteur, interrupteurs[i].xInterrupteur * niveauZoom, interrupteurs[i].yInterrupteur * niveauZoom, niveauZoom, niveauZoom);
  146.  
  147.                             /* Dessine la porte */
  148.                                 context.drawImage(image.porte, interrupteurs[i].xPorte * niveauZoom, interrupteurs[i].yPorte * niveauZoom, niveauZoom, niveauZoom);
  149.  
  150.                             /* Dessine le trait qui relie la porte et l'interrupteur */
  151.                                 context.beginPath();
  152.                                 context.strokeStyle = 'rgba(25, 25, 255, .2)';
  153.                                 context.lineWidth = 2;
  154.                                 context.lineCap = 'round';
  155.                                 context.moveTo(interrupteurs[i].xInterrupteur * niveauZoom + (niveauZoom / 2), interrupteurs[i].yInterrupteur * niveauZoom + (niveauZoom / 2));
  156.                                 context.lineTo(interrupteurs[i].xPorte * niveauZoom + (niveauZoom / 2), interrupteurs[i].yPorte * niveauZoom + (niveauZoom / 2));
  157.                                 context.stroke();
  158.                         }
  159.                     }
  160.                 }
  161.  
  162.         /* Fonctions de déplacement du joueur */
  163.             /* Appuie sur une touche déclenche le mouvement du joueur*/
  164.                 $(document).keydown(function(e) {
  165.                     if (e.keyCode == '38' || e.keyCode == '90') { deplacement('haut'); }
  166.                     if (e.keyCode == '40' || e.keyCode == '83') { deplacement('bas'); }
  167.                     if (e.keyCode == '37' || e.keyCode == '81') { deplacement('gauche'); }
  168.                     if (e.keyCode == '39' || e.keyCode == '68') { deplacement('droite'); }
  169.                     if (e.keyCode == '32') {
  170.                         if (joueur.sens == 1) {
  171.                             alert('haut');
  172.                         } else if (joueur.sens == 2) {
  173.                             alert('bas');
  174.                         } else if (joueur.sens == 3) {
  175.                             alert('gauche');
  176.                         } else if (joueur.sens == 4) {
  177.                             alert('droite');
  178.                         }
  179.                     }
  180.                 });
  181.  
  182.             /* Déplace le joueur */
  183.                 function deplacement(ou) {
  184.                     var
  185.                         nvJoueur,
  186.                         nvCaisse,
  187.                         touche = false;
  188.  
  189.                     /* Vers où se dirige le joueur */
  190.                         if (ou == 'haut') { nvJoueur = {
  191.                             x: joueur.x,
  192.                             y: joueur.y - 1,
  193.                             sens: 1
  194.                         } } else if (ou == 'bas') { nvJoueur = {
  195.                             x: joueur.x,
  196.                             y: joueur.y + 1,
  197.                             sens: 2
  198.                         } } else if (ou == 'gauche') { nvJoueur = {
  199.                             x: joueur.x - 1,
  200.                             y: joueur.y,
  201.                             sens: 3
  202.                         } } else if (ou == 'droite') { nvJoueur = {
  203.                             x: joueur.x + 1,
  204.                             y: joueur.y,
  205.                             sens: 4
  206.                         } }
  207.  
  208.                         joueur.sens = nvJoueur.sens;
  209.  
  210.                     /* Si il y a une caisse, on la pousse si possible */
  211.                         if (yAQuoiLa(nvJoueur.x, nvJoueur.y, 'caisse-booleen') == true) {
  212.                             var i = yAQuoiLa(nvJoueur.x, nvJoueur.y, 'caisse-id') / 10;
  213.  
  214.                             if (ou == 'haut') { nvCaisse = {
  215.                                 x: caisses[i].x,
  216.                                 y: caisses[i].y - 1
  217.                             } } else if (ou == 'bas') { nvCaisse = {
  218.                                 x: caisses[i].x,
  219.                                 y: caisses[i].y + 1
  220.                             } } else if (ou == 'gauche') { nvCaisse = {
  221.                                 x: caisses[i].x - 1,
  222.                                 y: caisses[i].y
  223.                             } } else if (ou == 'droite') { nvCaisse = {
  224.                                 x: caisses[i].x + 1,
  225.                                 y: caisses[i].y
  226.                             } }
  227.  
  228.                             if (
  229.                                 yAQuoiLa(nvCaisse.x, nvCaisse.y, 'caisse-booleen') == true
  230.                                 || yAQuoiLa(nvCaisse.x, nvCaisse.y, 'porte-booleen') == true
  231.                             ) {
  232.                                 nvCaisse.x = caisses[i].x;
  233.                                 nvCaisse.y = caisses[i].y;
  234.                             }
  235.  
  236.                             if (yAQuoiLa(nvCaisse.x, nvCaisse.y, 'interrupteur-booleen') == true) {
  237.                                 var i = yAQuoiLa(nvCaisse.x, nvCaisse.y, 'interrupteur-id');
  238.                                 interrupteurs[i].ouvert = true;
  239.                             }
  240.  
  241.                             if (caisses[i].x == nvJoueur.x && caisses[i].y == nvJoueur.y) {
  242.                                 if (niveau[nvCaisse.y][nvCaisse.x] == cases.mur || niveau[nvCaisse.y][nvCaisse.x] == cases.solTraverse) {
  243.                                     nvJoueur.x = joueur.x;
  244.                                     nvJoueur.y = joueur.y;
  245.                                     nvCaisse.x = caisses[i].x;
  246.                                     nvCaisse.y = caisses[i].y;
  247.                                     nbDeplacementsCaisses--;
  248.                                 }
  249.  
  250.                                 caisses[i].x = nvCaisse.x;
  251.                                 caisses[i].y = nvCaisse.y;
  252.                                 nbDeplacementsCaisses++;
  253.                                 touche = true;
  254.                             }
  255.                         }
  256.  
  257.                     /* Si il y a un interrupteur, on l'active */
  258.                         if (yAQuoiLa(nvJoueur.x, nvJoueur.y, 'interrupteur-booleen') == true) {
  259.                             var i = yAQuoiLa(nvJoueur.x, nvJoueur.y, 'interrupteur-id');
  260.                             interrupteurs[i].ouvert = true;
  261.                         }
  262.  
  263.                     /* Si il y a une porte, le mouvement du joueur est annulé */
  264.                         if (yAQuoiLa(nvJoueur.x, nvJoueur.y, 'porte-boolean') == true) {
  265.                             nvJoueur.x = joueur.x;
  266.                             nvJoueur.y = joueur.y;
  267.                         }
  268.  
  269.                     /* Déplacement du joueur */
  270.                         if (niveau[nvJoueur.y][nvJoueur.x] == cases.sol && touche == false) {
  271.                             niveau[nvJoueur.y][nvJoueur.x] = cases.solTraverse;
  272.                             joueur.x = nvJoueur.x;
  273.                             joueur.y = nvJoueur.y;
  274.                             nbDeplacementsJoueur++;
  275.                         }
  276.                 }
  277.  
  278.         /* Y a quoi là ? */
  279.             function yAQuoiLa(x, y, quoi) {
  280.                 /^(.+)-(.+)$/i.exec(quoi);
  281.  
  282.                 if (RegExp.$1 == 'niveau') {
  283.                     return niveau[y][x];
  284.                 } else if (RegExp.$1 == 'caisse') {
  285.                     for (var i in caisses) {
  286.                         if (x == caisses[i].x && y == caisses[i].y) {
  287.                             if (RegExp.$2 == 'booleen') {
  288.                                 return true;
  289.                             } else {
  290.                                 return parseInt(i);
  291.                             }
  292.                         }
  293.                     }
  294.                 } else if (RegExp.$1 == 'interrupteur') {
  295.                     for (var i in interrupteurs) {
  296.                         if (x == interrupteurs[i].xInterrupteur && y == interrupteurs[i].yInterrupteur && interrupteurs[i].ouvert == false) {
  297.                             if (RegExp.$2 == 'booleen') {
  298.                                 return true;
  299.                             } else {
  300.                                 return parseInt(i);
  301.                             }
  302.                         }
  303.                     }
  304.                 } else if (RegExp.$1 == 'porte') {
  305.                     for (var i in interrupteurs) {
  306.                         if (x == interrupteurs[i].xPorte && y == interrupteurs[i].yPorte && interrupteurs[i].ouvert == false) {
  307.                             return true;
  308.                         }
  309.                     }
  310.                 }
  311.  
  312.                 return false;
  313.             }
  314.  
  315. /* Fonctions à exécuter */
  316.     Create();
  317.     Update = setInterval(Update, 1000 / 60);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!