Tuto application Facebook

Créer une application Facebook de A à Z en PHP. API Facebook, viralité, monétisation ...

Tuto Symfony2

A travers le projet WatchMyDesk, apprenez à maîtriser le Framework PHP5 Symfony2.

Création site web

Création de sites web, applications Facebook sur mesure, e-commerce, applications iPhone ...

Se
Connecter Créer
un compte

15
SEP

Tutorial: Créez votre premier jeu en HTML5 Canvas et Javascript

Publié le 15/09/10 à 07h19 par DJo

Voici un nouveau tutorial vous permettant de créer le squelette d'un jeu en HTML5 Canvas couplé à du Javascript.

Voici un nouveau tutorial vous permettant de créer le squelette d'un jeu en HTML5 Canvas couplé à du Javascript.

Ce tutorial a été réalisé par Emanuele Feronato, sans doute l'un des meilleurs développeurs de jeux web à partager son savoir.

Le principe est simple, dans ce tutorial, Emanuele nous explique comment créer le prototype d'un jeu en HTML5 Canvas.

L'idée sera de créer une boule noire contrôlable avec les flèches directionnelles de notre clavier, sans saccades ...

Créer un jeu en HTML5 Canvas et Javascript

On commence par créer un fichier HTML basique avec notre élément canvas:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#game_area{
     background-color:#f5f5f5;
     border:1px solid #e5e5e5;
}
</style>
</head>
<body>
     <canvas id="game_area" width="500" height="500"></canvas>
</body>
</html>

Il ne nous reste plus qu'à rajouter la partie javascript:

<script type="text/javascript">
 
document.onkeydown = function(event) {
     var key_pressed; 
     if(event == null){
          key_pressed = window.event.keyCode; 
     }
     else {
          key_pressed = event.keyCode; 
     }
     switch(key_pressed){
          case 37:
               left=true;
               break; 
          case 38:
               up=true;
               break; 
          case 39:
               right=true;
               break;
          case 40:
               down=true;
               break; 
     } 
}
 
document.onkeyup = function(event) {
     var key_pressed; 
     if(event == null){
          key_pressed = window.event.keyCode; 
     }
     else {
          key_pressed = event.keyCode; 
     }
     switch(key_pressed){
          case 37:
               left=false;
               break; 
          case 38:
               up=false;
               break; 
          case 39:
               right=false;
               break;
          case 40:
               down=false;
               break; 
     } 
}
 
var context;
var x_speed=0;
var y_speed=0;
var y=250;
var x=250;
var left=false;
var right=false;
var up=false;
var down=false;
var friction=0.95;
 
function on_enter_frame(){
     if(left){
          x_speed--;
     }
     if(right){
          x_speed++;
     }
     if(up){
          y_speed--;
     }
     if(down){
          y_speed++;
     }
    context=game_area.getContext('2d');
    context.clearRect(0,0,500,500);
    context.beginPath();
    context.fillStyle="#000000";
    context.arc(x,y,30,0,Math.PI*2,true);
    context.closePath();
    context.fill();
    x+=x_speed;
    y+=y_speed;
    x_speed*=0.98;
    y_speed*=0.98;
}
 
setInterval(on_enter_frame,30);
 
</script>

Et voilà ! Vous avez un jeu en HTML5 Canvas très basique, mais qui viendra s'étoffer à l'aide de plusieurs nouveaux tutoriels prochainement.

Bien sûr, ce jeu ne fonctionne pas sous IE, mais faut-il encore le rappeler ...

Site Officiel et démo

A voir aussi sur le même sujet:

6 Commentaires

jeux

Baraguiné par farfadet le 15/09/10 à 09h24

Woh ! Avec effets d'intertie et tout l'tintouin...

"yapluka" ingurgiter ce premier cours ;-)

Baraguiné par Zuff le 15/09/10 à 11h59

C'est vrai que le coup de l'inertie est bien joué !

Sinon, ca marche très bien sous Internet Explorer :
http://www.urbalyon.org/sip6Internet/demo/jeuHtml5.html

(il faut juste mettre excanvas)

Baraguiné par DJo le 15/09/10 à 14h00

Ok, oui c'est vrai que je n'y avais pas pensé :)
Donc plus de raison de faire de jeu sous flash maintenant :p

Par contre ta démo ne marche pas sur FF (chez moi en tout cas)

Baraguiné par Zuff le 15/09/10 à 14h54

Erreur corrigée pour FF :
context = document.getElementById("game_area").getContext("2d");

Baraguiné par le 16/09/10 à 14h18

Alors oui ça ne saccade pas, parce qu'il n'y aucun autre élément a créer. Rajoutez à ça une texture et d'autres objets et les saccades arriveront très rapidement.

Le gros défaut du Canvas (en tout cas tout ce que j'ai pu en voir) c'est qu'il faut vider le canvas pour le redessiner entièrement, ce qui est très très lourd pour le navigateur sans accélération GPU.

J'avais, en faisant quelques test, trouvé une méthode plus "simple", c'était de faire un clearRect autour de l'objet qui doit bouger uniquement et le redessiner lui seul aux nouvelles coordonnées.

Et j'avais trouvé une méthode d'une personne qui avait créé un jeu complet (à la Zelda) en html5 qui lui, redessinait uniquement les pixels un par un mais en contre partie, il devait stocker tout son "dessin" dans des arrays.

Baraguiné par steflinux le 10/11/10 à 21h58