Archives des Test javascript - Custom Protocol https://www.customprotocol.com/programmation-categorie/test-javascript/ Site d'hack-tualité et de tutoriels sur la customisation de consoles et appareils (homebrews, plugins, émulation...) Wed, 22 Apr 2015 07:32:01 +0000 fr-CA hourly 1 Coding Club Paris (Epitech) : mon premier “morpion” en javascript https://www.customprotocol.com/programmation/coding-club-paris-epitech-mon-premier-morpion-en-javascript/ https://www.customprotocol.com/programmation/coding-club-paris-epitech-mon-premier-morpion-en-javascript/#comments Wed, 22 Apr 2015 07:32:01 +0000 https://www.customprotocol.com/?post_type=it_programmation&p=3927 Rien d'extraordinaire me direz-vous... Quoiqu'il en soit, je suis content d'avoir appris un peu de javascript avec le Coding Club d'Epitech à Paris ces 2 derniers jours, j'espère continuer dans cette lancée ! ^^

L’article Coding Club Paris (Epitech) : mon premier “morpion” en javascript est apparu en premier sur Custom Protocol.

]]> 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();

L’article Coding Club Paris (Epitech) : mon premier “morpion” en javascript est apparu en premier sur Custom Protocol.

]]> https://www.customprotocol.com/programmation/coding-club-paris-epitech-mon-premier-morpion-en-javascript/feed/ 2