Développer un MasterMind en Javascript - Partie 1

Publié par sky

Après vous avoir partager de nombreuses petites astuces de développement, je vous propose, aujourd'hui, de créer un projet complet. En l'occurrence, il s'agit ici d'écrire un MasterMind, le célèbre jeu de réflexion.

Le projet utilisera les technologies du web, côté client. Ainsi, cela peut être développé sans nécessiter d'outil, ni l'installation d'un serveur web.

Comme il s'agit de quelque chose qui sera assez long, il sera découpé en plusieurs parties, chacune abordant une partie précise du développement.

Cette première partie sera certainement la moins palpitante, mais elle est essentielle au succès de la réalisation d'un projet : la préparation.

Avant d'attaquer le développement pur et dur, nous allons créer l'interface qui accueillera le jeu. Nous allons faire quelque chose de simple, mais fonctionnel, vous pourrez dans un deuxième temps, faire toutes les améliorations que vous souhaitez dessus.

1/ Création du fichier HTML

Dans un nouveau dossier, que nous appellerons sobrement "MasterMind", nous allons créer un fichier au format texte simple que nous nommerons de manière très originale "MasterMind.htm".

Même s'il s'agit d'un projet personnel, nous allons faire cela proprement.

Nous insérons l'entête

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>MasterMind</title>
</head>
<body>

Puis sautez quelques lignes, pour insérer le pied de page.

</body>

Une fois enregistré, vous pouvez d'ores et déjà ouvrir votre nouveau fichier dans le navigateur internet de votre choix (Safari, Firefox, Chrome, ....). Evitez simplement Internet Explorer ou Edge, car je ne les ai pas testé.

Cela devrait vous afficher une belle page toute blanche.

L'interface sera simple, un titre, et puis comme il s'agit d'un jeu tout en long, nous allons faire 2 colonnes, une première qui affichera le jeu, et la seconde les résultats, ainsi que le ou les boutons d'action.

Entre les deux balises "body", insérez

    <div class="page">
        <h1>
            MasterMind
        </h1>
        <div>
          &nbsp;
        </div>
        <div class="game">
            
        </div>
        <div class="options">
            <div id="result" class="result">

            </div>
            <div class="menus">
            
            </div>
        </div>
    </div>

Si vous enregistrez et, ouvrez votre HTML à nouveau, le titre devrait s'afficher.

2/ Création du fichier des styles CSS

Pour rendre un peu plus joli notre page, nous allons lui attacher une feuille de style CSS. Pour cela, créons un nouveau fichier texte, que nous nommerons, je vous le donne dans le mille, "MasterMind.css".

Dans ce fichier nous allons insérer les éléments de base pour une page web, ainsi que le design de notre titre, pour vérifier que tout fonctionne. Nous allons aussi mettre une belle marge à notre page pour éviter que tout soit collé au bord de notre fenêtre de navigateur.

/* base */
* {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;}

Pour lier cette feuille de styles à notre page HTML, nous devons modifier cette dernière et indiquer dans l'en-tête l'adresse de notre feuille de style.

Entre les balises "head", sous la balise titre, ajoutez la balise suivante

<link href="MasterMind.css" type="text/css" rel="stylesheet" />

Enregistrez, et recharger la page sur votre navigateur, si tout a été bien fait, votre titre devrait être désormais en bleu.

A très vite pour la suite.

Sommaire de la série

Admin/Dev