MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

C'est la 1ère étape sur 10 de ce Gamedev Canvas tutorial. Vous pouvez retrouvez le code source de cette leçon sur Gamedev-Canvas-workshop/lesson1.html.

Avant d'écrire les fonctionnalités de notre jeu, nous devons créer une structure où le jeu sera rendu. C'est possible grâce en utilisant HTML et l'élément <canvas>.

La page HTML du jeu

La structure de la page HTML est vraiment simple, car tout le jeu sera contenu dans l'élément <canvas>. Avec votre éditeur de texte préféré, créer un nouveau fichier HTML, sauvegarder sous le nom index.html, et ajoutez-y le code suivant :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Gamedev Canvas Workshop</title>
    <style>
    	* { padding: 0; margin: 0; }
    	canvas { background: #eee; display: block; margin: 0 auto; }
    </style>
</head>
<body>

<canvas id="myCanvas" width="480" height="320"></canvas>

<script>
	// Votre code JavaScript ici
</script>

</body>
</html>

Dans l'en-tête, nous avons définit l'encodage, le titre et quelques règles CSS très simples. Le corps contient les élément <canvas> and <script>. L'élément <canvas> contiendra le rendu du jeu et l'élément <script> sera là où nous écrirons le code JavaScript pour contrôler le jeu. L'élément <canvas> a un id nommé myCanvas qui permettra de le retrouver facilement en JavaScript, et possède des dimensions de 480 pixels de longueur et 320 pixels de hauteur. Tout le code JavaScript que nous allons écrire dans ce tutoriel sera contenu entre la balise ouvrante <script> et la balise fermante </script>.

Les bases de Canvas

Pour utiliser l'élément <canvas> pour notre jeu, nous devons d'abord le sélectionner avec JavaScript. Ajoutez le code suivant avec la balise ouvrante <script>.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

Ici nous avons enregistrée la référence à l'élément <canvas> dans une variable nommé canvas. Then we're creating the ctx variable to store the 2D rendering context — the actual tool we can use to paint on the Canvas.

Let's see an example piece of code that prints a red square on the canvas. Add this below your previous lines of JavaScript, then load your index.html in a browser to try it out.

ctx.beginPath();
ctx.rect(20, 40, 50, 50);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();

All the instructions are between the beginPath() and closePath() methods. We are defining a rectangle using rect(): the first two values specify the coordinates of the top left corner of the rectangle on the canvas, while the second two specify the width and height of the rectangle. In our case the rectangle is painted 20 pixels from the left side of the screen and 40 pixels from the top side, and is 50 pixels wide and 50 pixels high, which makes it a perfect square. The fillStyle property stores a color that will be used by the fill() method to paint the square, in our case, red.

We're not limited to rectangles — here's a piece of code for printing out a green circle. Try adding this to the bottom of your JavaScript, saving and refreshing:

ctx.beginPath();
ctx.arc(240, 160, 20, 0, Math.PI*2, false);
ctx.fillStyle = "green";
ctx.fill();
ctx.closePath();

As you can see we're using the beginPath() and closePath() methods again. Between them, the most important part of the code above is the arc() method. It takes six parameters:

  • x and y coordinates of the arc's center
  • arc radius
  • start angle and end angle (what angle to start and finish drawing the circle, in radians)
  • direction of drawing (false for clockwise, the default, or true for anti-clockwise.) This last parameter is optional.

The fillStyle property looks different than before. This is because, just as with CSS, color can be specified as a hexadecimal value, a color keyword, the rgba() function, or any of the other available color methods.

Instead of using fill() and filling the shapes with colors, we can use stroke() to only colour the outer stroke. Try adding this code to your JavaScript too:

ctx.beginPath();
ctx.rect(160, 10, 100, 40);
ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
ctx.stroke();
ctx.closePath();

The code above prints a blue-stroked empty rectangle. Thanks to the alpha channel in the rgba() function, the blue color is semi transparent.

Comparer votre code

Voici tout le code source de cette première leçon (fonctionnant avec JSFiddle) :

Exercice : essayer de changer la taille et la couleur des formes géométriques.

Prochaines étapes

Now we've set up the basic HTML and learned a bit about canvas, lets continue to the second chapter and work out how to Move the ball in our game.

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : mboultoureau
 Dernière mise à jour par : mboultoureau,