Archives par mot-clé : javascript

Automatiser le clic sur les fortunes de Cookie Clicker

Publié le par
Répondre

Aujourd’hui, après avoir effectué une ascension sur Cookie Clicker, je me suis dit : “Si je veux débloquer les fortunes (qui apparaissent dans le fil d’actualités), il va falloir encore que je reste attentif devant mon écran…”.

C’est alors que je me suis demandé s’il n’y avait pas moyen d’automatiser cela.

La première étape fut d’analyser le code principal du jeu.

Contrairement à d’autres aspects du jeu (les mini-jeux ou encore les cookies dorés…) le fil d’actualités n’est pas géré par l’intermédiaire de l’objet principal du jeu (Game dans le code du jeu).

Pour arriver à mon but, il faut donc passer par le code HTML du jeu. Un rapide coup d’oeil à ce code me donne l’ID (commentsText1) de la div qui contient la nouvelle affichée.

Avec cet ID je peux maintenant le sélectionner avec document.getElementById().

Continuer la lecture →

Le retour du compteur de caractères

Publié le par
Répondre

Après être revenu dernièrement sur ma série de tutos d’introduction aux canvas, j’ai décidé de m’attaquer à l’un de mes anciens articles me valant le plus d’affichage sur le moteur de recherche d’Alphabet : le compteur de caractères.

Comme pour mes derniers articles traitant de JavaScript, une fois de plus je n’utiliserai que des fonctions natives, sans aucune librairie.

Organisation du nouveau code

Le nouveau code sera réparti dans deux fonctions : une fonction d’initialisation, et la fonction en charge du compte des caractères. Cette dernière fonction étant appelée une fois à l’initialisation, pour pouvoir être utilisable sur une page où les champs de formulaire contiennent déjà du texte (une amélioration par rapport à l’ancien code), et ensuite attachée à un événement sur les champs.

Un des gros changement est la manière dont on va passer les paramètres à notre champ compteur de caractères : au lieu de passer ces paramètres à notre fonction d’initialisation, on va utiliser des attributs HTML.

Continuer la lecture →

Gloubi tuto – menu interactif déroulant

Publié le par
Répondre

Cette semaine, attaquons-nous à un autre script de menu présenté chez notre gloubi adversaire.

Ce script est visible sur cette page, et est toujours fonctionnel dans les navigateurs modernes.

Fonctionnement

Le menu produit par ce script se présente sous la forme d’un tableau dans un tableau (je parle là des balises HTML).

<table>
    <tr>
        <td>Rubrique</td>
    </tr>
    <tr>
        <td>Liens....</td>
    </tr>
    <tr>
        <td>Rubrique</td>
    </tr>
    <tr>
        <td>Liens....</td>
    </tr>
</table>
Continuer la lecture →
Pages : 1 2

Amusons-nous avec les canvas – le retour

Publié le par
Répondre

Il y a quelques années, j’avais écrit une série d’articles expliquant comment créer à l’aide du  tag <canvas> un texte ombré avec une image en fond utilisant une police Google Fonts.

La technique ayant un peu évolué depuis, et ayant fait de nouveaux essais de mon côté, je pense qu’il est temps de créer une nouvelle version de ce code.

Le premier changement concerne la façon dont on gère l’utilisation de la police Google Font dans le canvas.

Dans le premier script, le chargement de la police était assuré de manière “classique” par CSS. Le problème ? Pour que la police soit utilisable dans le canvas, il faut que la police soit utilisée sur au moins un élément de notre page. Et pour s’assurer que la police soit bien chargée, le code qui s’occupe du “dessin” est exécuté après 1s (utilisation d’un setTimeOut()).

Depuis les versions 35 de Chrome et la version 41 de Firefox, toutes deux sorties après la rédaction de la première série d’articles, il existe un objet JavaScript qui permet de définir une police personnalisée, qui par la suite peut être utilisée partout sur le document, y compris dans les canvas.

Continuer la lecture →

Gloubi tuto – un texte en dégradé

Publié le par
Répondre

Pour ce deuxième gloubi tuto, on s’attaque à un script qui a eu son petit succès sur Skyblog : le texte « arc-en-ciel » (en dégradés).

Script original et explication

Pour voir le script original, qui fonctionne encore dans les navigateurs modernes, rendez-vous ici sur le site de notre Némésis dans la deuxième guerre du gloubi.

