Développer un Démineur en Javascript - Partie 1
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émineur
</h1>
<div>
</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ê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 !
