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)
Comme vous pouvez le voir, j'importe les deux fichiers game.js et setup.js.
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>
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).
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
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."); };
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.
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) { } }
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).
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
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); };
Maintenant dans la configuration actuelle, je ne sais pas du tout comment faire pour finir le reste.
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 : [ ] };
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
Partager