Article original : Learn Google Apps Script Basics by Building a Tic Tac Toe Game
Google Sheets est puissant, et Apps Script le rend encore plus polyvalent et utile.
Oui, vous pouvez les utiliser pour des tableaux de bord financiers, des budgets personnels et la gestion de projet (et nous aborderons ces sujets dans de futurs articles). Mais dans cet article, je vais passer en revue les bases d'Apps Script en créant un plateau de jeu de Morpion simple et jouable.
Voici le lien vers la feuille de calcul que nous allons créer si vous souhaitez la consulter pendant que vous suivez les instructions :
Vidéo de démonstration disponible
Si vous souhaitez consulter une vidéo de démonstration de la feuille Google, la voici :
Installation du projet
Créez une nouvelle feuille Google en allant dans votre Google Drive et en sélectionnant NOUVEAU -> Google Sheet ou en tapant simplement sheets.new dans la barre d'URL de votre navigateur.
Puisque c'est un plateau de jeu, nous allons lui donner un peu de formatage pour qu'il soit beau, ajouter une validation des données et une mise en forme conditionnelle pour ajouter de la fonctionnalité au jeu, et créer des boutons utilisables pour notre tableau de scores.
Voici ce que nous allons obtenir :
Supprimons les lignes de grille, ajoutons des bordures au plateau de jeu et au tableau de scores, et définissons une police alternative pour le plateau.
Pour supprimer les lignes de grille, sélectionnez Affichage -> Afficher -> Lignes de grille pour décocher cette option.
Pour obtenir une grille carrée agréable avec de grands X et O, j'ai défini la hauteur des lignes et la largeur des colonnes des lignes 2 à 4 et des colonnes B à D en les surlignant, en cliquant avec le bouton droit et en sélectionnant les options de redimensionnement.
J'ai choisi 150 pixels pour la hauteur et la largeur. Vous devrez faire cela séparément – vous ne pouvez pas changer à la fois la hauteur des lignes et la largeur des colonnes en même temps.
Pour la taille de la police du plateau, sélectionnez 100, et pour la police, j'utilise Lexend. Vous pouvez ajouter des polices Google supplémentaires à partir du menu déroulant de la barre d'outils :
Ajoutez une bordure au plateau et aux zones du tableau de scores en surlignant les cellules, puis en sélectionnant les options de bordure dans la barre d'outils.
Cliquez et faites glisser sur les cellules pour sélectionner toute la plage, et maintenez le bouton CTRL enfoncé pour cliquer et faire glisser une deuxième zone. Vous pouvez styliser ces zones en même temps.
Validation des données
Surlignez le plateau de jeu (B2:D4) et sélectionnez Données -> Validation des données dans le menu.
Cela nous permet de sélectionner Liste déroulante comme critère et d'ajouter X et O comme les deux options à sélectionner.
Ensuite, cliquez sur Options avancées et sélectionnez Rejeter la saisie si les données sont invalides, et texte brut pour le style d'affichage. Cela gardera les puces et les poignées de la liste déroulante de ne pas encombrer le plateau de jeu.
Mise en forme conditionnelle
Nous utiliserons également la mise en forme conditionnelle pour notre plateau de jeu. Nous devons vérifier toutes les conditions de victoire, et si l'un des joueurs obtient trois cases alignées, nous mettrons en surbrillance ces cellules.
En gardant le plateau de jeu surligné, sélectionnez Format -> Mise en forme conditionnelle.
Il y a huit conditions que nous vérifierons pour trois cases alignées : trois horizontalement, trois verticalement et deux en diagonale.
Mais nous n'avons besoin d'écrire que quatre formules (deux pour les diagonales, une pour l'horizontale et une pour la verticale) puisque nous pouvons utiliser des signes dollar ($) pour faire glisser la formule vers le bas et vers la droite pour celles-ci.
Pour les trois cases alignées verticalement :
//Appliquer à la plage B2:D2
=ET($B2=$C2,$B2=$D2,ESTTEXTE($B2))
Pour les trois cases alignées horizontalement :
//Appliquer à la plage B2:D2
=ET(B$2=B$3,B$2=B$4,ESTTEXTE(B$3))
Pour les diagonales, nous devons les définir séparément :
//Appliquer à la plage B2, C3, D4
=ET($B$2=$C$3,$B$2=$D$4,ESTTEXTE($B$2))
//Appliquer à la plage B4, C3, D2
=ET($B$4=$C$3,$B$4=$D$2,ESTTEXTE($B$4))
Nous testons l'égalité de chaque cellule et si il y a quelque chose dans la cellule avec la fonction =ESTTEXTE(). En enveloppant chaque élément dans une fonction =ET(), nous n'appliquerons le formatage que si toutes les conditions sont remplies.
J'ai sélectionné un fond vert pour la mise en forme conditionnelle.
Apps Script
Maintenant, pour la logique du tableau de scores. Ouvrons Apps Script en sélectionnant Extensions -> Apps Script dans le menu :
Nous allons écrire quatre fonctions pour gérer notre logique :
xScore()incrémentera le score de X dans le tableau de scoresoScore()incrémentera le score de O dans le tableau de scoresclearBoard()effacera le plateau mais gardera les scoresreset()effacera le plateau et remettra les scores à zéro
Pour rendre les choses plus lisibles, définissons quelques plages nommées.
Surlignez à nouveau le plateau de jeu et sélectionnez Données -> Plages nommées. Donnez à cette plage le nom Board. Faites de même pour les cellules G4 et H4 pour xScore et oScore, respectivement.
Pour les scores, nous aurons exactement la même fonction pour chacun en utilisant seulement les deux plages différentes : xScore pour X et oScore pour O. Voici à quoi elles ressembleront en utilisant xScore comme exemple :
xScore() & oScore():
function xScore() {
var sheet = SpreadsheetApp.getActive();
var xScore = sheet.getRangeByName('xScore').getValue();
sheet.getRangeByName('xScore').setValue(xScore+1); clearBoard();
}
- Ligne 1 : Cela définit une variable (nous ferons cela dans chaque fonction) pour la feuille de calcul active.
- Ligne 2 : Cela définit une variable pour xScore comme la valeur dans la plage nommée xScore (cellule G4)
- Ligne 3 : Cela définit une nouvelle valeur pour la cellule xScore comme celle qu'elle était plus 1.
- Ligne 4 : Cela exécute la fonction clearBoard() que nous allons écrire ensuite...
clearBoard():
Cela effacera simplement le plateau de jeu mais laissera le tableau de scores intact.
function clearBoard() {
let sheet = SpreadsheetApp.getActive();
let board = sheet.getRangeByName('Board');
board.clearContent();
}
- Ligne 1 : Notre variable sheet à nouveau.
- Ligne 2 : Notre variable board. Cela récupère la plage B2:D4 que nous avons nommée 'Board'
- Ligne 3 : Cette méthode intégrée
clearContent()efface simplement tout dans ces cellules. Très simple.
reset():
Maintenant, nous avons besoin d'une fonction pour remettre le tableau de scores et le plateau de jeu à leur état initial.
function reset() {
let sheet = SpreadsheetApp.getActive();
sheet.getRangeByName('xScore').setValue(0);
sheet.getRangeByName('oScore').setValue(0); clearBoard();
}
- Ligne 1 : notre feuille active
- Ligne 2 : nous récupérons notre plage xScore et définissons sa valeur à 0.
- Ligne 3 : nous faisons de même pour notre oScore
- Ligne 4 : nous exécutons la fonction reset pour gérer le plateau de jeu.
Et c'est tout ! Maintenant, nous pouvons exécuter l'une de ces fonctions depuis l'éditeur Apps Script et voir qu'elles fonctionnent.
Comment créer des boutons
Il serait beaucoup plus agréable d'avoir des boutons dans notre feuille de calcul réelle pour pouvoir exécuter les fonctions.
Pour ce faire, nous allons dessiner un bouton puis lui assigner un script.
Sélectionnez Insertion -> Dessin dans le menu.
Vous pouvez dessiner ce que vous voulez, mais j'ai choisi le rectangle arrondi de base.
Double-cliquez dans la forme pour ajouter du texte, et redimensionnez, recolorez, restylez selon vos besoins.
Une fois que vous avez créé votre bouton, cliquez sur Enregistrer et Fermer. Ensuite, redimensionnez et positionnez-le où vous le souhaitez dans la feuille Google. J'ai mis le mien juste sous le tableau de scores, et j'en ai fait un pour chaque score ainsi qu'un bouton de réinitialisation.
Enfin, pour faire fonctionner le bouton, cliquez sur les trois petits points en haut à droite du bouton et sélectionnez assigner un script. Ensuite, tapez le nom du script (sans les parenthèses).
Maintenant, tout ce que vous avez à faire est de cliquer sur l'un des boutons et le script assigné s'exécutera 🔥.
Deux notes :
- La première fois que vous exécutez un script, une boîte de dialogue contextuelle apparaîtra vous demandant d'accepter les autorisations de sécurité. C'est un filet de sécurité pour vous assurer que vous savez que vous exécutez le code qui est écrit dans Apps Script, et pour l'examiner si vous ne l'avez pas écrit. Vous devrez cliquer à travers celles-ci et accepter le risque pour permettre son exécution.
- Si vous devez déplacer un bouton après avoir assigné le script, vous pourriez être frustré lorsque le clic ne fait pas apparaître les trois points pour le menu et exécute uniquement le script. Pour contourner cela et permettre le déplacement et le menu à trois points, cliquez avec le bouton droit sur le bouton.
Conclusion
J'espère que cela a été utile pour vous !
Veuillez vous abonner à ma chaîne YouTube ici pour plus de contenu comme celui-ci.
Passez une excellente journée !