Untitled

<!DOCTYPE html>
<html>

<head>
    <title>PAKMAN</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
    <style>
        body {
            margin: 0;
            min-height: 100%;
            font-family: 'Press Start 2P';
            font-weight: bold;
            justify-content: center;
            text-align: center;
            display: flex;
            background: #333;
            color: #fff;
        }

        h2 {
            margin-top: 5px;
        }

        #container {
            width: 960px;
        }

        #game {
            position: relative;
        }

        #game div {
            position: absolute;
            height: 48px;
            width: 48px;
        }

        .vie {
            float: left;
        }

        #scoreDiv {
            float: right;
        }

        /* COURS 2 */

        .mur {
            background: url("mur.png") no-repeat left top;
        }

        .sol {
            background: url('sol.png') no-repeat left top;
            z-index: -2;
        }

        .gum {
            background: url('gum.png') no-repeat left top;
            z-index: -1;
        }

        .diams {
            background: url('diamant.png') no-repeat left top;
            animation: sprite2 .3s steps(2) infinite;
            z-index: -1;
        }

        #pac {
            background: url('pac.png') no-repeat left top;
            animation: sprite4 .3s steps(4) infinite;
        }

        .fantome {
            animation: sprite3 .3s steps(3) infinite;

            background: url('f5.png') no-repeat left top;
            /* important! cela permet d'avoir quoi qu'il arrive une image sur tout les fantômes et d'eviter le bug des "fantomes" invisibles*/
        }

        /* OPTION : si on veut que les fantômes aient leur propre apparence, on peut mettre le CSS suivant */

        .f1 {
            background: url('f1.png') no-repeat left top;
        }

        .f2 {
            background: url('f2.png') no-repeat left top;
        }

        .f3 {
            background: url('f3.png') no-repeat left top;
        }

        .f4 {
            background: url('f3.png') no-repeat left top;
        }

        .fantome.freeze {
            background: url('f-freeze.png') no-repeat left top;
            animation: sprite3 .3s steps(3) infinite;
        }

        /*
        Etapes des animations. Mode d'emploi:
        pr une spriteSheet à 2 frames (comme 'diamant.png') utiliser sprite2 dans animations et mettre step(2)
        pr 3 frames comme 'f1.png' utiliser sprite3 et step(3).....etc.
        */

        @keyframes sprite2 {
            100% {
                /* (tailleCase * -2) - tailleCase (le dernier n'apparait que de 100 à 100% ;) */
                background-position-x: -96px;
            }
        }

        @keyframes sprite3 {
            100% {
                /* -tailleCase * 3*/
                background-position-x: -144px;
            }
        }

        @keyframes sprite4 {
            100% {
                /* -tailleCase * 4 */
                background-position-x: -192px;
            }
        }
    </style>
    <script src="jquery.js"></script>
    <script src="fonctions.js"></script>
</head>

<body>
    <div id="container">
        <!-- POINTS DE VIE -->
        <img src="vie.png" class="vie">
        <img src="vie.png" class="vie">
        <img src="vie.png" class="vie">

        <!-- SCORE -->
        <div id="scoreDiv">SCORE:
            <span id="score">0</span>
        </div>

        <!-- TITRE -->
        <h2>PAC MAN</h2>

        <!-- MAIN GAME -->
        <div id="game"></div>
    </div>

    <script>
        /* Code couleurs pour la map (8 possibilités):
         *
         * 0 == noir   == 000000 == mur
         * 1 == bleu   == 0000ff == chemin
         * 2 == vert   == 00ff00 == gum
         * 3 == jaune  == 00ffff == diams
         * 4 == rouge  == ff0000 == fantome
         * 5 == violet == ff00ff == posDepartPac (pacMan est sur un chemin libre)
         * 6 == orange == ffff00 == custom
         * 7 == blanc  == ffffff == custom
         * + 2 fois plus de pixels peuvent être débloqués avec les pixels transparents
         *
         * */

        /* Directions
            h: haut
            b: bas
            g: gauche
            d: droite
            s: stop
        */

        // VARIABLES GLOBALES

        var fps = 30; // 30fps est pas mal pour un ordinateur peu puissant
        var tailleCase = 48;

        // Tableau de fantômes qu'on remplit plus tard
        var fantomes = [];

        var speedP = 6;
        var speedF = 6;

        var pac = {
            position: [0, 0],
            positionDepart: [0, 0],
            direction: 's',
            nextDirection: 's'
        };

        var directions = {
            h: [0, -1], // haut
            d: [1, 0], // droite
            b: [0, 1], // bas
            g: [-1, 0], // gauche
            s: [0, 0] // stop
        };

        var directionsInverses = {
            h: 'b',
            d: 'g',
            b: 'h',
            g: 'd',
            s: 's'
        };

        var bg = {
            h: 0,
            d: -96,
            b: -144,
            g: -48
        };

        // Interpréteur de map en pixels
        // Lire tous les pixels et les transformer en array
        imageToMap('map.png', onLoad);

        function onLoad(map) {

            var fId = 1;

            for (var x = 0; x < map.length; x++) {
                for (var y = 0; y < map[x].length; y++) {

                    var n = map[x][y];

                    var pos = {
                        left: x * tailleCase,
                        top: y * tailleCase
                    };

                    // mur ou sol ?
                    if (n == 0) {
                        $('#game').append($('<div class="mur"></div>').css(pos));
                    } else {
                        $('#game').append($('<div class="sol x' + x + ' y' + y + '"></div>').css(pos));
                    }

                    // gum
                    if (n == 2 || n == 4) {
                        $('#game').append($('<div class="gum"></div>').css(pos));
                    }

                    // diams
                    if (n == 3) {
                        $('#game').append($('<div class="diams"></div>').css(pos));
                    }

                    // fantomes
                    if (n == 4) {
                        $('#game').append($('<div class="fantome f' + fId + ' "></div>').css(pos));
                        // array des fantomes
                        fantomes.push({
                            id: fId,
                            position: [x * tailleCase, y * tailleCase],
                            direction: 's'
                        });
                        fId++; // incrémente le compteur pr les ID de fantomes
                    }

                    // Pac
                    if (n == 5) {
                        $('#game').append($('<div id="pac"></div>').css(pos));
                        pac.position = [x * tailleCase, y * tailleCase];
                        pac.positionDepart = [x * tailleCase, y * tailleCase];
                    }
                }
            }


            setInterval( function() {

                if (pause) return;

                if (surCase(pac.position)) {

                    var casesLibres = checkCases(pac.position);

                    if (casesLibres.includes(pac.nextDirection)) {
                        pac.direction = pac.nextDirection;
                        pac.nextDirection = 's';

                        // Pour changer la direction (sprite)
                        $('#pac').css({ backgroundPositionY: bg[ pac.direction ]});
                    } else if (!casesLibres.includes(pac.direction)) {
                        pac.direction = 's';
                    }
                }

                if ( pac.nextDirection == directionsInverses[ pac.direction ]) {

                    pac.direction = pac.nextDirection;
                    $('#pac').css( { backgroundPositionY: bg[ pac.direction ] } );
                    pac.nextDirection = 's';
                }

                // On calcule la distance parcourue en pixels
                pac.position[0] += directions[ pac.direction ][ 0 ] * speedP;
                pac.position[1] += directions[ pac.direction ][ 1 ] * speedP;

                move( $('#pac') , pac.position );

            }, 1000 / fps);
        }

        function move(elm, pos) {
            var x = pos[0];
            var y = pos[1];

            elm.css({
                left: x,
                top: y
            });
        }

    </script>
</body>
</html>