Hello

Me voici donc en train d'apprendre le HTML5 et plus précisément le javascript et WebGL.
Comme première étape, je me suis fixé de porter les jeux amateurs que j'avais déjà fait dans le passé.

Voici le premier, qui se nomme TANK ZONE

http://www.dk-games.com/Html5/TankZone.html

C'est un jeu que j'avais fait pour GBA, d'où la toute petite résolution. 240x160 pixel. Le but de l'exercice était de porter le jeu tel quel.
C'est un jeu qui a été écrit en C.

Un screenshot:
http://www.dk-games.com/Html5/TankZoneScreen.jpg

Le code source:
http://www.dk-games.com/Html5/TankZone.txt

Avant cela je n'avais jamais fait de Javascript.

Quelques détails :

Le jeu est écrit en Javascript donc, et j'ai utilisé un petit moteur du nom de PIXI pour faire l'affichage. C'est un petit moteur 2D, qui utilise WebGl. Il existe plein de moteurs, celui la me semblait bien.

La conversion du code C->Javascript a été très rapide. Les langage sont finalement très proches. J'ai fait peu d'adaptations.

Le jeu tourne sous FireFox, je n'ai pas encore testé sous d'autres navigateurs.

Il n'y a pas de son (je n'avais pas mis de son non plus sur GBA, le portage est purement identique la).

Pour le moment, le temps est géré en pas fixe (comme sur GBA, je suppose que chaque appel à la fonction de rafraichissement se fait à 60 fps). La fonction "requestAnimationFrame" a pour but de garantir cela sur les navigateurs.

Le jeu est composé de 16 niveaux. Vous devez shooter les tanks. Le nombre de tanks restant est affiché en haut à gauche.
Attention, il y a certains niveaux spéciaux, comme celui ou votre nombre de munitions est limité (affiché en bas), ou ceux ou vous devez défendre un bâtiment (noté "P"). Si il se fait toucher (le bâtiment), vous perdez.

Le portage "brut" s'est donc très bien passé et assez rapidement (aller, 2 semaines pour apprendre HTML5, javascript, et compagnie). J'en avait jamais fait avant.

Ça marche pas chez moi, chrome 29

J'ai une énorme page "vide" qui s'affiche : http://puu.sh/4kzos.jpg

Oui j'ai vu cela. En fait le truc est la, mais en plein milieu et en énorme.
Je vérifie que j'ai bien enlevé mes tests de "zommage".

Voila j'ai corrigé. C'était bien un ancien test de zoom que j'avais laissé (qui ne faisait rien sous Firefox, mais qui marche très bien sous Chrome).
Le jeu est jouable sous Chrome aussi maintenant.

Je vais tester IE.

Marche pas sous IE. Le canvas (fenêtre de gauche) et l'écran WebGl (fenêtre de droite) ne s'affichent pas.

Pour les autres petits détails :

Le code a été tapé sous "notepad++" qui est un éditeur de texte tout simple. Il a des plugins avancés comme l'affichage des fonctions dans un panneau. c'est pratique.

Pour le debug, j'ai utilisé "FireBug" de FireFox. Ca permets de tracer le code et de voir les erreurs.

fuu j'ai eu game over au niveau avec les munitions

Ouais sous IE c'est normal qu'un jeu webGL marche pas je pense

Sinon un petit problème, quand je zoom avec chrome et que j'essaye de déplacer mon tank toute la page défile aussi (comme quand on veut défiler du texte)

Sinon c'est cool, fluide et sympa, bien joué

ça t'as pas dérangé d'avoir toutes les sources sur 1 seul fichier ?

au niveau avec les munitions

Et oui, il y a une subtilité. Il faut laisser les tanks se tirer dessus. Ca t’économise des munitions.

Oui j'ai vu pour le défilement. Il faut moins zoomer. J'ai défini une "page" de 900 pixels de large je crois. Il ne faut pas que celle ci dépasse ta fenêtre, une fois le zoom mis en place.

