Développement de Jeu en JS

Sources:

Intro to Game Development with JavaScript - Full Tutorial

Structure du projet

/BrickBreaker
    /assets
        /images
            ball.png
    /src
        Ball.js
        InputHandler.js
        main.js
        Paddle.js
    index.html

Page HTML

Ne pas oublier d'utiliser la propriété type=“module” dans la balise script lorsqu'on inclut le script JS principal !!!

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Brick Breaker</title>
 
	<style>
		#gameScreen {
			/* bordure du canvas */
			border: 1px solid black;
		}
		img {
			/* rendre les images invisibles */
			display: none;
		}
	</style>
 
</head>
<body>
 
	<!-- Canvas -->
	<canvas id="gameScreen" width="800" height="600"></canvas>
 
	<!-- Les images sont incluses au niveau du HTML mais -->
	<!-- elles sont cachées au niveau du CSS              -->
	<img id="imgBall" src="assets/images/ball.png">
 
	<!-- Inclure script principal en tant que module -->
	<script type="module" src="src/main.js"></script>
 
</body>
</html>

Module principal

src/main.js

let canvas = document.getElementById("gameScreen");
let context = canvas.getContext("2d");
 
// vider le canvas
context.clearRect(0, 0, 800, 600);
 
// dessiner un rectangle rouge
context.fillStyle = '#f00';
context.fillRect(10, 10, 200, 100);

Classe Paddle

src/Paddle.js

Classe Ball

src/Ball.js

Classe InputHandler

src/InputHandler.js

Cramnurbel

Panneau latéral

Plan du Site:

Table des matières

Développement de Jeu en JS

Structure du projet

Page HTML

Module principal

Classe Paddle

Classe Ball

Classe InputHandler

Cramnurbel

Outils pour utilisateurs

Outils du site

Panneau latéral

Plan du Site:

Table des matières

Développement de Jeu en JS

Structure du projet

Page HTML

Module principal

Classe Paddle

Classe Ball

Classe InputHandler

Outils de la page