Aujourd’hui j’essai HeTeMeLe5, enfin j’essai la balise canvas. Oui celle qui permet de faire du dessin (et donc de l’animation) avec du javascript. Du coup j’essai JavaScript, et fait, je le découvre un peu plus réellement, car le JavaScript ce n’est pas vraiment nouveau. Mais jusque là j’en ai une utilisation assez minimaliste, ce qui se traduit par l’utilisation de jquery et quelques plugins pour quelques effets visuels ou appels Ajax.
L’idée c’est aussi de voir ce qu’on peut faire comme code (notamment orienté objet) avec JavaScript.
Dans mon idée écrire du code juste pour essayer c’est un premier pas, essayer de faire un projet (même tout p’tit) ça me parait mieux. L’idée est donc la réalisation d’un jeu de air hockey, si possible où l’on puisse jouer à deux (comme en vrai :p).
Pour faire communiquer mes deux clients (joueurs) il me faudra un serveur. Comme on entend beaucoup parler de node.js en ce moment, on essaiera de faire un serveur avec node.js, ce qui aussi fournira une solution homogène et très certainement nous poussera un peu plus dans JavaScript.
En route pour le 1er jet :
Ça nous donne une vue de haut du plateau (qui n’est pas encore dessiné) avec un rond bleu (frappeur) représentant le joueur et un petit rond rouge représentant le palet. Il est possible de frapper le palet en sélectionnant le rond bleu avec la souris.
Pour l’instant c’est du JavaScript tout simple : une structure de code pour dessiner dans la balise canvas, et le mettre à jour régulièrement
function timeout() { draw(); update(); if (stopped == false) { setTimeout('timeout()', 30); } }
Quelque bout de code pour l’interaction avec la souris. Et voila le tour est jouer, enfin on a un début.
document.onmousedown = function(event) {....} document.onmouseup = function(event) {....} document.onmousemove = function(event) {....}
Le plus compliquer c’est se rappeler les cours de math, voir les fonctions draw() et update() dans le code.Surement qu’un Framework m’aurait un peu aidé…
Après un premier test, ça ne fonctionne pas sur tactile. Ah mais oui, il y a aussi des événements pour le tactile :p
La suite dans un prochain épisode.
Pour le montage, j’étais un peu inquiet pour le moyeu arrière, mais en fait c’est assez simple, il y a des marque sur les 3 pièces à assembler, pour le faire correctement, et ça fonctionne nickel. Le moyeu est fourni avec un pignon 21 dents, j’ai donc repris le plateau de 52 dents d’origine, et ça à l’air d’aller plutôt bien.
