trying to create a simple game in javascript

Question

//Minimal

    function dibujarAsteroide(x, y){     
            var fondo = document.getElementById("fondo");     
            var ctx = fondo.getContext("2d");     
            var asteroide = document.getElementById("asteroide");     
            y = 0;     
            x = Math.floor((Math.random() * 600) + 1);    
            ctx.drawImage(asteroide, x, y);      
            
            }
            
            function moverAsteroide(){     
                setInterval(dibujarAsteroide, 500);    
                var datosAsteroide = document.getElementById("asteroide");    
                datosAsteroide.style.top = 700 + "px";   
            }   

//Verificable
    <body>
            <section>      
                <canvas id="fondo" width = "600" height = "600"></canvas>     
                  <div>   
                  <img src="img/nave.png" id="nave"/>   
                  <img src="img/asceroide.png" id="asteroide"/>   
                  </div>   
                
                
            </section>   
        </body>   
        
        <script>     
          
            fondo=document.getElementById("fondo");   
            fondo.onclick=moverNave;   
            
            
            
            function moverNave(evento)   
            {     
             var nave=document.getElementById("nave");    
               x=evento.clientX;   
               y=evento.clientY;    
               
               if (x>=700 || y>=500){   
                 alert("fuera del espacio");   
               }   
               else    
               {      
                   nave.style.left=x+"px";    
                   nave.style.top=y+"px";    
               }    
               
            }   
            
            
            function dibujarAsteroide(x, y){    
                 var fondo = document.getElementById("fondo");
                 var ctx = fondo.getContext("2d");
                 var asteroide = document.getElementById("asteroide");
                 y = 0;
                 x = Math.floor((Math.random() * 600) + 1);
                 ctx.drawImage(asteroide, x, y);
            
            }
            
            function moverAsteroide(){
                setInterval(dibujarAsteroide, 500);
                var datosAsteroide = document.getElementById("asteroide");
                datosAsteroide.style.top = 700 + "px";
            }
            
            
        </script>

/*Complete
This is the script*/

<!DOCTYPE html>
<html lang = "es">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css/estilos.css">
        <title>Nave</title>
    </head>
    
    <body>
        
        <section>
            <canvas id="fondo" width = "600" height = "600"></canvas>
              <div>
              <img src="img/nave.png" id="nave"/>
              <img src="img/asceroide.png" id="asteroide"/>
              </div>
            
            
        </section>
    </body>
    
    <script>
      
        fondo=document.getElementById("fondo");
        fondo.onclick=moverNave;
        
        
        
        function moverNave(evento)
        {
         var nave=document.getElementById("nave");
           x=evento.clientX;
           y=evento.clientY;
           
           if (x>=700 || y>=500){
             alert("fuera del espacio");
           }
           else
           {
           nave.style.left=x+"px";
           nave.style.top=y+"px";
           }
           
        }
        
        
        function dibujarAsteroide(x, y){
        var fondo = document.getElementById("fondo");
        var ctx = fondo.getContext("2d");
        var asteroide = document.getElementById("asteroide");
        y = 0;
        x = Math.floor((Math.random() * 600) + 1);
        ctx.drawImage(asteroide, x, y);
        
        }
        
        function moverAsteroide(){
            setInterval(dibujarAsteroide, 500);
            var datosAsteroide = document.getElementById("asteroide");
            datosAsteroide.style.top = 700 + "px";
        }
        
        
    </script>
        
    
</html>

//This the css code
#fondo
{
    width: 600px;
    height: 600px;
    background-image: url("../img/space.jpg");
    background-repeat: no-repeat;
    
}
#nave{
    position: absolute;
    left:375px;
    top: 300px;
    transition-duration: 1s;
}

#asteroide{
    width:20px;
    height: 20px;
    transition-duration: 5s;
    

}

The first function is supposed to draw the asteroid in a random location on top of the canvas. The second one has to move it simulating a fall, I'm using transition property in my css to make the duration of the fall 3 seconds.

The problem

The asteroids didn't appeare randomly, it was only one and far out of the canvas. Is there anything wrong with the drawing function?

You have forgotten to ask the actual question though. What's your problem? — nicael
– nicael, Commented Apr 6, 2018 at 18:34
oh sorry I totally forgot about the main question. The asteroids didn't appeare randomly, it was only one and far out of the canvas. is there anything wrong with the drawing function? — Miguel
– Miguel, Commented Apr 6, 2018 at 18:35
And FYI - you can just indent code by 4 spaces instead of trying to wrap every line with back ticks and also you should edit the question to ask your question. — takendarkk
– takendarkk, Commented Apr 6, 2018 at 18:37
Please provide a minimal reproducible example so we can test it out. — takendarkk
– takendarkk, Commented Apr 6, 2018 at 18:38
I tried to add everything that I used, please let me know if I'm missing something, I'm new and I'm trying to learn as fast as I can . Thank you in advance. — Miguel
– Miguel, Commented Apr 6, 2018 at 18:58

André Dion · Accepted Answer · 2018-04-06 18:43:53Z

1

You have a typo: setInterval('drawAsteroid', 500); should be setInterval(drawAsteroid, 500); or setInterval('drawAsteroid()', 500);

answered Apr 6, 2018 at 18:43

André Dion

21.8k7 gold badges59 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Miguel Over a year ago

Thank you, but it wasn't the problem, I updated with more code to improve the context.

Miguel Over a year ago

I'm really sorry, I tried both of your solutions but none worked, I have been trying everything but nothing seems to work and i'm starting to get really nervous.

Collectives™ on Stack Overflow

trying to create a simple game in javascript

The problem

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

The problem

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related