Admin/Dev

11
Mars
2019

Développer un Démineur en Javascript - Partie 1

Publié par sky

Après avoir développer un MasterMind et repris les bases de la programmation avec deux nouveaux articles explicatifs, pourquoi ne pas commencer le développement d'un nouveau jeu ?

Nous allons donc, à travers cette série d'article, voir comment on peut créer un démineur de 0. Pourquoi le démineur ? Pour deux excellentes raisons, premièrement, il s'agit d'un classique sur ordinateur, même si le démineur était plutôt présent sur Windows, et absent du Mac. La seconde est que, comme le MasterMind, vous allez voir que c'est un programme qui n'est pas très long, ni difficile à écrire.

Afin d'optimiser notre travail sur ce programme, nous allons utiliser l'expérience acquise, et le travail déjà fait sur le MasterMind. Nous allons donc repartir de la même base, afin de gagner du temps.

Le démineur est un classique, nul besoin de le présenter ou de définir nos besoins pour ce programme. Nous sommes partis pour faire une simple reproduction du jeu. Cependant, nous allons conserver les 4 niveaux de difficultés introduits avec le dernier article sur le MasterMind car cela apporte un petit plus.

D'un point de vue affichage, rien de bien particulier, nous allons quasiment conserver celle du MasterMind car la structure peut être quasi identique. A savoir, un terrain de jeu, une zone d'affichage pour le résultat de fin de partie, et enfin une zone avec les boutons. Les styles CSS qui iront avec seront, eux aussi directement repris, et modifiés dans un second temps pour les spécificités de ce jeu.

Enfin, le moteur Javascript de notre jeu va reprendre le structure créée pour le MasterMind, car je trouve qu'elle fonctionne plutôt bien. Evidemment, les fonctions seront entièrement ré-écrites pour correspondre au programme que nous souhaitons créer. C'est évidemment la partie la plus intéressante de notre nouvelle série d'articles.

Pour commencer, créons un dossier, que j'ai nommé MineSweeper, démineur en anglais. Puis dans un nouveau fichier appelé MineSweeper.html, nous allons écrire la page HTML de notre jeu. Notre expérience nous permet désormais de l'écrire en intégralité, car il est aisé de déterminer nos besoins.

<!DOCTYPE html>
<html lang="fr">
<head>
<title>MineSweeper</title>
<meta charset="UTF-8" />
<script src="MineSweeper.js"></script>
<script>
    /* on load scripts */
    window.onload = function() {
        MineSweeper.initialise();
    }
</script>
<link href="MineSweeper.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <div class="page">
        <h1>
            D&eacute;mineur
        </h1>
        <div>
          &nbsp;
        </div>
        <div class="game" id="plateau">


        </div>
        <div class="options">

            <div id="result" class="result">

            </div>

            <div class="menus">
                <div class="menu" onclick="MineSweeper.startGame('easy');">
                    Jouer "Facile"
                </div>
                <div class="menu" onclick="MineSweeper.startGame('normal');">
                    Jouer "Normal"
                </div>
                <div class="menu" onclick="MineSweeper.startGame('hard');">
                    Jouer "Difficile"
                </div>
                <div class="menu" onclick="MineSweeper.startGame('extreme');">
                    Jouer "Extr&ecirc;me"
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Maintenant, passons aux styles. Ici aussi, inutile de ré-inventer la roue, profitons de ce qui a déjà été fait. Dans un fichier MineSweeper.css, insérons nos styles de base.

