Concours de noël ( 2016 ) !

J'ai déjà eu l'occasion de réaliser quelques concours sur ce blog.

Le dernier concours en date :
- https://www.luluwebmaster.fr/actualite-27/-termine-concours-3-vpn-s-a-vie-a-gagner-news-de-rentree.htm

En cette fin d'année 2016, je reviens vers vous pour vous en proposer un nouveau, et en plus de cela, je vous présente un nouveau projet autour de ce concours !

Je lance donc mon troisième concours, et pas des moindres !

En effet, j'ai la chance de vous proposer différents lots, que voici :

- 1 VPS 4Go pendant 2 mois.
- 2 Comptes cloud 50Go.
- 5 Packs hébergement Web.
- 5 VPN's.
- 1 Code 15€ chez Gamoniac.
- 1 Grade Sponsor sur le serveur Minecraft "Les Couverts".

Comment va se passer ce concours ?
Et bien c'est très simple ! J'ai décidé de développer un jeu spécialement pour l'occasion ! Oui rien que ça !
Le concours va donc se dérouler en plusieurs parties. J'ai la chance d'être en partenariat avec Dyjix, Gamoniac ainsi que "Les Couverts", et j'ai donc beaucoup de lots à vous offrir.
Comme j'ai envie de faire plaisir à tout le monde, il y aura en quelque sorte quatre concours.

Deux concours sont donc disponibles sur Twitter :
- [...]

Luwebot - Un robot d'indexation sous node.js

Salut à toutes et à tous !

Aujourd'hui, nouvel article sur un petit projet plus "tranquille".
En effet, le week-end dernier, l'idée m'est venue de réaliser un "bot" ( Aussi appelé "robot" ) qui travaille tout seul.
Et c'est chose faite ! J'ai du coup développé pour le fun un petit script d'indexation utilisant Node.JS.

Pour rappel, j'ai déjà développé quelques projets sous Node.JS :
- https://www.luluwebmaster.fr/creation-55/morp-io-un-morpion-en-ligne.htm
- https://www.luluwebmaster.fr/creation-54/lulu-io-le-nouveau-agar-io.htm

Pour ceux qui ne connaissent pas : un robot d'indexation, c'est quoi ?

Note : Je ne prends pas le "mérite" d'avoir développé un gros script d'indexation, il aurait pu être poussé beaucoup plus loin dans son développement, mais ce n'était pas le but.

Un robot d'indexation ( Rapidement ) est un script qui va analyser des URL's pour les indexer et former une énorme base de données à l'aide de tous les liens trouvés.

Schéma rapide d'un robot d'indexation :

https://i.luwe.fr/384e036f.png

Note² : Le but de ce script n'est pas de monter un moteur de recherche ( Utilisant eux aussi des robots d'indexation ), mais [...]

Joyeuse fête d'Halloween !

Salut à toutes et à tous !

J'espère que vous allez bien en cette journée de fête :)

Vous l'avez sûrement remarqué en arrivant sur le site, une petite animation a été mise en place sur le blog.
En effet, j'ai décidé de créer une animation spéciale Halloween, le tout en Javascript !
C'est donc de cette animation que je vais vous parler aujourd'hui.

Comme je l'ai dit plus haut, l'animation est complètement développée en Javascript ( JS ).
Elle est générée de manière totalement aléatoire, et intègre au total six images d'Halloween différentes.

Quelques créations utilisant un système d'aléatoire en JavaScript :

- https://www.luluwebmaster.fr/creation-48/marcraft-mini-jeu-en-html.htm
- https://www.luluwebmaster.fr/creation-55/morp-io-un-morpion-en-ligne.htm
- https://www.luluwebmaster.fr/creation-54/lulu-io-le-nouveau-agar-io.htm

Chacune de ces six images sont tirées au sort à tour de rôle, permettant déjà un premier "aléatoire" à l'animation ( Une image ne peut être tirée au sort qu'une seule fois ).
Après avoir trouvé une image valide ( Qui n'a pas encore été tirée ), le script va choisir un autre "aléatoire", cette fois-ci pour définir [...]

Morp.io - Un morpion en ligne !

Hello tout le monde !

Retour des articles aujourd’hui

Et pour ce retour, j'envoie du lourd !
On continue dans la suite de mon apprentissage de "Socket.io".

Rappel, mon premier test de socket.io : https://www.luluwebmaster.fr/creation-54/lulu-io-le-nouveau-agar-io.htm

Je pense que vous connaissez tous le jeu du morpion.
Si vous ne le connaissez pas, je vous invite à voir sur Wikipédia : https://fr.wikipedia.org/wiki/Morpion_(jeu)

Comme dans mes créations en général, vous devez dans un premier temps vous connecter / inscrire.
Pour cela, il vous suffit juste d'entrer une adresse mail et un mot de passe ( Toutes les données sont enregistrées dans une base de données sécurisée ).

https://i.luwe.fr/22986486.png

Important : Si votre adresse mail n'est pas acceptée, il se peut qu'elle ne soit pas enregistrée dans la liste des domaines acceptés.
Si c'est le cas, merci de me prévenir en commentaire.
Liste des domaines acceptés :
- gmail.com
- orange.fr
- yahoo.com
- outlook.com
- outlook.fr
- free.fr
- aol.fr
- live.fr
- hotmail.fr

Une fois que vous êtes connectés, vous allez arriver sur une nouvelle [...]

Lulu.io - Le nouveau agar.io

Salut à toi qui lis cet article !

Avant toute chose, le nom Lulu.io est un petit troll en référence à Agar.io, je ne compte pas mettre ce projet en ligne.

Ceci étant dit, l'article peut commencer.

Vous vous souvenez peut être de mes projets de jeux que j'ai pu poster sur le blog :

- https://www.luluwebmaster.fr/creation-40/un-debut-de-jeu-en-canvas-deuxieme-test-canvas.htm
- https://www.luluwebmaster.fr/creation-48/marcraft-mini.htm
- https://www.luluwebmaster.fr/creation-47/premiers-tests-de-minis-jeux-en-canvas-r-html.htm

Dans un de ces articles, je vous avais expliqué que le multijoueur posait problème ; il rendait le jeu quasiment injouable ( Problème de latence ).

Mais depuis, j'ai appris à utiliser une nouvelle technologie super intéressante qui se nomme "node.js".

Ce n'est pas spécialement node.js qui va nous permettre de réaliser cela, mais socket.io.
Node.js va simplement servir de structure de base pour socket.io.
Pour ceux qui s'y connaissent un peu en développement web, vous savez déjà ce à quoi sert socket.io.
Mais je vais quand même expliquer pour ceux qui ne savent pas.
Très simplement, socket.io va nous permettre de [...]

Tchat JsonBdd - Un tchat géré avec JsonBdd

Hello tout le monde !

Aujourd'hui, nouvelle création, utilisant JsonBdd.

Pour rappel, JsonBdd c'est quoi ?

- https://www.luluwebmaster.fr/creation-50/jsonbdd-une-base-de-donnees-en-json.htm

Donc pour mettre en pratique JsonBdd, j'ai décidé de réaliser un petit tchat basique.

En soit, rien de très impressionnant, mais c'est surtout pour toutes les personnes qui souhaitent apprendre à utiliser JsonBdd.

Donc pour toutes les personne intéressées, le code complet du tchat est dispo sur GitHub :

- https://github.com/luluwebmaster/Tchat-JsonBdd

Et une version de test du tchat est disponible ici :

- http://jtchat.luluwebmaster.fr/

Voilà, article très léger cette semaine, mais je souhaitais quand même présenter ce tchat avec son code.

Sur ce, merci d'avoir lu, et à bientôt.

JsonBdd - Une base de données en JSON

Hello tout le monde !

Aujourd’hui, nouvelle présentation de code que j'ai réalisé :)

JsonBdd, c'est une petite application que j'ai réalisé pour le plaisir, et l’entraînement !
JsonBdd m'a permis de mettre en pratique la POO PHP, qui est un domaine que j'ai appris récemment.

Si vous êtes développeur web, vous savez qu'il faut utiliser une base de données pour gérer ses projets.
Habituellement, on utilise des bases de données MySQL pour cela.
Cependant, je me suis dit qu'il serait intéressant de faire ça différemment, et de mettre mes compétences à l’épreuve pour la réalisation.
Donc JsonBdd, c'est une base de données, gérée en PHP, et enregistrée au format JSON.

Note : Je ne prétends pas avoir créé un nouveau système de base de données, une fois de plus, j'ai réalisé ce projet pour mettre en pratique mes compétences.

Rappel de la structure d'une base de données classique :

https://i.luwe.fr/f285fe0f.png

Comment ça marche ?

C'est très simple ! Dans un premier temps, vous devez télécharger le dossier dispo en fin de l'article, inclure ce dossier à votre projet, et pour finir, "include" ou "require" le fichier "json_bdd.php" dans vos [...]

Cubin - Dessiner en HTML et JS

Hello tout le monde !

Aujourd'hui, je vais vous présenter un nouveau projet que j'ai réalisé pour le fun, et pour mettre en pratique mes compétences.

Je l'ai nommé "Cubin", le principe est simple, vous connaissez tous Paint ?
Et bien, l'idée était de créer un système du même genre pour dessiner en HTML et JavaScript.
Évidement, on est très loin de Paint ou d'un tout autre logiciel de dessin ( C'est une version extrêmement simplifiée ).
Mais l'objectif n'était en aucun cas de récréer Paint, simplement de créer la base du système.

