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;


}

第一个函数应该在画布顶部的随机位置绘制小行星。第二个必须移动它模拟一个秋天，我在我的CSS中使用过渡属性使持续时间为3秒。

问题

小行星没有随机出现，它只有一个远离画布。绘图功能有什么问题吗？

Answer 1

你有一个拼写错误：setInterval('drawAsteroid', 500);应为setInterval(drawAsteroid, 500);或setInterval('drawAsteroid()', 500);

试图在javascript中创建一个简单的游戏

问题

1 个答案: