11540 sujets

JavaScript, DOM et API Web HTML5

Jeux en canvas et javascript

Bonjour,
Je travaille sur un jeu qui s'appelle Space Invaders que vs connaissez probablement. Mon objectif est de dessiner des "Aliens" en utilisant canvas et Javascript. Je m'aimerai animer ces aliens dans un rectangle canvas pour qu'ils se déplacent verticalement de haut en bas. Un fois que les aliens disparaissent en bas, ils réapparaissent automatiquement en haut et continuent leurs mouvements.

J'ai réussit à le faire avec un seul "Alien", mais je n'arrive pas à le faire avec plusieurs "Aliens" que j'ai crée dans un tableau en JS avec leurs coordonnées (x,y).

Je travaille en HTML5 et Javascript. Je n'utilise pas de framework. Je travaille sur le navigateur "Google Chrome" et j'utilise "Mozila" pour pour faire des tests.

Je montre mes codes dans les deux cas de figures, en espérant que quelqu'un pourrait me donner un astuce. Merci!

Code canvas et Js avec un seul "Alien": 


<body onload="initialisations();"> 
 
<canvas id="canvas"></canvas> 
<script> 
var largeur = 600; 
var hauteur = 400; 
var canvas; 
var context; 
var x = 100; 
var y = 100; 
var unit = 7; 
var bras_en_bas = true; 
 
function affiche_alien () { 
 
if (bras_en_bas) { 
context.fillRect(x, y+4*unit, unit, 3*unit); 
context.fillRect(x+10*unit, y+4*unit, unit, 3*unit); 
bras_en_bas = false; 
} else { 
context.fillRect(x, y+1*unit, unit, 3*unit); 
context.fillRect(x+10*unit, y+1*unit, unit, 3*unit); 
bras_en_bas = true; 
} 
 
context.fillRect(x+2*unit, y+2*unit, 7*unit, unit); 
 
context.fillRect(x+1*unit, y+3*unit, unit, 2*unit); 
context.fillRect(x+9*unit, y+3*unit, unit, 2*unit); 
 
context.fillRect(x+2*unit, y, unit, unit); 
context.fillRect(x+8*unit, y, unit, unit); 
 
context.fillRect(x+2*unit, y+2*unit, unit, 5*unit); 
context.fillRect(x+8*unit, y+2*unit, unit, 5*unit); 
 
context.fillRect(x+3*unit, y+1*unit, unit, 2*unit); 
context.fillRect(x+7*unit, y+1*unit, unit, 2*unit); 
 
context.fillRect(x+4*unit, y+2*unit, 3*unit, 2*unit); 
 
context.fillRect(x+3*unit, y+4*unit, 5*unit, 2*unit); 
 
context.fillRect(x+3*unit, y+7*unit, 2*unit, unit); 
context.fillRect(x+6*unit, y+7*unit, 2*unit, unit); 
 
} 
 
function efface_alien () { 
context.clearRect(x, y, 11*unit, 8*unit); 
} 
 
function animate () { 
efface_alien(); 
 
y = y + 11*unit; 
 
if (y > hauteur) { 
y = 0; 
} 
 
affiche_alien(); 
} 
function initialisations () { 
canvas = document.getElementById('canvas'); 
// Définition taille canvas 
canvas.setAttribute('width', largeur); 
canvas.setAttribute('height', hauteur); 
 
context = canvas.getContext('2d'); 
 
var verticale = setInterval('animate();', 200); 
} 
</script> 
</body> 
 
Code canvas et Js pour pour afficher plusieur "Aliens": 
 
<body onload="initialisations();"> 
 
<canvas id="canvas"></canvas> 
<script> 
var largeur = 600; 
var hauteur = 400; 
var canvas; 
var context; 
var x = [28,127,222,300]; 
var y = [28,127,222]; 
var unit = 5; 
var bras_en_bas = true; 
 
function affiche_alien () { 
for (var i = 0; i < x.length; i++) { 
for (var j = 0; j < y.length; j++) { 
 
if (bras_en_bas) { 
context.fillRect(x[i], y[j] + 4*unit, unit, 3*unit); // Premier bras 
context.fillRect(x[i] + 10*unit, y[j] + 4*unit, unit, 3*unit); // Deuxieme bras 
bras_en_bas = false; 
} else { 
context.fillRect(x[i], y[j] + 1*unit, unit, 3*unit); // Premier pas 
context.fillRect(x[i] + 10*unit, y[j] + 1*unit, unit, 3*unit); // bras 2 
bras_en_bas = true; 
} 
 
context.fillRect(x[i] + 2*unit, y[j] + 2*unit, 7*unit, unit); 
 
context.fillRect(x[i] + 1*unit, y[j] + 3*unit, unit, 2*unit); 
context.fillRect(x[i] + 9*unit, y[j] + 3*unit, unit, 2*unit); 
 
context.fillRect(x[i] + 2*unit, y[j], unit, unit); 
context.fillRect(x[i] + 8*unit, y[j], unit, unit); 
 
context.fillRect(x[i] + 2*unit, y[j] + 2*unit, unit, 5*unit); 
context.fillRect(x[i] + 8*unit, y[j] + 2*unit, unit, 5*unit); 
 
context.fillRect(x[i] + 3*unit, y[j] + 1*unit, unit, 2*unit); 
context.fillRect(x[i] + 7*unit, y[j] + 1*unit, unit, 2*unit); 
 
context.fillRect(x[i] + 4*unit, y[j] + 2*unit, 3*unit, 2*unit); 
 
context.fillRect(x[i] + 3*unit, y[j] + 4*unit, 5*unit, 2*unit); 
 
context.fillRect(x[i] + 3*unit, y[j] + 7*unit, 2*unit, unit); 
context.fillRect(x[i] + 6*unit, y[j] + 7*unit, 2*unit, unit); 
} 
} 
} 
 
function efface_alien () { 
context.clearRect(x, y, 11*unit, 8*unit); 
} 
 
function animate () { 
efface_alien(); 
 
y[j] = y[j] + 11*unit; 
if (y[j] > hauteur) { 
y[j] = 0; 
} 
affiche_alien(); 
} 
 
function initialisations () { 
canvas = document.getElementById('canvas'); 
// Définition taille canvas 
canvas.setAttribute('width', largeur); 
canvas.setAttribute('height', hauteur); 
 
context = canvas.getContext('2d'); 
 
setInterval('animate();', 200); 
 
} 
</script> 
</body>
[/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i]
Modifié par dinolam (17 Dec 2014 - 14:24)
Bonjour dinolam et bienvenue sur le forum.

Tout d'abord, je ne saurais que trop te conseiller d'utiliser les balises de colorisation syntaxique pour que l'on puisse y voir plus clair dans ton code,

ensuite, concernant ton code justement, tu dois avoir une belle erreur dans ton débuggeur Chrome qui te dit qu'il ne connait pas ta variable "j" dans ta fonction animate() (erreur somme toute normale)

Je pense que ça pourrait commencer à régler ton soucis.
Modifié par SolidSnake (16 Dec 2014 - 09:34)
Bonjour SolidSnake,

Merci de m'avoir répondu. Oui tout à fait j'ai constaté l'erreur et je l'ai corrigé.
J'ai enlevé les "j" dans ma fonction animate et maintenant tout s'affiche normalement.
Seulement, mon souci demeure, mes "Aliens" ne bougent pas.
Voilà maintenant ma fonction animate, 


function animate () { 
efface_alien(); 

y = y + 11*unit; 
if (y > hauteur) { 
y = 0; 
} 
affiche_alien(); 
}
Bonjour SolidSnake,

Est-ce que tu sais pourquoi mon animation ne marche pas quand j'utilise les tableaux de coordonnées (x,y)?

Merci de me répondre, je suis bloqué. Je ne trouve pas d'astuces.
Sujet clos
Aller à