Je préfère prévenir, le code étant assez lourd et pas très bien optimisé, si vous avez une petite config PC, il se peut que vous rencontriez des ralentissements, voir même une impossibilité d'utiliser le système.

Sans plus attendre, je vais maintenant vous expliquer comment cela fonctionne.

Pour commencer, vous allez arriver sur cette interface :

https://i.luwe.fr/aad2b4fa.png

Vous pouvez déjà remarquer plusieurs éléments.

Le cadre sur lequel vous allez dessiner :

https://i.luwe.fr/cd3b1ec6.png

Un sélectionneur de couleurs :

https://i.luwe.fr/cc0b75b3.png

Et différents paramètres que je vais [...]

Marcraft - Mini jeu en HTML.

Salut à tous !

Aujourd'hui, je vais vous présenter un nouveau petit projet "code" que j'ai réalisé pour le plaisir !

Et oui, je ne me suis pas arrêté à créer un mini jeu en multi ( https://www.luluwebmaster.fr/creation-47/premiers-tests-de-minis-jeux-en-canvas-r-html.htm ), je reviens avec un nouveau projet, réalisé pour l'apprentissage et le fun !

L'idée, ce n'est absolument pas un jeu multi type Habbo, mais c'est plutôt un jeu solo, en 2D.
Une fois de plus, l'objectif en réalisant ce projet, c'était d'en apprendre un maximum sur les technologies utilisées.
Pour la réalisation du projet, je ne souhaitais pas utiliser Canvas, malgré qu'il aurait été plus optimisé.
Du coup, je l'ai réalisé en HTML / CSS / JavaScript / Jquery.
Toute la partie graphique ( Images ) n'est pas de moi, ce sont des images que j'ai prise sur internet.

Quand vous allez charger le jeu, vous allez tomber sur un bouton vous permettant de démarrer le jeu.

https://i.luwe.fr/91781187.png

Là, il vous suffit juste de cliquer sur "démarrer"!
Vous devez avancer avec la flèche de droite de votre clavier, et sauter avec votre barre espace.
Vous ne pouvez pas revenir en [...]

Premiers tests de minis jeux en Canvas & HTML

Hello !

Alors aujourd'hui après vous avoir montré mes premiers tests en canvas ( https://www.luluwebmaster.fr/creation-40/un-debut-de-jeu-en-canvas-deuxieme-test-canvas.htm ), je vais vous présenter un nouveau petit projet que je me suis amusé à créer.

Celui-ci, ne porte pas spécialement de nom, on va dire que c'est un test ^^

https://i.luwe.fr/f1a05656.png

Pourquoi ne pas le faire en flash ?
Parce que Flash est clairement insuffisant en terme d'optimisation, ainsi qu'il n'est pas forcément supporté par tous les navigateurs.
C'est pour cela que j'ai choisi d'utiliser du JavaScript et HTML.

Donc l'idée, c'était de réaliser un petit jeu 2D, dans le genre Habbo.
J'ai dans un premier temps, réalisé une première version, créée à l'aide de Canvas et JavaScript !
Du coup là, on se retrouve avec un personnage, qui va pouvoir se déplacer sur la map.

https://i.luwe.fr/646d0500.png

La map va aussi se déplacer en fonction du personnage.
On va aussi avoir un système de chat, qui sera utile par la suite ( Voir la suite de l'article ).
A la base, j'ai développé une première version qui était juste orientée solo.
Par la suite, je me suis dit que cela [...]

Un début de jeu en Canvas ? ( Deuxième test Canvas )

Yop tout le monde ! :)

Je reviens aujourd'hui vers vous pour vous présenter mon nouveau test en Canvas !

Dans un premier temps, sachez que ce code n'a aucune vraie utilité pour vous, c'est un test dont le but pour moi est vraiment d'apprendre à maîtriser ces technologies ^^

Je vais maintenant vous lister les "fonctionnalités" de ce fameux test.

Tout d'abord, quand vous allez charger votre page, vous allez vous retrouver avec un petit Père-Noël, des boules de différentes couleurs et tailles, et des carrés noirs :

- Le Père-Noël est un élément que vous allez pouvoir bouger -on va y revenir plus bas.
- Les boules sont en fait des "coins", avec une valeur et une couleur qui diffèrent en fonction de leurs tailles.
- Les carrés noirs sont des obstacles, rien de plus simple

Maintenant, passons au personnage du Père-Noël.

Cet élément va vous permettre de récupérer les "coins" en vous déplaçant grâce aux touches de votre clavier ( Par défaut : Haut / Bas / Droite / Gauche ).

Ensuite, vous pouvez retrouver sur la droite du Canvas, différents éléments que voici :

- Le premier : c'est ici que vous retrouverez toutes les infos sur votre [...]

Calendrier de l'avent

Salut à tous !

Encore une nouvelle création ( Deux dans le même jour ).

Aujourd'hui, j'aimerai vous présenter mon code inutile

Mon code inutile ? Oui, hier ( Le 5 ), je n'avais rien de special à faire, du coup, je me suis dit, et si je faisais un truc inutile ? ( Et là, j'ai fait ce code, un calendrier de l'avent ).

Note : Si vous rencontrez un bug avec celui-ci, actualisez la page.

En gros, c'est quoi le principe ?

Vous avez un calendrier, et vous devez ouvrir chaque case de celui-ci ( Si le jour est valide ), comme dans la vraie vie .

A chaque fois que vous ouvrez une case, une blague vous est racontée .

Chaque blague est séléctionnée parmi une liste de 40 blagues disponibles.

Note² : Blagues reprisent du site "www.blablagues.net"

Vous ne pouvez pas tomber deux fois sur la même blague !

Si une case est déjà ouverte, vous ne pouvez pas re-cliquer dessus.

Vous ne pourrez ouvrir une case que si le jour sélectionné est dépassé ou est le jour même, par rapport à la date actuelle.

Du coup, le calendrier :

=>Code masqué<=

Voila, c'est tout pour moi ^^

Promis dans quelques temps, je sort une vraie création [...]

Un menu qui s'ouvre au survole en HTML et CSS.

Bonjour à toutes et à tous !

Aujourd'hui, je vais vous présenter un code permettant de faire un menu qui s'ouvre au survol d'un élément.

Avant toute chose, sachez que cet article avait déjà été publié sur un de mes anciens sites , mais je trouvais intéressant de le re-poster

Sans plus attendre, passons au code !

Tout d’abord posons les bases qui sont celles-ci :

=>Code masqué<=

Et ensuite, ajoutons du style sur ces éléments :

=>Code masqué<=

Vous pouvez ensuite optimiser votre style comme vous le souhaitez.

Code final sans les commentaires, avec ma petite touche :

=>Code masqué<=

Bien sûr, je n'ai pas donné de design "propre" au menu, je considère que c'est à vous de le faire :)