/* global */
* {font-family:Arial, sans-serif; font-size:14px; font-weight:normal; font-style:normal; color:#454550; padding:0; margin:0; box-sizing:border-box;}
body {background:white; margin:100px;}
p {padding:8px 0;}
a { text-decoration:none; color:#ff9600; transition:color 0.3s; }
a:hover {color:#00378B;}
ol { margin:0px 28px; padding:0;}
li { margin:4px 4px 8px; }
b, strong {font-weight:bold;}
i, em {font-style:italic;}
blockquote { margin:8px 20px; }
input, textarea, select { border:none; padding:0; background:#fdea91; color:#5A5A5A; font-weight:bold; font-size:12px; border-radius:4px;}
input, textarea, option { padding:4px 4px; font-weight:bold; color:#5A5A5A; font-size:12px;}
textarea {resize:none;}
.inputs {width:200px;}
.linputs {width:400px;}
.sinputs {width:150px;}
.vsinputs {width:75px;}
.vlinputs {width:100%;}
form {margin:0;}
.img {font-size:0}
sup, sub {font-size:9px; color:inherit;}
img {border:0; max-width:100%; height:auto;}

/* titre */
h1 {font-size:20px; color:#0005c2;}

/* page */
.page {font-size:0;}
.page .game {width:50%; display:inline-block; vertical-align:top;}
.page .options {width:50%; display:inline-block; vertical-align:top;}

/* menu */
.menus .menu {padding:10px 25px; margin:8px; background:#4366b4; color:white; cursor:pointer; width:200px;}

/* result */
.result {text-align:center; font-size:30px;}

Nous reviendrons sur ce fichier lorsque nous aurons débuté la mise en place de notre jeu.

Maintenant, place à la pièce maîtresse, le moteur de notre jeu en javascript. Ecrivons la base de notre moteur dans un fichier nommé MiseSweeper.js.

var MineSweeper = {
name: 'MineSweeper', difficulties: {
easy: {
}, normal: {
}, hard: {
}, extreme: {
},
}, settings: {
}, game: {
}, initialise: function() {
}, startGame: function(difficulty) {
this.settings = this.difficulties[difficulty];
},
}

Et voila, il ne nous reste plus qu'à réfléchir comment décomposer notre jeu, définir quelles sont les actions à reproduire, et éventuellement, comment les reproduire avec du code. Rendez-vous au prochain épisode !

 
Sommaire de la série
 
 
Commentaires
Aucun commentaire pour le moment.

 

Poster un commentaire
En postant sur skymac.org, je m'engage à être courtois et à ce que mon message soit pertinent avec le sujet de l'article.
En outre, j'accepte, sans condition, que mon message soit refusé et supprimé si ces règles ne sont pas appliquées.
Captcha indisponible
Pour valider le formulaire, vous devez confirmer que vous êtes bien une personne. Actuellement, la fonctionnalité est indisponible. Vous devez activer le service ReCaptcha dans le gestionnaire des cookies, et donc consentir à l'utilisation de ses cookies.
Ouvrir le panneau de gestion des cookies
Fermer le panneau
Ce site utilise des cookies pour assurer son bon fonctionnement. Il utilise aussi des cookies issues de services tiers permettant de proposer des fonctionnalités avancées. À tout moment, vous pouvez choisir quels services vous souhaitez activer ou refuser, afin de retirer votre consentement quant à l'utilisation des cookies.
 
Personnalisation des services
Vous êtes libre de choisir quels services vous souhaitez activer. En autorisant ces services tiers, vous acceptez le dépôt et la lecture de cookies et l'utilisation de technologies de suivi nécessaires à leur bon fonctionnement. En retirant votre consentement pour certains de ces services, certaines fonctionnalités du site peuvent ne plus fonctionner.
Navigation du site  En savoir plus
Le site écrit un cookie de session permettant son bon fonctionnement et aidant à la navigation. Il ne peut être désactivé.
Utilisation : 1 cookie, enregistre l'identifiant de la session.
Durée de vie : Le cookie est présent pendant toute la session sur le site. Il devient obsolète après 24 minutes d'inactivité.
Obligatoire
Popup Média
Afficher des vidéos depuis Yoube ou Dailymotion.
ReCaptcha  En savoir plus
Permet de valider que les visiteurs sont bien des humains lorsqu'ils valident des formulaires.
 
Tout accepter Tout refuser Gérer