Dans le dernier article « apprendre à développer en PHP en une nuit », nous vous avons proposé de vous attaquer au développement du jeu Tic Tac Toe, sans vous avoir donné de solution.
Retrouvez un exemple en cliquant sur le lien suivant :
http://tuto.storycom.fr/tictactoe/
Je vous propose de voir ensemble, étape par étape, une solution possible pour la réalisation de ce jeu.
Les outils nécessaires à la réalisation du jeu Tic Tac Toe
Afin de créer ce jeu, nous aurons besoin de manier le HTML le CSS et le PHP.
Nous verrons aujourd’hui comment créer la page HTML et CSS qui va nous permettre d’avoir un visuel pour notre jeu.
Pour cela je recommande d’utiliser un logiciel comme sublime text ou Notepad ++.
Le HTML va permettre de créer la page web et le CSS va permettre de styliser notre contenu. Par exemple, changer la couleur des textes, centrer un titre, etc.
Une page HTML est généralement composée de trois grandes parties : Le header, le container et le footer.
Le header est la partie ou l’on trouve le logo et le menu. Le container est celle où on met le contenu et dans le footer on retrouve généralement le copyright.
Comment créer une page HTML/CSS
La première étape consiste à créer notre page HTML avec les éléments dont nous aurons besoin pour le jeu.
Il y a différentes façons de procéder pour arriver au résultat final. Nous pouvons tout d’abord créer notre page HTML entièrement et ensuite y ajouter le style avec le CSS ou nous pouvons lui ajouter du style au fur et à mesure de la création.
Dans ce tutoriel, nous lui ajouterons du style au fur et à mesure.
La création de la page HTML
Avant toute chose, il faut créer un dossier dans lequel vous allez placer les éléments dont vous avez besoin.
Dans ce dossier, vous allez créer deux nouveaux fichiers (documents texte par exemple) et les renommer.
Le premier fichier doit s’appeler index.html (il est important de modifier l’extension, par exemple si votre document est en « .doc », il faudra remplacer par « .html ») et le deuxième document nous l’appellerons style.css.
Nous pouvons maintenant ouvrir le fichier « index.html » afin de commencer la création de notre page web.
Dans ce fichier nous allons mettre le code suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<meta charset="UTF-8">
<title>Tic Tac Toe</title>
</head>
<body>
</body>
</html>
La balise « < !DOCTYPE html> » indique au navigateur la version du html dans lequel le site est écrit. Ici le site est en HTML5, version actuelle du HTML.
On ouvre ensuite la balise html avec « <html> ». Pour refermer une balise, il suffit de lui ajouter « / » devant. Par exemple :
<html> j’ouvre ma balise html
</html> je ferme ma balise html
Toutes les balises et le contenu devra se trouver entre la balise html
<html> Le contenu de mon site </html>Dans le code ci-dessus, vous pouvez voir « lang= »fr » » dans la balise html. Cela permet d’indiquer la langue.
Ensuite nous ouvrons la balise head qui est différente du header. Dans la balise Head nous mettons les meta et les liens vers les feuilles de style par exemple, alors que le header lui comporte le logo de votre site, le menu, etc.
Dans le code ci-dessous nous pouvons voir quatre éléments dans la balise head :
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<meta charset="UTF-8">
<title>Tic Tac Toe</title>
</head>Tout d’abord nous avons le lien vers la feuille de style qui se trouve dans la balise link (cette balise ne nécessite pas d’être refermée).
<link rel="stylesheet" type="text/css" href="style.css">rel=”stylesheet” dit que c’est une feuille de style. Le type indique que c’est du CSS et le href est le lien vers votre feuille de style.
Nous avons également lié une font (police) directement depuis Google font avec la ligne suivante :
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">Il faut ensuite indiquer la meta charset qui va définir le type d’encodage des caractères, ce qui va éviter d’avoir des caractères bizarres à la place des accents.
<meta charset="UTF-8">Pour finir vous donnez un titre à votre site dans la balise « <title> » de la manière qui suit :
<title>Tic Tac Toe</title>Une fois ces lignes inscrites dans votre html, vous pouvez passer au body, qui est le corps de votre page web. Dans celle-ci vous mettrez tout votre contenu. Comme montré plus haut, on ouvre le body « <body> » après la fermeture de « </head> » et on ferme le body avant la fermeture du html.
</head>
<body>
</body>
</html>La création du header
Maintenant que nous avons notre page html, nous pouvons commencer la création du header. Dans l’exemple d’aujourd’hui le header sera composé seulement du nom du jeu et d’un petit paragraphe.
Nous allons donc ouvrir une balise header dans la balise body.
<body>
<header>
</header>
</body>Dans cette balise nous allons insérer deux autres balises. Le nom du jeu, dans une balise h1 qui est une balise de titre (les balises de titre vont de h1 à h6) et la balise p qui est un paragraphe.
<header>
<h1>Tic Tac Toe</h1>
<p>Ceci est un jeu multi joueurs sans intelligence artificielle réalisé par StoryCom dans un but d’<span>exercice</span> pour un <span>tutoriel de développement PHP</span> et de création d’une page en <span>HTML/CSS</span>.</p>
</header>Dans la balise « p » vous pouvez voir des balises « span » qui vont nous permettre de mettre en avant du texte et de lui ajouter un style particulier.
Pour faire une coupure entre le header et le container, nous avons ajouté une balise hr après la fermeture de la balise header. Cette balise ne nécessite pas d’être refermée.
</header>
<hr>Comment styliser ma page html
Maintenant que nous avons créé la page html et le header, nous allons lui ajouter du style. Tout à l’heure je vous ai fait créer un fichier appelé « style.css ». Avec notepad++ ou sublime text (ou tout autre logiciel que vous utilisez) vous allez ouvrir ce fichier.
Tout d’abord nous allons ajouter du style sur le body. Nous allons lui dire quel font (police) est utilisée sur notre page HTML et lui indiquer que notre page ne possède aucune marge.
body {
font-family: 'Lato', sans-serif;
margin:0;
}Pour ajouter du style, il vous suffit de sélectionner l’élément auquel vous voulez ajouter le style, ici c’est le body, d’ouvrir les accolades « {…} » et de lui indiquer le style entre les accolades.
Dans l’exemple nous indiquons que le body utilise la police « Lato » et qu’il possède une marge à 0. À la fin de chaque ligne de code, il est très important de mettre le point-virgule. Si vous ne le mettez pas, votre ligne de code ne sera pas prise en compte.
Ensuite, nous allons ajouter le style au reste des éléments de notre header :
/*header*/ (quand du texte est inséré entre « /* et */ » il s’agit d’un commentaire)
header {
max-width: 1140px; // Indique la taille maximale du header
margin:auto; // Indique que le header à des marges automatiques
}
header h1 {
font-size: 45px; // Indique la taille de la police
padding-top: 1em; // Ajoute une marge interne au-dessus du titre
color: #b1b1b1; // Indique la couleur du titre
border-bottom: 1px solid #c7c7c7; // Indique que le titre a une bordure au-dessous
width: 20%; // Indique la taille du titre par rapport à la taille du header
margin: auto; // Indique que le titre a des marges automatiques
margin-bottom: 1em; // Ajoute une marge en dessous du titre
}
header p {
font-size: 20px; // Indique la taille de la police du paragraphe
padding-bottom: 2em; // Ajoute une marge interne au-dessous du paragraphe
text-transform: uppercase; // Indique que le paragraphe est en majuscule
text-align: center; // Centre le paragraphe
color:#b1b1b1; // Indique la couleur du paragraphe
}
header p span {
color:#00aeef; // Indique la couleur des span
}
/*fin header*/Maintenant que nous avons le header, nous pouvons passer à la création du container.
La création du container
Pour jouer au Tic Tac Toe, nous avons besoin d’un tableau à neuf cases pour le jeu, un tableau de score et un bouton de réinitialisation de la partie en cours.
Pour ce faire, nous allons d’abord créer notre section container après le hr.
<hr>
<section>Le fait de donner une classe à une balise permet de la sélectionner plus facilement et plus précisément.
Dans notre container nous allons créer notre tableau :
<section>
<p>Le joueur 1 doit jouer</p>
<div> // le tableau est entouré d’une div
<table> // ouverture du tableau
<tr> // ceci est une ligne du tableau
<th><a href=""></a></th> // ceci une case
<th><a href=""></a></th>
<th><a href=""></a></th>
</tr>
<tr>
<td><a href=""></a></td>
<td><a href=""></a></td>
<td><a href=""></a></td>
</tr>
<tr>
<td><a href=""></a></td>
<td><a href=""></a></td>
<td><a href=""></a></td>
</tr>
</table> // fermeture du tableau
</div>Il faut également créer une div pour le score juste après la fermeture de la div du tableau.
</div> // fermeture de la div du tableau
<div> // Ouverture de la div pour le score
<h1>Score</h1>
<p>Joueur 1 (croix) :</p>
<p>Joueur 2 (rond) : </p>
</div> // fermeture de la div pour le scoreEt pour finir il nous faudra une dernière div pour réinitialiser la partie :
</div> // fermeture de la div score
<div> // ouverture de la div reset
<a href="">Réinitialiser la partie</a> // ceci est un lien
</div> // fermeture de la div score
</section> // fermeture de la section container
<hr> // hr de séparation comme pour le headerVous pouvez maintenant appliquer le style sur la section container. Pour cela il suffit de retourner sur votre fichier style.css et d’ajouter le style :
/*fin header*/
/*container*/
.container{
max-width: 1140px; // Définit la taille maximale du container
margin:auto;
margin-top: 4.5em;
}
.container>p{
text-align: center; // centre du texte
margin-bottom: 3em;
color: #91dc5a;
text-transform: uppercase;
font-size: 25px;
}
.tg-wrap {
display: inline-block; // permet d’aligner des éléments
width: 65% // Définir la taille de la div en fonction de la section container
}
.tg-wrap>table{
border-collapse:collapse;
border-spacing:0;
margin:0px auto;
width: 100%; // définir la largeur
height: 741px; // définir la hauteur
}
.tg-wrap table tr td{
border:2px solid #c7c7c7; // ce sont les bordures des cases
overflow:hidden;
width: 247px;
height: 247px;
}
.tg-wrap table tr th{
border:2px solid #c7c7c7; // ce sont les bordures des cases
overflow:hidden;
word-break:normal;
width:247px;
height:247px;
}
.tg-wrap table tr th a,
.tg-wrap table tr td a{
display: block;
width: 100%;
height: 100%;
}
.score {
display:inline-block;
width: 34%;
margin-left: 0.5em;
vertical-align: top; // aligne les éléments en haut
text-align: center;
}
.score h1{
text-transform: uppercase;
color: #096a8e;
}
.score>p{
font-size: 20px;
text-align: left;
margin-left: 2.5em;
text-transform: uppercase;
color: #989494;
}
.draw{
text-align: center!important;
font-size: 35px!important;
color: #f37777!mportant;
}
.reset{
text-align: center;
margin-top: 3em;
margin-bottom: 3.5em;
}
.reset>a{
text-decoration: none;
color: #6b6868;
border: 1px solid #096a8e;
padding: 10px;
font-size: 20px;
text-transform: uppercase;
transition:all 0.7s;
}
.reset>a:hover{ // le hover se met en fonction lorsque l’on passe la souris sur l’élément
background-color:#096a8e;
color:#fff;
}
/*fin container*/Vous avez maintenant une page HTML contenant un header avec le nom de votre jeu et un paragraphe, et le container avec la grille du jeu et les scores.
Pour finir, nous allons rajouter un footer afin d’y mettre un copyright.
Intégration du footer
Après la fermeture de la section container et le hr, nous allons utiliser la balise footer qui vas nous permettre d’insérer le copyright :
</section> // fermeture de la section container
<hr>
<footer> // ouverture du footer
<p>© StoryCom - Tutoriels | Réalisation d'application :
<a href="https://storycom.fr/">StoryCom</a></p>
</footer> // fermeture du footer
</body> // fermeture du body
</html> // fermeture de la page htmlUne fois que vous avez créé votre footer vous lui ajoutez une balise p pour insérer le copyright et éventuellement un lien vers votre site web.
Pour le footer vous aurez besoin de très peu de style :
/*fin container*/
/*footer*/
footer{
max-width: 1140px;
margin:auto;
text-align: center;
}
footer>p{
color:#989494;
}
footer>p>a{
text-decoration: none;
color:#989494;
}
footer>p>a:hover{
color:#00a651;
}Vous possédez maintenant la page HTML/CSS qui vas vous permettre de jouer au jeu Tic Tac Toe.
L’intégration effectuée ici est non responsive (elle ne s’adapte pas sur tous les supports). Nous verrons dans un prochain tutoriel comment rendre notre page web responsive.
Dans le prochain article, nous verrons ensemble comment développer la partie PHP du jeu afin de le rendre fonctionnel.
