Jeu (Game) canvas HTML5

/* Initialisation des variables */
    /* Informations passés par les fichiers de niveaux */
        /* Carte du jeu -> 0 = sol ; 1 = mur ; 2 = sol traversé */
            /* A revoir -> Carte du jeu -> 0 = mur ; 1 = sol traversé ; 2 = sol */
        /* Informations sur le joueur */

    var
        canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d'),
        niveauLargeur = 0, niveauHauteur = 0,
        nbCasesVide = 0, nbCaisses = caisses.length, nbDeplacementsTotalNecessaire = 0,
        nbDeplacementsJoueur = 0, nbDeplacementsCaisses = 0;
        image = {},
        images = {
            joueur: 'images/joueur.png',
            mur: 'images/mur.png',
            sol: 'images/sol.png',
            solTraverse: 'images/solTraverse.png',
            caisse: 'images/caisse.png',
            interrupteur: 'images/interrupteur.png',
            porte: 'images/porte.png'
        },
        cases = {
            sol: 0,
            mur: 1,
            solTraverse: 2
        };

/* Fonctions */
    /* Fonction de jeu */
        /* Fonction exécuté SEULEMENT à l'exécution du jeu */
            function Create() {
                niveauLargeur = niveau[0].length;
                niveauHauteur = niveau.length;

                canvas.width = niveauLargeur * niveauZoom;
                canvas.height = niveauHauteur * niveauZoom;

                $(canvas).css('width', (niveauLargeur * niveauZoom) + 'px');
                $(canvas).css('height', (niveauHauteur * niveauZoom) + 'px');

                for (var lien in images) {
                    image[lien] = new Image();
                    image[lien].src = images[lien];
                }

                Update();

                nbDeplacementsTotalNecessaire = nbCasesVide - nbCaisses;
            }

        /* Mise à jour du jeu */
            function Update() {
                dessineNiveau();
                dessineCaisses();
                dessineJoueur();
                dessineInterrupteurs();
                victoire();
            }

        /* Destruction du jeu */
            function Destroy() {
                /* Affiche un fond coloré */
                    context.rect(0, 0, canvas.width, canvas.height);
                    context.fillStyle = 'rgba(236, 236, 236, .5)';
                    context.fill();

                /* Afficher le texte de la victoire */
                    context.font = '24px Arial';
                    context.fillStyle  = 'rgb(50, 120, 50)';
                    context.textAlign = 'center';
                    context.fillText('Victoire!', canvas.width / 2, canvas.height / 2 + 12);
            }

    /* Fonctions utilitaires */
        /* Annonce la fin du niveau */
            function victoire() {
                /* Si toutes les sols ont été recouvert, on lance la victoire */
                    if (nbCasesVide == nbCaisses) {
                        /* Stop la boucle de mise à jour du jeu */
                            clearInterval(Update);

                        /* Destruction du jeu après 0.5 secondes */
                            setTimeout(Destroy, 500);
                    }
            }

        /* Fonctions de dessins */
            /* Dessine le niveau */
                function dessineNiveau() {
                    nbCasesVide = 0;

                    for (var y = 0 ; y < niveauHauteur ; y++) {
                        for (var x = 0 ; x < niveauLargeur ; x++) {
                            var contenu = niveau[y][x];

                            if (contenu >= 0) {
                                if (contenu == cases.sol) {
                                    context.drawImage(image.sol, x * niveauZoom, y * niveauZoom, niveauZoom, niveauZoom);
                                    nbCasesVide += 1;
                                } else if (contenu == cases.mur) {
                                    context.drawImage(image.mur, x * niveauZoom, y * niveauZoom, niveauZoom, niveauZoom);
                                } else if (contenu == cases.solTraverse) {
                                    context.drawImage(image.solTraverse, x * niveauZoom, y * niveauZoom, niveauZoom, niveauZoom);
                                }
                            }
                        }
                    }
                }

            /* Dessiner le joueur */
                function dessineJoueur() {
                    context.fillStyle = 'rgb(255, 0, 0)';
                    // context.drawImage(image.joueur, joueur.x * niveauZoom, joueur.y * niveauZoom, niveauZoom, niveauZoom);
                    context.drawImage(image.joueur, 0, 0, niveauZoom, niveauZoom, joueur.x * niveauZoom, joueur.y * niveauZoom, niveauZoom, niveauZoom);
                }

            /* Dessiner les caisses */
                function dessineCaisses() {
                    for (var i in caisses) {
                        context.drawImage(image.caisse, caisses[i].x * niveauZoom, caisses[i].y * niveauZoom, niveauZoom, niveauZoom);
                    }
                }

            /* Dessiner les interrupteurs (+ les portes avec des traits) */
                function dessineInterrupteurs() {
                    for (var i in interrupteurs) {
                        if (interrupteurs[i].ouvert == false) {
                            /* Dessine l'interrupteur */
                                context.drawImage(image.interrupteur, interrupteurs[i].xInterrupteur * niveauZoom, interrupteurs[i].yInterrupteur * niveauZoom, niveauZoom, niveauZoom);

                            /* Dessine la porte */
                                context.drawImage(image.porte, interrupteurs[i].xPorte * niveauZoom, interrupteurs[i].yPorte * niveauZoom, niveauZoom, niveauZoom);

                            /* Dessine le trait qui relie la porte et l'interrupteur */
                                context.beginPath();
                                context.strokeStyle = 'rgba(150, 50, 50, .3)';
                                context.lineWidth = 1;
                                context.lineCap = 'round';
                                context.moveTo(interrupteurs[i].xInterrupteur * niveauZoom + (niveauZoom / 2), interrupteurs[i].yInterrupteur * niveauZoom + (niveauZoom / 2));
                                context.lineTo(interrupteurs[i].xPorte * niveauZoom + (niveauZoom / 2), interrupteurs[i].yPorte * niveauZoom + (niveauZoom / 2));
                                context.stroke();
                        }
                    }
                }

        /* Fonctions de déplacement du joueur */
            /* Appuie sur une touche déclenche le mouvement du joueur*/
                $(document).keydown(function(event) {
                    if (event.keyCode == '38' || event.keyCode == '90') { deplacement('haut'); }
                    if (event.keyCode == '40' || event.keyCode == '83') { deplacement('bas'); }
                    if (event.keyCode == '37' || event.keyCode == '81') { deplacement('gauche'); }
                    if (event.keyCode == '39' || event.keyCode == '68') { deplacement('droite'); }
                });

            /* Déplace le joueur */
                function deplacement(ou) {
                    var
                        nvJoueur,
                        nvCaisse,
                        touche = false;

                    /* Vers où se dirige le joueur */
                        if (ou == 'haut') { nvJoueur = {
                            x: joueur.x,
                            y: joueur.y - 1
                        } } else if (ou == 'bas') { nvJoueur = {
                            x: joueur.x,
                            y: joueur.y + 1
                        } } else if (ou == 'gauche') { nvJoueur = {
                            x: joueur.x - 1,
                            y: joueur.y
                        } } else if (ou == 'droite') { nvJoueur = {
                            x: joueur.x + 1,
                            y: joueur.y
                        } }

                    /* Si il y a une caisse, on la pousse si possible */
                        if (yAQuoiLa(nvJoueur.x, nvJoueur.y, 'caisse') != false) {
                            var i = yAQuoiLa(nvJoueur.x, nvJoueur.y, 'caisse') - 1;

                            if (ou == 'haut') { nvCaisse = {
                                x: caisses[i].x,
                                y: caisses[i].y - 1
                            } } else if (ou == 'bas') { nvCaisse = {
                                x: caisses[i].x,
                                y: caisses[i].y + 1
                            } } else if (ou == 'gauche') { nvCaisse = {
                                x: caisses[i].x - 1,
                                y: caisses[i].y
                            } } else if (ou == 'droite') { nvCaisse = {
                                x: caisses[i].x + 1,
                                y: caisses[i].y
                            } }

                            if (caisses[i].x == nvJoueur.x && caisses[i].y == nvJoueur.y) {
                                if (niveau[nvCaisse.y][nvCaisse.x] == cases.mur || niveau[nvCaisse.y][nvCaisse.x] == cases.solTraverse) {
                                    nvJoueur.x = joueur.x;
                                    nvJoueur.y = joueur.y;
                                    nvCaisse.x = caisses[i].x;
                                    nvCaisse.y = caisses[i].y;
                                    nbDeplacementsCaisses--;
                                }

                                caisses[i].x = nvCaisse.x;
                                caisses[i].y = nvCaisse.y;
                                nbDeplacementsCaisses++;
                                touche = true;
                            }
                        }

                    /* Si il y a un interrupteur, on l'active */
                        if (yAQuoiLa(nvJoueur.x, nvJoueur.y, 'interrupteur') != false) {
                            var i = yAQuoiLa(nvJoueur.x, nvJoueur.y, 'interrupteur') - 1;
                            interrupteurs[i].ouvert = true;
                        }

                    /* Si il y a une porte, le mouvement du joueur est annulé */
                        if (yAQuoiLa(nvJoueur.x, nvJoueur.y, 'porte') == true) {
                            nvJoueur.x = joueur.x;
                            nvJoueur.y = joueur.y;
                        }

                    /* Déplacement du joueur */
                        if (niveau[nvJoueur.y][nvJoueur.x] == cases.sol && touche == false) {
                            niveau[nvJoueur.y][nvJoueur.x] = cases.solTraverse;
                            joueur.x = nvJoueur.x;
                            joueur.y = nvJoueur.y;
                            nbDeplacementsJoueur++;
                        }
                }

        /* Y a quoi là ? */
            function yAQuoiLa(x, y, quoi) {
                if (quoi == 'niveau') {
                    return niveau[y][x];
                } else if (quoi == 'caisse') {
                    for (var i in caisses) {
                        if (x == caisses[i].x && y == caisses[i].y) {
                            return parseInt(i + 1);
                        }
                    }
                } else if (quoi == 'interrupteur') {
                    for (var i in interrupteurs) {
                        if (x == interrupteurs[i].xInterrupteur && y == interrupteurs[i].yInterrupteur && interrupteurs[i].ouvert == false) {
                            return parseInt(i + 1);
                        }
                    }
                } else if (quoi == 'porte') {
                    for (var i in interrupteurs) {
                        if (x == interrupteurs[i].xPorte && y == interrupteurs[i].yPorte && interrupteurs[i].ouvert == false) {
                            return true;
                        }
                    }
                }

                return false;
            }

/* Fonctions à exécuter */
    Create();
    Update = setInterval(Update, 1000 / 60);