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 */

    /* Variables utilitaires */
        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 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() {
            /* Liste des fonctions à exécuter en permanence */
                dessineNiveau();
                dessineCaisses();
                dessineJoueur();
                dessineInterrupteurs();
                victoire();
        }

    /* Déstruction 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);
        }

    /* Victoire */
        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);
                }
        }

    /* Dessiner les murs du 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 le joueur */
        function dessineCaisses() {
            for (var i in caisses) {
                context.drawImage(image.caisse, caisses[i].x * niveauZoom, caisses[i].y * niveauZoom, niveauZoom, niveauZoom);
            }
        }

    /* Dessiner le joueur */
        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();
                }
            }
        }

    /* Déplacement 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éplacements du joueur */
        function deplacement(ou) {
            var
                nvJoueur,
                nvCaisse,
                touche = false;

            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
            } }

            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;
                }
            }

            if (yAQuoiLa(nvJoueur.x, nvJoueur.y, 'interrupteur') != false) {
                var i = yAQuoiLa(nvJoueur.x, nvJoueur.y, 'interrupteur') - 1;
                interrupteurs[i].ouvert = true;
            }

            if (yAQuoiLa(nvJoueur.x, nvJoueur.y, 'porte') == true) {
                nvJoueur.x = joueur.x;
                nvJoueur.y = joueur.y;
            }

            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);