Voilà, c’est la fin.

J'espère que cet article vous aura aidé, et sur ce,

Je vous dis à bientôt.

Merci à @_Goodword pour la correction de l'article.

Mon premier test en Canvas + JS

Salut à vous !

Aujourd'hui, je viens vous présenter mes débuts en programmation Canvas + JS.

Pour ceux qui ne connaissent pas, qu'est-ce que c'est ?

Canvas est un composant HTML qui permet, en gros, de faire un rendu graphique dynamique via JS ( Javascript ).

Il faut savoir que ce sont mes débuts en Canvas, je le découvre encore actuellement.

Mon idée serait par la suite d'utiliser Canvas pour créer des mini jeux en HTML5.

Bref, voici l'un de mes premiers code en Canvas :

=>Code masqué<=

Ce code est en fait très simple.

Vous dirigez ( Avec les touches que vous aurez défini ) un bloc de couleur. Vous pourrez simplement le faire bouger de haut en bas, de droite à gauche.

Vous avez aussi quelques paramètres modifiables, mais ceux-là, je vous laisse les découvrir et les modifier à votre guise !

Ce premier test est très débile ( Pour ne pas être vulgaire ^^ ), mais pourtant, il permet d'en apprendre déjà beaucoup !

Certains se demanderont sûrement pourquoi poster ce code ?
Simplement car mon site est à la base ici pour vous présenter ce que je fais.
Du coup, il est tout à fais normal de poster ce genre de créations.

Et voilà, [...]