Un jeu de morpion en HTML 5

Magazine
Marque
Linux Pratique
HS n°
Numéro
25
Mois de parution
novembre 2012
Spécialité(s)


Résumé
Le jeu du morpion ou Tic-tac-toe est un jeu fort simple comportant un damier de trois fois trois cases et cinq pions par joueur. Le but est d'être le premier à parvenir à aligner trois pions en ligne, colonne ou diagonale. Ne présentant aucune difficulté particulière, ce jeu est particulièrement adapté à la mise en place des différentes techniques que nous avons pu voir tout au long de ce hors-série.

Pour coder ce jeu de Tic-tac-toe, même si les règles sont très simples, il faut d'abord avoir une idée globale de ce à quoi nous voulons arriver. Un schéma réalisé rapidement à l'aide de Pencil [1] nous permet d'avoir une vision des différents objets qui seront présents sur notre page (voir figure 1).

tictactoe_figure_1

Fig. 1 : Schéma représentant l'affichage souhaité pour notre jeu

Effectuons une liste des principales parties que l'on peut dégager pour réaliser notre jeu et les technologies que nous emploierons :

- Affichage de messages en utilisant une police externe : @font-face ;

- Affichage des pions : sprites CSS ;

- Déplacement des pions : drag and drop ;

- Émission d'un son lors de la prise et du positionnement d'un pion, ainsi qu'en cas de victoire ou de défaite : balise <audio> et sprites audio ;

- Sauvegarde du meilleur score : localStorage ;

- Jeu contre l'ordinateur : websockets et socket.IO.

Bien sûr, le fait de coder le jeu de la machine sur un serveur distant n'est pas...

Cet article est réservé aux abonnés. Il vous reste 97% à découvrir.
S'abonner à Connect
  • Accédez à tous les contenus de Connect en illimité
  • Découvrez chaque semaine un nouvel article premium
  • Consultez les nouveaux articles en avant-première
Je m'abonne


Article rédigé par

Par le(s) même(s) auteur(s)

Des outils simples de prototypage et de schématisation

Magazine
Marque
GNU/Linux Magazine
Numéro
251
Mois de parution
septembre 2021
Spécialité(s)
Résumé

Il n’est pas rare de devoir présenter rapidement des informations sous forme graphique, que ce soit dans le cadre d’une interface pour une application ou d’un schéma permettant de simplifier un concept. Dans cet article, je vous propose de découvrir quelques outils fort pratiques.

Édito

Magazine
Marque
GNU/Linux Magazine
HS n°
Numéro
116
Mois de parution
septembre 2021
Résumé

Qui n’a jamais été confronté à des mises à jour silencieuses ? Si l’on ne prend pas garde à la configuration du système sur lequel on déploie une application ou plus simplement si l’on comment l’erreur d’utiliser une librairie en ligne, il est possible que du jour au lendemain votre application cesse de fonctionner. Dans ce cas-là, la logique veut que l’on s’interroge sur le cas particulier qui n’aurait pas été traité et qui aurait fait dérailler le programme.

Les derniers articles Premiums

Les derniers articles Premium

Cryptographie : débuter par la pratique grâce à picoCTF

Magazine
Marque
Contenu Premium
Spécialité(s)
Résumé

L’apprentissage de la cryptographie n’est pas toujours évident lorsqu’on souhaite le faire par la pratique. Lorsque l’on débute, il existe cependant des challenges accessibles qui permettent de découvrir ce monde passionnant sans avoir de connaissances mathématiques approfondies en la matière. C’est le cas de picoCTF, qui propose une série d’épreuves en cryptographie avec une difficulté progressive et à destination des débutants !

Game & Watch : utilisons judicieusement la mémoire

Magazine
Marque
Contenu Premium
Spécialité(s)
Résumé

Au terme de l'article précédent [1] concernant la transformation de la console Nintendo Game & Watch en plateforme de développement, nous nous sommes heurtés à un problème : les 128 Ko de flash intégrés au microcontrôleur STM32 sont une ressource précieuse, car en quantité réduite. Mais heureusement pour nous, le STM32H7B0 dispose d'une mémoire vive de taille conséquente (~ 1,2 Mo) et se trouve être connecté à une flash externe QSPI offrant autant d'espace. Pour pouvoir développer des codes plus étoffés, nous devons apprendre à utiliser ces deux ressources.

Raspberry Pi Pico : PIO, DMA et mémoire flash

Magazine
Marque
Contenu Premium
Spécialité(s)
Résumé

Le microcontrôleur RP2040 équipant la Pico est une petite merveille et malgré l'absence de connectivité wifi ou Bluetooth, l'étendue des fonctionnalités intégrées reste très impressionnante. Nous avons abordé le sujet du sous-système PIO dans un précédent article [1], mais celui-ci n'était qu'une découverte de la fonctionnalité. Il est temps à présent de pousser plus loin nos expérimentations en mêlant plusieurs ressources à notre disposition : PIO, DMA et accès à la flash QSPI.

Les listes de lecture

9 article(s) - ajoutée le 01/07/2020
Vous désirez apprendre le langage Python, mais ne savez pas trop par où commencer ? Cette liste de lecture vous permettra de faire vos premiers pas en découvrant l'écosystème de Python et en écrivant de petits scripts.
11 article(s) - ajoutée le 01/07/2020
La base de tout programme effectuant une tâche un tant soit peu complexe est un algorithme, une méthode permettant de manipuler des données pour obtenir un résultat attendu. Dans cette liste, vous pourrez découvrir quelques spécimens d'algorithmes.
10 article(s) - ajoutée le 01/07/2020
À quoi bon se targuer de posséder des pétaoctets de données si l'on est incapable d'analyser ces dernières ? Cette liste vous aidera à "faire parler" vos données.
Voir les 53 listes de lecture

Abonnez-vous maintenant

et profitez de tous les contenus en illimité

Je découvre les offres

Déjà abonné ? Connectez-vous