Coding Club Paris (Epitech) : mon premier "morpion" en javascript

Bien le bonjour à tous et toutes ! 🙂

Vu que j'aime pas laisser mon bébé Custom Protocol sans lui donner au moins une petite news quotidienne dont il raffole tant, je vais aujourd'hui vous faire part de mon expérience au Coding Club d'Epitech. Tout d'abord, qu'est-ce qu'Epitech ?

Epitech est une école d'informatique créée en 1999 qui forme en 5 ans après-bac des experts du secteur. Elle permet de transformer une passion en expertise via une pédagogie résolument innovante, organisée par projets. Elle est présente dans 12 villes de France et à Dakar (Sénégal) et bientôt à Beijing (Chine). Epitech délivre un titre d'Expert en Technologies de l'Information (Bac+5), homologué Niveau 1 par l’État au niveau de la Commission Nationale de la Certification Professionnelle (CNCP).

Et... qu'est-ce que le Coding Club ?

Le Coding Club est un atelier récurrent qui permet de vous initier à la programmation et au développement. Que ce soit par exemple le développement de jeux vidéo et bien d'autres activités ! Il est disponible dans toutes les écoles Epitech de France ! Les ateliers d'apprentissage (stages durant les vacances, sessions le mercredi ou le samedi) sont animés par des étudiants d'Epitech.

Image d'illustration du Coding Club — Image d'illustration du **Coding Club**

Maintenant que vous voyez à peu près l'utilité du Coding Club, revenons à nos moutons. Je suis un piètre descripteur (ça se dit ? o_O), mais en un mot, je dirais que c'était zénial. L'ambiance était plutôt "détendue" et "cool" - contrairement à ce à quoi je m'attendais -, les conseillers techniques sympathiques et à l'écoute de chacun d'entre nous, les locaux assez bien entretenus et design (on notera la pelouse "inversée" avant de rentrer dans la cafét' qui se trouve... au plafond), et enfin le self était carrément meilleur qu'à mon lycée (je ne citerai pas de nom :P).

On a pu visiter lundi matin le Innovation Hub, que j'avais déjà entrevu durant les portes ouvertes de la même école, dans sa quasi-intégralité tout en parlant avec les étudiants qui s'y trouvaient, et dont le centre d'intérêt différait toujours (un coup c'était l'intelligence artificielle, l'autre la manipulation des Google Glass ou autres Oculus Rift, tandis que le suivant était à fond sur le portage de Jubeat avec un clavier personnalisé et physique, etc.).

Le Jubeat du futur by Epitech — Le *Jubeat* du futur by **Epitech**

Ensuite, du lundi après-midi jusqu'à mardi 17h, on n'a pas arrêté d'essayer de coder un putain de morpion en javascript. Et croyez-moi, quand on n'y connait mais alors que dalle en javascript, c'est chaud. D: Autant la partie HTML/CSS se bouclait en 1 heure, autant javascript... Bref, ça m'a bien pris la tête plusieurs heures. Mais en restant motivé et confiant, j'ai pu comprendre mes erreurs, les corriger, refaire des erreurs, les re-comprendre, les re-corriger, etc. Jusqu'à arriver à un jeu assez stable.

Et là, stupéfaction : je vois que je suis l'un des seuls à avoir terminé ! :O Un conseiller technique me propose du coup, à défaut de réaliser une intelligence artificielle faute de temps, de créer un petit sélecteur de ~~personnages~~ poneys (faut croire que la majorité des étudiants d'Epitech vouent un culte à My Little Pony) afin que les 2 joueurs puissent choisir leur héros préféré (ou héroïne, j'en sais rien). J'accepte le défi, et arrive à terminer à 17h pile mon pitit morpion. Ça peut paraître de la merde, mais je me sentais fier. 😎 Et les bravo des étudiants n'ont fait qu'atténuer cette petite fierté.

Screenshot de on morpion... :') — Screenshot de mon morpion... :')

