Sujet Précédent Sujet Suivant

Jeux en canvas et javascript

Résolu
Utilisateur anonyme - Modifié par kazma le 16/12/2014 à 18:32
 Utilisateur anonyme - 19 déc. 2014 à 14:53
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

Réponse 1 / 2
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
Modifié par kazma le 19/12/2014 à 14:27
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 !
1
Réponse 2 / 2
Utilisateur anonyme
19 déc. 2014 à 14:53
Bonjour Kazma,

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

Merci bcp de me répondre!
0

Discussions similaires

Taille de texte différentes selon canvas ou tBitmap
cs_nitrique -
ThWilliam -

10 réponses
Partie entiére d'un nombre
stephbb75 -
stephbb75 -

2 réponses
jeux multijoueur sur internet
svirpiren -
hnach -

10 réponses
integrer une variable javascript dans un lien hypertext
rabixpvb -
Stopub -

4 réponses
Jeu de grattage évolué
cs_cbastien -
cbastien -

4 réponses
Rejoignez-nous