Partager vos tutos JavaScript sous forme de petites fiches de codes. - Javascripts - Labsjs.com

Connexion

Bienvenue sur Labsjs.com !

2

Base d'un jeux en HTML 5 avec canvas et javascript

Tutos de Emanuele Feronato traduit par La Ferme Du Web.

On voit d'abord la partie lHTML puis la partie Javascript.

Cela va afficher un disque que l'on pourra bouger à l'aide des touches directionnelles.

Partager 1 commentaire Benoit

Titre *

Description (optionnel)

Code * Syntax:

Code:

Tags optionnel, séparé par des espaces.

» Plus de champs optionnels

Description (optionnel)

Code (optionnel) Syntax:

Code:

<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>

Description (optionnel)

Code (optionnel) Syntax:

Code:

Calculé le 2012-05-21 09:00:00

« Précédent 1 2 Suivant »

Présentation

Labsjs : Partager vos tutos JavaScript sous forme de petites fiches de codes.
Inscrivez-vous !

Déjà+50
services
à découvrir

Télécharger Waluu pour Android

Télécharger Waluu pour iPhone

Langue

Français

Mobiles

Plus de 60 applications iPhone, Android et iPad pour votre smartphone !
» 11 apps iPhone / iPad
» 50 apps Android
» 50 sites web mobiles !

Waluu Network

Waluu.com est composé de 73 sites. Vous pourrez retrouver :
» des Statistiques
» des Blagues
» des Liens
» des Poèmes
» des "Monsieur Doigt"

Infos

» Blog.Waluu.com, blog des développeurs de Waluu.
» FAQ pour bien débuter avec Waluu :)
» Contact, écrivez-nous !
» Rapporter un bug, c'est rare mais ça arrive :(
» Conditions d'utilisation, charte de respect des droits.
» Données personnelles, informations sur l'utilisation de vos données personnelles.

Boutique

La boutique de support de Waluu et des Waluu sites :
» Voir la boutique

Labsjs.com © 2010-2012 — Labsjs.com est un site de la société Waluu.com, Mentions légales — L'utilisation des données postées par les utilisateurs est définie dans la charte Propriété intellectuelle.