Mon mini-morpion est donc disponible à cette adresse, mais comme vous le remarquerez certainement très rapidement, il y a un problème d'optimisation et de chargement (même sur Custom Protocol en fait) dû au fait que votre navigateur doit charger l'image de fond qui est assez lourde ainsi que la police. Je vous suggère donc de télécharger l'archive de mon jeu de 1.37 mb à cette adresse (suffit d'extraire toussa et de glisser-déposer le fichier index.html sur votre navigateur), et si vous le souhaitez de voir son code source (critiques désagréables s'abstenir :o).

Bref, très content de ce petit "séjour" à Epitech, je pense et j'espère continuer un peu le javascript dans mon coin pour, par exemple, améliorer Custom Protocol et lui rajouter des fonctionnalités exclusives plus tard ! 🙂

index.html

Voici la partie HTML de mon morpion :

<!DOCTYPE html>
<html>
<meta charset="UTF-8"></meta>
<head>
	<title>Morpion by Wirus</title>
	<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
 
<body>
	<div id="logo"><img src="img/logo-epitech-header.png"></div>
 
	<div id="selecteur">
		<button></button>
		<button></button>
		<button></button>
		<button></button>
		<button></button>
		<button></button>
	</div>
 
	<div id="game">
		<div>
			<button></button>
			<button></button>
			<button></button>
		</div>
 
		<div>
			<button></button>
			<button></button>
			<button></button>
		</div>
 
		<div>
			<button></button>
			<button></button>
			<button></button>
		</div>
	</div>
 
	<div id="gameStatus">
	</div>
 
	<div id="finwall">
	</div>
 
	<div id="credits">
		<p>POWERED BY</p>
		<a href="https://www.customprotocol.com/"><img src="https://www.customprotocol.com/medias/2015/01/CTP-logo-horizontal-by-Windvern-petit.png"></a>
	</div>
 
	<script src="Morpion.js" type="text/javascript"></script>
</body>
</html>

style.css

Voici la partie CSS de mon morpion :

@font-face {
   font-family: 'Roboto';
   src: url('Roboto-Medium.ttf');
}
 
body {
    background: url('img/wall.jpg') no-repeat -180px -100px;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
}
 
#logo {
	text-align: center;
}
 
#game {
	width: 350px;
	height: 350px;
	margin: 22px auto 22px auto;
	background: rgb(18, 132, 220);
	padding: 10px;
	border-radius: 5px;
}
 
#game button {
	width: 102px;
	height: 102px;
	float: left;
	margin: 7px;
	background: ;
}
 
#game div {
        width: 350px;
        text-align: center;
}
 
#gameStatus {
	width: 360px;
	height: auto;
	background: rgb(18, 132, 220);
	border-radius: 5px;
	margin: auto;
	padding: 5px;
	color: #DDD;
	text-align: center;
}
 
#gameStatus a {
	color: rgb(200, 200, 0);
	font-weight: bold;
}
 
#gameStatus img {
	width: 20px;
	height: auto;
}
 
@media screen and (min-height: 700px) {
 
#credits {
	background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.5);
	width: 100%;
	height: 100px;
	position: absolute;
	bottom: 0px;
	left: 0px;
	text-align: right;
}
 
#credits p {
	margin: 15px 22px 10px 0px;
}
 
#credits img {
	width: 150px;
	margin: -5px 5px 0px 0px;
}
 
}
 
@media screen and (max-height: 700px) {
	#credits {display: none;}
}
 
#selecteur {
	width: 350px;
	height: 240px;
	margin: 22px auto 22px auto;
	background: rgb(18, 132, 220);
	padding: 10px;
	border-radius: 5px;
}
 
#selecteur button {
	width: 102px;
	height: 102px;
	float: left;
	margin: 7px;
	font-size: 12px;
	background: ;
}
#selecteur img {
	display: block;
	margin: auto;
}

Morpion.js

Voici la partie JavaScript de mon morpion :

function modifyStatut(element, message) {
	element.innerHTML = message;
}
 
function isValid(valeur) {
	return valeur.innerHTML == 0;
}
 
function setSymbole(bouton, joueur) {
	bouton.innerHTML = joueur;
}
 
function searchWinner(pions, gamers, currentTurn) {
	if (pions[0].innerHTML == gamers[currentTurn] &&
		pions[1].innerHTML == gamers[currentTurn] &&
		pions[2].innerHTML == gamers[currentTurn])
	return true;
 
	if (pions[3].innerHTML == gamers[currentTurn] &&
		pions[4].innerHTML == gamers[currentTurn] &&
		pions[5].innerHTML == gamers[currentTurn])
	return true;
 
	if (pions[6].innerHTML == gamers[currentTurn] &&
		pions[7].innerHTML == gamers[currentTurn] &&
		pions[8].innerHTML == gamers[currentTurn])
	return true;
 
	if (pions[0].innerHTML == gamers[currentTurn] &&
		pions[3].innerHTML == gamers[currentTurn] &&
		pions[6].innerHTML == gamers[currentTurn])
	return true;
 
	if (pions[1].innerHTML == gamers[currentTurn] &&
		pions[4].innerHTML == gamers[currentTurn] &&
		pions[7].innerHTML == gamers[currentTurn])
	return true;
 
	if (pions[2].innerHTML == gamers[currentTurn] &&
		pions[5].innerHTML == gamers[currentTurn] &&
		pions[8].innerHTML == gamers[currentTurn])
	return true;
 
	if (pions[0].innerHTML == gamers[currentTurn] &&
		pions[4].innerHTML == gamers[currentTurn] &&
		pions[8].innerHTML == gamers[currentTurn])
	return true;
 
	if (pions[2].innerHTML == gamers[currentTurn] &&
		pions[4].innerHTML == gamers[currentTurn] &&
		pions[6].innerHTML == gamers[currentTurn])
	return true;
}
 
function matchNul(pions, gamers, currentTurn) {
	for (var i = 0, len = pions.length; i < len; i++) {
		if (pions[i].innerHTML == 0)
		return false
	}
	return true
}
 