Le script fonctionne comme suit :

Avant d’appeler la principale fonction de notre script, on construit un tableau de correspondance décimal vers hexadécimal à l’aide de deux boucles imbriquées.

Continuer la lecture →
Pages : 1 2

Gloubi tuto – un menu interactif Hello Kitty

Publié le par
Répondre

Bienvenue sur ce premier gloubi tuto (pour en savoir plus sur les gloubi tutos) qui concerne un menu interactif avec Hello Kitty.

Présentation et explication de l’existant

Pour voir la source du script actuel, RDV sur cette page du site de notre nouvel adversaire dans la guerre du gloubi.

Continuer la lecture →

Petit tuto pour les paranos

Publié le par
Répondre

Bon, cette période d’épidémie de virus (biologique, pas informatique) est aussi une période d’épidémie de fake news.

La dernière en date concerne le formulaire de génération d’attestation de déplacement. Cette rumeur tient au fait que le QR code généré par ce formulaire permettrait de récupérer les données présentes sur votre téléphone.

Continuer la lecture →

Carte interactive du métro de Paris avec Leaflet

Publié le par
Répondre

Si on vous parle de solution pour intégrer une carte sur votre site, la première qui vous vient à l’esprit est surement Google Maps. Mais il existe plusieurs solutions open-source et gratuites.

Je vous ai déjà parlé d’OpenLayers, avec laquelle j’ai déjà refait une carte réalisée précédemment avec jQuery.

Mais OpenLayers n’est pas la librairie open-source la plus utilisée. La première place revient à Leaflet (voir sources en fin d’article).

Pour m’exercer, j’ai décider de créer une carte interactive du métro de Paris avec Leaflet.

Éléments utilisés dans la carte

Pour des questions de lisibilité des différentes lignes de métro, j’ai choisi d’utiliser le fond de carte Stamen Toner Lite.

Pour le tracé des lignes, j’ai utilisé des données fournies par le STIF sur opendata.stif.info.

Les codes couleur des différentes lignes proviennent de la RATP sur data.ratp.fr.

Les coordonnées des stations proviennent elles aussi du STIF, et de Wikipédia pour les stations fantômes.

Le logo utilisé comme marqueur de position d’une station provient du site de la RATP.

Continuer la lecture →
Pages : 1 2 3 4

Une horloge hexagonale

Publié le par
Répondre

À la suite de mes premières expérimentations avec les canvas (voir mes trois premiers articles étiquetés #canvas) et de la consultation récente de pages traitant de la création d’horloges utilisant cette technologie, j’ai décidé d’en créer une à ma façon.

Pour mon horloge, j’ai voulu le faire de manière originale, à la manière des montres proposées par Tokyoflash Japan. Mon choix s’est arrêté sur l’utilisation de formes hexagonales (parce que j’aime bien cette forme).

Avec l’utilisation d’un anneau hexagonal et d’un hexagone au centre, un digit (dans notre cas, un ensemble anneau + hexagone au milieu) peut prendre 8 valeurs différentes, ce qui fait que l’heure sera affichée en base 8.

Digits hexagonaux
Détail d’un digit hexagonal

Vu que les minutes et secondes (les parties ayant les plus grandes valeurs) vont de 0 à 59, deux digits en octal pour chaque suffisent.

Continuer la lecture →
Pages : 1 2 3

Carte interactive en SVG avec tooltip

Publié le par
Répondre

Après la première version de ma carte interactive (voir ici), j’en ai créé une deuxième à l’aide de la librairie OpenLayers.

Cette solution fonctionne, mais c’est comme disposer d’un outil multifonction mais d’en n’utiliser qu’une ou deux, OpenLayers étant une librairie permettant de faire beaucoup plus.

Une autre solution un peu plus « légère », mais tout autant moderne, existe : le SVG.

Le SVG, qu’est-ce que c’est ?

Le SVG, ou Scalable Vector Graphics (« graphique vectoriel adaptable »), est un format d’images vectorielles basé sur le langage de balisage XML.

L’avantage de ce format de fichier est que pour des formes simples (ce qui dans notre cas d’une carte des régions d’un pays) il est plus léger que le JPEG ou le PNG.

Continuer la lecture →
Pages : 1 2 3