Bonjour,

Lors du développement d'un jeu vidéo, il y a toujours certaines choses qui m'échappe, je sais que la structures d'un jeu varie en fonction de beaucoup de paramètres mais j'ai vraiment besoins que l'on m'aiguille SVP.

Je développer un jeu de type Shoot them up avec le même système que Space invaders. Pendant le jeu (hors des menu) le background pourrait être composé de tiles animées ou non représentant le niveau. La couche par dessus le background contiendrait les sprites animés au non représentant les ennemi, le joueur, et les missiles.

Je programme le jeu en JS (HTML 5) donc voilà le code des différents fichiers javascript puis html.

index.html (contient juste le canvas dans lequel sera affiché le rendu du jeu)
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
 
<!DOCTYPE html>
<html>
	<head>
		<title>Game</title>
		<link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>
		<script type="text/javascript" src="js/game.js"></script>
		<script type="text/javascript" src="js/setup.js"></script>
	</head>
	<body>
		<canvas id="canvas" width="640" height="480"></canvas>
	</body>
</html>
Comme vous pouvez le voir, j'importe les deux fichiers game.js et setup.js.

setup.js (c'est le fichier principal dans lequel je m'abonne aux différents événement lier au clavier puis où se trouve la boucle principale du jeu).
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
 
window.onload = function()
{
    var cvs = document.getElementById("canvas");
    var ctx = cvs.getContext("2d");
 
    if (ctx)
    {
        // Inputs handler
        var actionStats =
        {
            old : {},
            now : {}
        };
 
        // Attribute action by each key pressed
        function attributeAction(keyCode, pressed)
        {
            function updateStat(action, newStat)
            {
                actionStats.old.action = actionStats.now.action;
                actionStats.now.action = newStat;
            }
 
            if (keyCode == 0x26 || keyCode == 0x57) updateStat("UP", pressed);
            else if (keyCode == 0x28 || keyCode == 0x53) updateStat("DOWN", pressed);
            else if (keyCode == 0x25 || keyCode == 0x41) updateStat("LEFT", pressed);
            else if (keyCode == 0x27 || keyCode == 0x44) updateStat("RIGHT", pressed);
        }
 
        // Key down event
        window.onkeydown = function(e)
        {
            attributeAction(e.keyCode, true);
            e.preventDefault();
        };
 
        // Key up event
        window.onkeyup = function(e)
        {
            attributeAction(e.keyCode, false);
            e.preventDefault();
        };
 
        // Loop implementation
        function loop()
        {
            // Time manager
            var lastTime = new Date().getTime();
            var secTime = lastTime, frames = 0;
 
            var gameTime =
            {
                total : 0,
                elapsed : 0,
                ticks : 0,
                fps : 0
            };
 
            // Game loop
            var thread = setInterval(function()
            {
                var now = new Date().getTime();
                gameTime.elapsed = now - lastTime;
                gameTime.total += gameTime.elapsed;
                lastTime = now;
 
                gameTime.ticks++;
                game.update(gameTime, actionStats, 0, 0);
 
                now = new Date().getTime();
                if (now - secTime > 1000)
                {
                    gameTime.fps = frames;
                    frames = 0;
                    secTime = now;
                }
                frames++;
 
                ctx.setTransform(1, 0, 0, 1, 0, 0);
                ctx.clearRect(0, 0, cvs.width, cvs.height);
                ctx.scale(2, 2);
                game.render();
                ctx.fillText("Total " + gameTime.total + "ms", 10, 20);
                ctx.fillText("Elapsed " + gameTime.elapsed + "ms", 10, 30);
                ctx.fillText("Ticks " + gameTime.ticks, 10, 40);
                ctx.fillText("FPS " + gameTime.fps, 10, 50);
            }, 20);
 
            window.onunload = function()
            {
                clearInterval(thread);
            }
        }
 
        // Game initialize
        var game = new Game();
        game.init(loop);
    }
    else alert("Update your browser for play the game.");
};
game.js (contient plus rien parce que j'ai tout supprimé)
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
function Game()
{		
		this.init = function(callback)
		{
		}
 
		this.update = function(gameTime, actions, w, h)
		{
		}
 
		this.render = function(ctx)
		{
		}
}
Désolé pour les puristes du JS je suis sûr que mon code est très loin d'être propre mais ça fait même pas 3 jours que je suis dessus.

Bref, maintenant c'est la partie ou je suis bloqué je ne sais pas comment représenté l'écran de titre, l'écran de chargement puis les niveaux.

Pour les niveaux j'ai fait un essai avec les deux fichiers ci-dessous.

level.js (contient une fonction permettant de charger un niveau puis de stocker le résultat dans l'argument nommé level).
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
function Level()
{}
 
Level.load = function(level, path, callback)
{
	var lvlTag = document.getElementById("lvl");
 
	if (lvlTag)
	{
		document.getElementsByTagName("head")[0].removeChild(lvlTag);
		lvlTag = null;
	}
 
	lvlTag = document.createElement("script");
	lvlTag.id = "lvl";
	lvlTag.type = "text/javascript";
	lvlTag.onload = function()
	{
		var sizeQueue = levelData.patternTables.length;
 
		for (var i = 0; i < levelData.patternTables.length; i++)
		{					
			var src = levelData.patternTables[i];
			levelData.patternTables[i] = new Image();
			levelData.patternTables[i].onload = function()
			{
				if (--sizeQueue == 0)
				{
					for (var prop in levelData)
					{
						level[prop] = levelData[prop];
						levelData[prop] = null;
					}
					levelData = null;
					callback();
				}
			};
			levelData.patternTables[i].src = src;
		}
	};
	lvlTag.src = path;
	document.getElementsByTagName("head")[0].appendChild(lvlTag);
};
lvl_0.js (contient les données du niveau à charger)
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
var levelData =
{
    // Nom du niveau
    name : "Start level",
 
    // L'image a charger contenant les éléments graphiques nécessaires.
    patternTables : ["img/pt0.png"],
 
    // pt = ID de patternTable
    // xo, yo = X, Y offset
    // w, h = width, height
    sprites : [
        { pt : 0, xo : 0, yo : 0, w : 48, h : 32, frames : 3 },
        { pt : 0, xo : 0, yo : 32, w : 16, h : 16 }
    ],
 
    enemies : [
        { x : 0, y : 0, sprite : 0 },
        { x : 10, y : 0, sprite : 1 }
    ],
 
    tiles : [
    ],
 
    map : [
    ]
};
Maintenant dans la configuration actuelle, je ne sais pas du tout comment faire pour finir le reste.

Quand j'y réfléchis à savoir si je dois utiliser des tableaux, des objets, des varibables globales, etc je ne sais plus ou donner de la tête est à ce point là pour moi tout devient compliqué.

C'est assez frustrant à ce moment parce que je ne sais plus quoi faire à part tout recommencer. Cela fait déjà deux fois que je repart de zéro mais je crois que là j'ai vraiment, vraiment besoins d'aide.

Merci d'avance

Cordialement,

Firepolo