> Le Site du Zéro - Informatique

> Cours

> Tutoriels

> Site Web

> Javascript

> Créer un mini-RPG en JavaScript avec canvas

> Lecture du tutoriel

Créer un mini-RPG en JavaScript avec canvas

Par

Sébastien CAPARROS (sebcap26)

Mise à jour : 28/06/2011

Difficulté : Intermédiaire

754 visites depuis 7 jours, classé 163/786

Je vois régulièrement sur des forums d'informatique des novices qui souhaitent créer leurs propres jeux, et plus précisément leurs propres MMORPG (jeu de rôle massivement multijoueurs) en général.
C'est une tâche ardue, et j'ai moi même commencé par là. Je n'aborderai ici que l'aspect technique (programmation) du jeu.

Alors tu vas nous apprendre à créer un MMORPG complet ?

Non. Ce tutoriel a pour but de vous montrer les bases de la programmation d'un RPG en Javascript. Je n'aborderai pas l'aspect MMO, c'est à dire que ce sera un jeu en solo et pas multijoueurs. D'autre part, je rappelle que c'est un mini-RPG. Ce sera un jeu de rôle très basique et ne comportera globalement que la partie graphique du jeu.
Une fois les bases acquises, je pars du principe que vous saurez vous débrouiller seul. Il est donc important que vous alliez de l'avant en apportant vos propres modifications et essais au code que je propose. Le copié-collé sans chercher à comprendre ne vous servira à rien, et vous seriez probablement bloqué dès la fin du tuto.

Il n'y a pas qu'une seule méthode pour faire un jeu. Celle que je présente n'est peut être pas la meilleure, mais en tout cas c'est une méthode qui fonctionne, et c'est celle que j'utilise.

En résumé, voici ce que vous apprendrez à faire dans ce cours :

Organiser les différentes données du jeu pour avoir un système aussi dynamique que possible
Afficher une carte du monde
Afficher des personnages qui peuvent se déplacer, et gérer l'animation de leurs déplacements
Gérer la caméra
Afficher des éléments d'interface (indicateur de vie par exemple)

Pour suivre ce cours, vous devez d'abord maîtriser :

Retour en haut

Ce cours est composé des parties suivantes :

La carte
Les personnages et les décors
Commentaires et appréciations

Retour en haut

Partie 1 : La carte

Le premier élément du jeu auquel nous allons nous intéresser est l'affichage de la carte.

Cette partie est sans doute la plus simple de notre RPG, mais c'est aussi la plus importante car elle pose les bases de la structure du jeu et vous permettra de vous familiariser avec l'élément canvas.

Et voilà, nous avons terminé la première partie de notre mini-RPG.

Dans la prochaine partie nous mettrons plus de choses sur notre terrain.

Vous pouvez télécharger le code source de cette partie ici, ou bien le tester ici.

Retour en haut
Partie 2 : Les personnages et les décors

Dans cette partie, nous mettrons en place les personnages du jeu et leurs déplacements.

Nous ajouterons également des décors au jeu et étudierons les interactions et les événements entre tout ce petit monde.
- Chapitre 1
  Les personnages

Retour en haut

Nous sommes maintenant capables d'afficher une carte de n'importe quelle taille sur l'écran, ainsi que des personnages. Bien sûr notre jeu est loin d'être complet, mais ce premier résultat n'est-il pas satisfaisant ?

Retour en haut

Retour en haut

56 commentaires pour "Créer un mini-RPG en JavaScript avec canvas"

Note moyenne : 3.76 / 4 (79 votes)

Pseudo	Commentaire
Mini Vado	# Posté le 11/02/2012 à 16:40:13
Études : Exia.Cesi, Ecole Supérieure d'Informatique du Cesi	Citation : spiderboy En attendant la suite des tutos, je vous conseille de tester SantaLib, vous irez déjà 40 000 fois plus vite : http://santalib.fr/ Y a quelques démos sur le site, la prise en main est assez facile Bref je vous laisse decouvrir pour ceux qui connaissent pas. J'ai regardé les démos, je les trouve assez mal faites, le jeu est lent, pas vraiment pratique à prendre en main. Ca donne pas envie de découvrir plus que ça cette 'API'. Développeur Web (HTML 5 & Css3 \| JS \| Php 5) Consulter mon C.V \| Me contacter
spiderboy	# Posté le 15/02/2012 à 21:32:50
	Ouiii c'est sur, après c'est du JavaScript pure et non du HTML5, le code est pas très optimisé, mais il y a un tutoriel pour la prise en main, sur comment créer une MAP, insérer des bots, determiner les images, insérer des dialog, faire du multi-player, et du multimap, gerer les collisions ... y a casi pas à toucher au code sinon commenter, decommenter et faire des copier coller, après c'est un avis personnel Enfin c'est sur, il y aura toujours mieu, c'était juste une suggestion pour ceux qui veulent faire des jeux Php,MySql,JS,HTML5,Basic,Shell,vb, C Petits Projets Perso : http://santaLib.fr {EPITECH.}
Eagleseb	# Posté le 30/03/2012 à 17:21:40
	Moi j'aurais plutôt tendance à déconseiller Santalib. Un projet avec des démos si mal faites ne peut être sérieux !
malobre	# Posté le 24/05/2012 à 17:33:04
Je suis votre DIEU !!! --' Avis : Bon	Pas mal comme tuto pour créé son premier jeux c'est vraiment super ! Comment générer automatiquement un supersite ? Toute les réponses ICI
zaoui	# Posté le 24/05/2012 à 19:59:39
Avis : Bon	bonjour super mais la suite ??????