Question

我只是想做一个反应测试器游戏，每次用户点击形状时都会出现圆形或矩形。它应该会永远出现。我的问题是，形状只出现一次，然后再也不会出现，尽管功能负责显示第一次工作的形状然后再也不会工作。我能知道原因吗？

<!doctype html>
<html>
  <head>
    <title>Randomness Game</title>
    <link rel="stylesheet" href="style.css" type="text/css">
  </head>
  <body>
    <h1>Test Your Reactions</h1>
    <p>Click on boxes and circles as quickly as you can</p>
    <h3>Your time : <span id="takentime"></span></h3>
    <canvas id="myCanvas" width="3000px" height="600px" ></canvas>

    <script>
      var start = new Date().getTime();
      appearafterdelay();
      document.getElementById('myCanvas').onclick = function(){
          document.getElementById("myCanvas").style.display = "none";
          var end = new Date().getTime();
          var timetaken = (end - start)/1000 ;
          document.getElementById("takentime").innerHTML = timetaken + " seconds";
          appearafterdelay(); //this is not working again !!
      }

      //my functions
      //appearafterdelay function
      function appearafterdelay(){
          setTimeout(makerandomshape,Math.random()*1500);
      }

      //make shape appear functions
      function makerandomshape(){
          var randomnumb = Math.round(Math.random()); //random number to choose between 0 & 1 so between circle & rectangular
          if (randomnumb == 0){
              drawRectangular();
          }else{
              drawCircle();
          }
      }

      //draw rectangular functions
      function drawRectangular(){
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        var centerx = Math.floor(Math.random()*300) + 400;
        var centery = Math.floor(Math.random()*300) + 110;
        var x = Math.floor(Math.random()*100) + 80 ;
        var y = Math.floor(Math.random()*100) + 80 ;
        ctx.fillStyle = getRandomColor();
        ctx.fillRect(centerx ,centery ,x ,y);
      }

      //draw circule function
      function drawCircle(){
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        var centerx = Math.floor(Math.random()*300) + 400;
        var centery = Math.floor(Math.random()*300) + 110;
        var radius = Math.floor(Math.random()*100) + 80;
        ctx.beginPath();
        ctx.arc(centerx, centery, radius, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.fillStyle = getRandomColor();
        ctx.fill();
      }

      //draw colored circle & rectangular functions
      function getRandomColor(){
        var letters = "0123456789ABCDEF";
        var color = "#";
        for(var i = 0 ; i < 6 ; i ++){
          color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
      }
    </script>
  </body>
</html>

Answer 1

当您调用click事件时，它会将画布显示设置为none。所以请尝试以下代码。

<!doctype html>
<html>
  <head>
    <title>Randomness Game</title>

  </head>
  <body>
    <h1>Test Your Reactions</h1>
    <p>Click on boxes and circles as quickly as you can</p>
    <h3>Your time : <span id="takentime"></span></h3>
    <canvas id="myCanvas" width="3000px" height="600px" ></canvas>

    <script>
      var start = new Date().getTime();
      appearafterdelay();
      var canvas=document.getElementById('myCanvas');
      var context = canvas.getContext("2d");
      document.getElementById('myCanvas').onclick = function(){
          document.getElementById("myCanvas").style.display = "none";
          var end = new Date().getTime();
          var timetaken = (end - start)/1000 ;
          document.getElementById("takentime").innerHTML = timetaken + " seconds";
          document.getElementById("myCanvas").style.display = "block";
          context.clearRect(0, 0, canvas.width, canvas.height);
          appearafterdelay(); //this is not working again !!
      }

      //my functions
      //appearafterdelay function
      function appearafterdelay(){
          setTimeout(makerandomshape,Math.random()*1500);
      }

      //make shape appear functions
      function makerandomshape(){
          var randomnumb = Math.round(Math.random()); //random number to choose between 0 & 1 so between circle & rectangular
          if (randomnumb == 0){
              drawRectangular();
          }else{
              drawCircle();
          }
      }

      //draw rectangular functions
      function drawRectangular(){
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        var centerx = Math.floor(Math.random()*300) + 400;
        var centery = Math.floor(Math.random()*300) + 110;
        var x = Math.floor(Math.random()*100) + 80 ;
        var y = Math.floor(Math.random()*100) + 80 ;
        ctx.fillStyle = getRandomColor();
        ctx.fillRect(centerx ,centery ,x ,y);
      }

      //draw circule function
      function drawCircle(){
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        var centerx = Math.floor(Math.random()*300) + 400;
        var centery = Math.floor(Math.random()*300) + 110;
        var radius = Math.floor(Math.random()*100) + 80;
        ctx.beginPath();
        ctx.arc(centerx, centery, radius, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.fillStyle = getRandomColor();
        ctx.fill();
      }

      //draw colored circle & rectangular functions
      function getRandomColor(){
        var letters = "0123456789ABCDEF";
        var color = "#";
        for(var i = 0 ; i < 6 ; i ++){
          color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
      }
    </script>
  </body>
</html>

取决于html5画布和javascript的功能不起作用

1 个答案: