jeu goutte d'eau

1 mai 2018 à 21:42:41

Bonsoir, je réalise un jeu où des gouttes d'eau ou des pierres tombe aléatoirement dans des colonnes, le but étant de ramasser les gouttes avec un gobelet en évitant les pierres. J'ai donc programmer le défilement des gouttes et des pierre seulement la fonction aléatoire ne fonctionne que quand on refresh la page et j'ai pas trouver de solution pour que l'action s'effectue lorsque les images retrouvent la position -80. Merci de votre aide

code:

<html>
    <head>
        <title>La goutte</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/Style.css">
        
    </head>
    <body id="corps"> 
        
   
       
      <canvas id="canvas" width="590" height="720"> </canvas>
    <script>
        
      //accées aux éléments HTML 
       var moncanvas = document.getElementById("canvas");
        
        
        //création variables pour dessiner en 2d dans le plateau
        var ctx1 = moncanvas.getContext("2d");
        var ctx12 = moncanvas.getContext("2d");
        


       //variable aléatoire 
        var random = Math.floor(Math.random() * 3);

//colonne 1
        
    if (random <= 1){
    var goutte1 = new Image();
        goutte1.src= "images/eau.png";
        ctx1.drawImage(goutte1,330,-80);       
        var position_Y = -80;
               
        var bouge = function ()  {
     if (position_Y < 630){
            position_Y = position_Y + 10;
            ctx1.clearRect(330,0,60,720);           
            ctx1.drawImage(goutte1,330,position_Y); }                                                                                                                     
     else {
        position_Y = -80;
        }
        };
                setInterval( bouge, 60);}

    
    else{
           var pierre12 = new Image();
        pierre12.src= "images/pierre.png";
        ctx12.drawImage(pierre12,330,-80,60,80);       
        var position_Y = -80;
               
        var bouge = function ()  {
     if (position_Y < 630){
            position_Y = position_Y + 10;
            ctx12.clearRect(330,0,60,720);           
            ctx12.drawImage(pierre12,330,position_Y); }                                                                                                                     
     else {
        position_Y = -80;
        }
        };
                setInterval( bouge, 60);}
          </script> 
 </body>
</html>

-
Edité par LololaCastagne 1 mai 2018 à 21:43:42

Alexander M

2 mai 2018 à 0:46:30

Salut

Si tu déclare ta variable random au chargement de la page c'est normal quelle garde le même valeur.

Voila comment je le ferai

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <canvas id="game" width="400" height="300"></canvas>

    <script>
    
    const canvas = document.querySelector("#game"),
          context = game.getContext("2d"),
          width = canvas.width = 400,
          height = canvas.height = 300,
          sceneOBJ = [], // OBJ de la Scene
          obj_number = 3; // OBJ sur la Scene en meme temps

    // OBJ Goutte

    class Drop {
        constructor(options) {
            this.options = options;
            this.vy = Math.random() * (4 - 2) + 2
        }
        draw(context) {
            this.context = context
            this.context.fillStyle = "deepskyblue"
            this.context.fillRect(this.options.x, this.options.y, 40, 40)
        }
        move() {
            this.options.y += this.vy

            if(this.options.y > height + 50) {
                this.options.y = 0
                this.vy = Math.random() * (4 - 2) + 2
                this.options.x =Math.random() * ((width - 50) - 0) + 0
            }
        }
    }

    // OBJ Rocher

    class Rock {
        constructor(options) {
            this.options = options;
            this.vy = Math.random() * (5 - 3) + 3
        }
        draw(context) {
            this.context = context
            this.context.fillStyle = "gray"
            this.context.fillRect(this.options.x, this.options.y, 40, 40)
        }
        move() {
            this.options.y += this.vy

            if(this.options.y > height + 50) {
                this.options.y = 0
                this.vy = Math.random() * (5 - 3) + 3
                this.options.x =Math.random() * ((width - 50) - 0) + 0
            }
        }
    }


    class Render {
        // class render a finir
    }

    for(let i = 0; i < obj_number; i++) {
        sceneOBJ.push(new Drop({
            x: Math.random() * ((width - 50) - 0) + 0,
            y: 0 - 50
        }));
        sceneOBJ.push(new Rock({
            x: Math.random() * ((width - 50) - 0) + 0,
            y: 0 - 50
        }))
    }

    // Animation

    const animate = () => {

        context.clearRect(0, 0, width, height)

        for(let i = 0; i < sceneOBJ.length; i++) {
            sceneOBJ[i].draw(context)
            sceneOBJ[i].move()
        }

        requestAnimationFrame(animate)
    }

    // Start

    animate()

    </script>
</body>
</html>

la class Drop & Rock sont les même, créer une class maîtresse puis l’étendre au deux objets serai un plus au code.

Peace

-
Edité par Alexander M 2 mai 2018 à 0:48:00

LololaCastagne

2 mai 2018 à 12:37:32

Merci pour votre réponse mais ce que je voulais faire c’était une sorte de fonction random qui s’effectue lorque le y=0 et qui choisie soit la pierre soit la goutte

jeu goutte d'eau

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

jeu goutte d'eau

jeu goutte d'eau

Supprimer

Modérer

Signaler le message aux modérateurs