Question

我想在屏幕上随机移动这个红色矩形，如果我点击它，它就会掉下来。我只需要在javascript中使用此代码，请不要使用jQuery。

<html>
    <head>
    </head>
    <body>
        <canvas id="myCanvas" width="1280" height="600" style="border:1px solid #d3d3d3;color:red;"></canvas>
        <p>the main purpose of this code is i need to move this div randomlly and if i click on it it will fall down ,
                i need this code in javascript only , no jquery,please help</p>
    <script>   
            var i = 0 ;
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            //var f = Math.floor(1+Math.random()*1280)
            //var f2 = Math.floor(1+Math.random()*600)
            //ctx.translate(f, f2);
            //ctx.fillRect(10, 10, 100, 50);
        var s = true;
        while(s = true){
            var f = Math.floor(1+Math.random()*1280);
            var f2 = Math.floor(1+Math.random()*600);
            ctx.fillStyle="#FF0000";
            ctx.translate(f, f2);
            ctx.fillRect(10, 10, 100, 50); 
            var w = document.getElementById("myCanvas");
                w.onclick = true;
            if (w.onclick = true){
                s = false;falling();}
            else(){continue;}}
        function falling(){
            s = false;
        }              
    </script>
    </body>
</html>

Answer 1

您的代码中存在一些错误，无论是语法错误还是逻辑错误：

else()其他不是函数
while(s = true)查看@ yasuyuki-uno的评论
您宣布var i不使用

然后你有一个无限循环，浏览器锁定速度太快。您需要改为使用setInterval()。

固定版本如下所示：

  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var w = document.getElementById("myCanvas");
  timer = setInterval(function() { 

        var f = Math.floor(1+Math.random()*680);
        var f2 = Math.floor(1+Math.random()*400);
      console.log (f, f2);

        ctx.fillStyle="#FF0000";
        ctx.clearRect(0, 0, c.width, c.height);
        ctx.fillRect(f, f2, 100, 50); 
        w.onclick = function() {
            clearInterval(timer);
            falling();
        } 
     }, 100)
    function falling(){
       // do something here
    }

另见the JSBin。

但是，在使用包含语法错误的代码之前，请转到类似http://www.jslint.com/的内容并首先检查您的代码。

while循环不起作用，仅限javascript

1 个答案: