Jeux en canvas et javascript [Résolu]

Signaler
-
 Utilisateur anonyme -
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>


EDIT: Ajout de la coloration syntaxique.

2 réponses

Messages postés
1770
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
13 novembre 2020
107
bonjour

essai ca


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>

    <script>
var largeur = 600;
var hauteur = 350;
var canvas;
var context;
var x = 100;
var unit = 5;
var hauteur_alien=unit*7
var bras_en_bas = true;
    
var tb_y=[-hauteur_alien,-hauteur_alien-50,-hauteur_alien-100]
  
        function affiche_alien (y) {

     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 animate () {
    
    context.clearRect(0, 0, largeur, hauteur);
  
      for (var i=0 ; i < tb_y.length ; i++){

            tb_y[i]+= 10;

            if (tb_y[i] > hauteur) {
                tb_y[i] = -(unit*7);
            }

            affiche_alien(tb_y[i]);
   
   }
        }
  
  
  
        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);
        }

window.addEventListener("load",initialisations, false);
    </script>

</head>


<body>

    <canvas id="canvas" style='background:gray'></canvas>


 <button onclick='affiche_alien()'>appui</button>
 
</body>


</html>


rien ne sert de courir il faut partir a point.
cours Forest cours !

Bonjour Kazma,

J'ai testé ton code, il marche très bien.

Merci bcp de me répondre!