function main() {
	var currentTurn = Math.floor((Math.random())),
		isGameOver = false,
		afficheur = document.querySelector("#gameStatus"),
        pions = document.querySelectorAll("#game button");
        modifyStatut(afficheur, "Le jeu peut démarrer.<br/>Joueur " + gamers[currentTurn] + " ("+ gamersnom[currentTurn] +"), &#224; vous de jouer...");
       
	for (var i = 0, len = pions.length; i < len; i++) {
		pions[i].addEventListener("click", function() {
			if (isGameOver)
				return;
 
			if (isValid(this)) {
				setSymbole(this, gamers[currentTurn]);
				if (searchWinner(pions, gamers, currentTurn)) {
					modifyStatut(afficheur, "Le joueur " + gamers[currentTurn] + " ("+ gamersnom[currentTurn] +") a gagné ! :D<br /><a href=\"index.html\">Rejouer ?</a>");
					isGameOver = true;
				} else if (matchNul(pions, gamers, currentTurn)) {
					modifyStatut(afficheur, "Match Nul ! :O<br /><a href=\"index.html\">Rejouer ?</a>");
					isGameOver = true;
				} else {
					currentTurn++;
					currentTurn = currentTurn % 2;
					modifyStatut(afficheur, "Joueur " + gamers[currentTurn] + " ("+ gamersnom[currentTurn] +"), c'est &#224; votre tour !");
				}
			} else {             
			modifyStatut(afficheur, "Quelqu'un a déjà joué ici !");
			}
		});
	}
}
 
function SelectVerif() {
	if (this.innerHTML.split(">")[1] != gamersnom[currentSelection - 1]) {
		gamersnom[currentSelection] = this.innerHTML.split(">")[1];
		gamers[currentSelection] = this.innerHTML.split(">")[0] + ">";
		alert("Joueur " + (currentSelection + 1) + ", vous avez choisi " + gamersnom[currentSelection]);
		currentSelection++;
		modifyStatut(document.querySelector("#gameStatus"), "Joueur 2, choisissez votre poney préféré ! :)");
		if (currentSelection > 1) {
			demarrer = true;
			document.querySelector("#game").style.display = "";
			document.querySelector("#selecteur").style.display = "none";
			main();
        }
	}
}
 
function selecteur() {
	var afficheur = document.querySelector("#gameStatus"),
		poneys = document.querySelectorAll("#selecteur button"),
		images = ['<img src="img/ts.gif">', '<img src="img/rd.gif">', '<img src="img/aj.gif">', '<img src="img/pp.gif">', '<img src="img/r.gif">', '<img src="img/f.gif">'],
		noms = ['Twilight Sparkle', 'Rainbow Dash', 'Applejack', 'Pinkie Pie', 'Rarity', 'Fluttershy'];
	document.querySelector("#game").style.display = "none";
	modifyStatut(afficheur, "Joueur " + (currentSelection + 1) + ", choisissez votre poney préféré ! :)");
	
	for (var i = 0, len = poneys.length; i < len; i++) {
		poneys[i].innerHTML = images[i] + noms[i];
		poneys[i].addEventListener("click", SelectVerif);
	}
}
 
var currentSelection = 0,
	gamers = ['', ''],
	gamersnom = ['', ''];
 
selecteur();

Étiquettes Morpion

Catégories (programmation)Code Source Test javascript

Coding Club Paris (Epitech) : mon premier “morpion” en javascript

Wirus

2 commentaires

Annuler la réponse

[GekiHEN] [Vita] GekiHEN : Le concours de homebrews est lancé

[Vita] Ouverture de KyûHEN, le nouveau concours de homebrews

[PSP] [Vita] Une quatrième version pour le ONELua

Sujets récents du forum

Aucun sujet récent

Partenaires

Catégories

Archives

Top articles

[Vita] Ouverture de KyûHEN, le nouveau concours de homebrews

[PSP] Débricker une PSP 2000/3000 est désormais possible avec Baryon Sweeper !

[PS4] TUTO - Hacker / Jailbreaker sa PS4 en 6.72

[PS4] Le point sur le fameux jailbreak pour 6.72 / 7.02

[Vita] La team CBPS dévoile dans une vidéo une flopée de nouveaux projets

[Switch] Les pré-commandes des nouveaux SX Core et SX Lite sont ouvertes

[Switch] SX Core & SX Lite : retard à prévoir mais phase de test lancée

[3DS] TUTO - Installer et jouer à des backups « .CIA » via FBI

[PSP] Joyeux anniversaire à la PSP, qui fête ses 15 ans !

Custom Protocol est de retour !

Partenaires

Catégories

Archives

Coding Club Paris (Epitech) : mon premier “morpion” en javascript

Wirus

2 commentaires

Vous pourriez également aimer...

Sujets récents du forum

Aucun sujet récent

Partenaires

Catégories

Archives

Top articles

Partenaires

Catégories

Archives