HTML 5 : Ne cherchez pas midi à quatorze heures !

Que vous soyez féru de flash ou non, sachez que html5 va vous simplifier la vie ! Oui, tout est (pratiquement) dans le code !

Je vous suggère de prendre votre éditeur html (dans mon cas Notepad ++) et de taper ce code afin d’entre apercevoir la puissance de feu de html5. :

<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=5;
var y_speed=5;
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>

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

Encore sceptique ? Alors jetez un coup d’oeil ici :

Qui ne connait pas le fameux jeux Cut the Rope ? Préférentiellement jouable sur Internet Explorer 9.

Mozilla a vite compris l’importance de html5 (il n’est pas le seul)  et vous propose : BrowserQuest … qui est un MMO (Massively Multiplayer) ! Attention : nécessite Mozilla Firefox

Évidemment, html n’agit pas seul, il aidé de ses alcolytes ! JavaScript (JS pour les intimes) et CSS3 !

Vous avez décidé de sauter le pas ?

Pour les néophytes

Un bon éditeur de texte comme notepad ++ suffit amplement ! Quant aux tutoriels, eh bien vous êtes des vrais chanceux ! Il y a pléthore de didactiels !  Allez-y !🙂

Du coté des développeurs

Adobe va bientôt sortir Dreamweaver incluant HTML5 renseignez vous donc ici. Il y a aussi Adobe Edge. Après, vous pouvez évidemment vous tourner vers les usines à gaz comme Aptana, ou bien vous contenter de Notepad ++.🙂

Bonus

Ceux qui veulent faire des jeux vidéos, mais qui ne connaissant vraiment rien à tout ceci, je les invite à télécharger Construct2.

2 réflexions sur “HTML 5 : Ne cherchez pas midi à quatorze heures !

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s