Sinon c'est cool, fluide et sympa, bien joué

Merci

ça t'as pas dérangé d'avoir toutes les sources sur 1 seul fichier ?

Oh ben non puisque j'avais fait comme cela pour le jeu original. Mais pour les prochains, je ferai quelque chose de plus propre, sur plusieurs fichiers. C'est l'étape suivante pour mon apprentissage de JS.

Au niveau des differences avec le C/C++:

- Pas de notion de "struct/class". Les classes sont en fait des fonctions dans lesquels ont défini des attributs via "this".

function Vehicule()
{
this.posx=0;
this.posy=0;
this.angle=0;
this.numsprite=0;
this.gfxsprite=0;
this.taillex=0;
this.tailley=0;
this.scale=0;
this.angletourelle=0;
this.nSpeed=0;
} ;

Ceci defini structure de type "Vehicule".

- Pas de pointeurs

Les pointeurs pur et dur n'existent pas. Par contre, les pointeurs par référence, comme en C++ existent. On peut donc utiliser facilement un passage de paramètre via référence.

function Move_vehicule(veh,amplitude_mvt)

"veh" est une référence vers un "object" (en JavaScript, tout est un "object" en fait). On peut ensuite utilier veh.position pour accéder aux attributs de l'object. C'est un passage par référence, seul la valeur du pointeur de veh est recopié (on ne peut le modifier dans la fonction).

- Pas de type pour les variables
Aucun typage de variable. Les types se mettent automatiquement.
var toto = 2.1; // sera typé en "float"
var tata = "Coucou"; // sera typé en string.
C'est sympa, mais attention aux problèmes du type:
result = nombre / 10; // En C c'est une div entière, en JS le resultat est un float.
Faut juste faire attention

- Pas de tableaux à plusieurs dimensions.
Pour créer un tableau 2D, il faut crée un Array 1D et ensuite créer un tableau pour chaque element. On obtient un tableau 2D qu'on peut utiliser comme en C ... toto[0][0].
J'ai écrit cela comme ça:
var Tableau_dir = new Array(4);
for (i=0; i<4; i++) Tableau_dir[i] = new Array(2);
Création d'un tableau [4][2]

Pour le reste, le code est identique à mon code C d'origine. C'est à 90% le même code. Ca va donc vite pour porter ce genre d'algo. Pour du C++ plus complexe, je ne sais pas. On verra bien.

Je trouve personnellement le jeu assez mal fait, je m'explique, dès qu'on zoome la fenetre de jeu se téléporte à des endroits aléatoires et ca fait pas zoomer le jeu tant que ca, l'image du background de ton jeu se répète à l'infini et lorsque je veux appuyer sur les touches flechées, comme ca correspond dans mon browser (firefox) à scroller vers le haut ou le bas c'est impossible de jouer en voyant ou on va.
Pourquoi tu ne redimensionne pas ton jeu?

Comme je dis plus haut, il me fait pas trop zoomer.

Comme j'ai dis aussi, c'est un portage direct d'un jeu gba. Je suis en train d'apprendre le html5, chaque chose en son temps pour le redimensionnement. Si j'avais trouver le moyen simple d'avoir une fenêtre plus grande sans refaire tous les graphs et le code, je l'aurais fait bien sur

Si tu ne zoom pas trop, le jeu est parfaitement jouable. (faut pas que les ascenseurs apparaissent)

Oui évidemment si c'est juste un premier jeu c'est pas grave. Il est quand meme assez dur je trouve .

Il est hyper dur oui.

Ce jeu m'énerve ! Il est vraiment trop dur, il faudrait mettre plus de vies...

hey 8 vies au depart, c'est très généreux

Je suis bien sur d'accord. Dans la seconde version, je reverrai le niveau de difficulté.

D'ailleurs je cherche un graphiste pour refaire des nouveaux visuels (ceux ci sont piqués d'un jeu PC).

J'aime bien ;)