Question

我想在按键上随机移动一个对象（空格键是特定的）。但是，我是JS的新手。我无法实现完全随机性。有人可以帮助我实现这个代码吗？而且，当我按空格键时图像更大，但是当我使用鼠标时图像变小。我希望图像总是很小。

编辑1：为了实现随机性，我使用了一些绝对值。所以随机性有一个范围。我想删除对绝对值的依赖。

当我使用鼠标向上，向下事件时，图像变小。

<!doctype html>
<html>

<head>
  <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <style>
    body {}
    
    canvas {
      border: 1px;
    }
  </style>

  <script>
    $(function() {


      var img = new Image();
      img.onload = function() {
        ctx.drawImage(img, 0, 0);
      };
      img.src = "http://www.earthtimes.org/newsimage/eating-apples-extended-lifespan-test-animals-10-per-cent_183.jpg";

      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      var canvasOffset = $("#canvas").offset();
      var offsetX = canvasOffset.left;
      var offsetY = canvasOffset.top;
      var canvasWidth = canvas.width;
      var canvasHeight = canvas.height;
      var isDragging = false;


function handleMouseDown(e){
  canMouseX=parseInt(e.clientX-offsetX);
  canMouseY=parseInt(e.clientY-offsetY);
  // set the drag flag
  isDragging=true;
    }

function handleMouseUp(e){
  canMouseX=parseInt(e.clientX-offsetX);
  canMouseY=parseInt(e.clientY-offsetY);
  // clear the drag flag
  isDragging=false;
}

function handleMouseOut(e){
  canMouseX=parseInt(e.clientX-offsetX);
  canMouseY=parseInt(e.clientY-offsetY);
  // user has left the canvas, so clear the drag flag
   //isDragging=false;
}

      function handleMouseMove(e) {
        canMouseX = parseInt(e.clientX - offsetX);
        canMouseY = parseInt(e.clientY - offsetY);
        // if the drag flag is set, clear the canvas and draw the image
        if (isDragging) {
          ctx.clearRect(0, 0, canvasWidth, canvasHeight);
          ctx.drawImage(img, canMouseX - 128 / 2, canMouseY - 120 / 2, 128, 120);
        }
      }

      function handleKeyPress(e) {

        if (e.which == 32) {
          canKeybX = Math.random() * 500 * Math.random();
          canKeybY = Math.random() * 400 * Math.random();
          ctx.clearRect(0, 0, canvasWidth, canvasHeight);
          ctx.drawImage(img, canKeybX, canKeybY);
        }

      }
      

      $("#canvas").mousedown(function(e){handleMouseDown(e);});
      $("#canvas").mouseout(function(e){handleMouseOut(e);});
      $("#canvas").mouseup(function(e){handleMouseUp(e);});
      $("#canvas").mousemove(function(e) {
        handleMouseMove(e);
      });
      $("#canvas").keydown((function(e) {
        handleKeyPress(e);
      }));

    }); // end $(function(){});
  </script>

</head>

<body>
  <canvas id="canvas" width=1300 height=800 tabindex='1'></canvas>
</body>

</html>

Answer 1

如果你想要这个，你必须永远设置你的128, 120。您只需在鼠标移动时设置此宽度和高度。也许你应该根据用户的屏幕尺寸来确定宽度和高度，例如window.innerWidth

var img = new Image();
      img.onload = function() {
        ctx.drawImage(img, 0, 0, 128, 120);
      };
      img.src = "http://www.earthtimes.org/newsimage/eating-apples-extended-lifespan-test-animals-10-per-cent_183.jpg";

      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      var canvasOffset = $("#canvas").offset();
      var offsetX = canvasOffset.left;
      var offsetY = canvasOffset.top;
      var canvasWidth = canvas.width;
      var canvasHeight = canvas.height;
      var isDragging = false;


function handleMouseDown(e){
  canMouseX=parseInt(e.clientX-offsetX);
  canMouseY=parseInt(e.clientY-offsetY);
  // set the drag flag
  isDragging=true;
    }

function handleMouseUp(e){
  canMouseX=parseInt(e.clientX-offsetX);
  canMouseY=parseInt(e.clientY-offsetY);
  // clear the drag flag
  isDragging=false;
}

function handleMouseOut(e){
  canMouseX=parseInt(e.clientX-offsetX);
  canMouseY=parseInt(e.clientY-offsetY);
  // user has left the canvas, so clear the drag flag
   //isDragging=false;
}

      function handleMouseMove(e) {
        canMouseX = parseInt(e.clientX - offsetX);
        canMouseY = parseInt(e.clientY - offsetY);
        // if the drag flag is set, clear the canvas and draw the image
        if (isDragging) {
          ctx.clearRect(0, 0, canvasWidth, canvasHeight);
          ctx.drawImage(img, canMouseX - 128 / 2, canMouseY - 120 / 2, 128, 120);
        }
      }

      function handleKeyPress(e) {

        if (e.which == 32) {
          canKeybX = Math.random() * 500 * Math.random();
          canKeybY = Math.random() * 400 * Math.random();
          ctx.clearRect(0, 0, canvasWidth, canvasHeight);
          ctx.drawImage(img, canKeybX, canKeybY, 128, 120);
        }

      }
      

      $("#canvas").mousedown(function(e){handleMouseDown(e);});
      $("#canvas").mouseout(function(e){handleMouseOut(e);});
      $("#canvas").mouseup(function(e){handleMouseUp(e);});
      $("#canvas").mousemove(function(e) {
        handleMouseMove(e);
      });
      $("#canvas").keydown((function(e) {
        handleKeyPress(e);
      }));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width=1300 height=800 tabindex='1'></canvas>

Answer 2

嗯，这个版本适合我。添加imgWidth imgHeight变量，而不是数值，为每个画布重绘添加宽度和高度，并在按键上固定img的定位。

＆＃13;

    <!doctype html>
    <html>
    
    <head>
      <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
      <style>
        body {}
        
        canvas {
          border: 1px;
        }
    
      </style>
    
      <script>
        $(function() {
    
          var imgWidth = 128;
          var imgHeight = 120;
    
          var img = new Image();
          img.onload = function() {
            ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
          };
          img.src = "http://www.earthtimes.org/newsimage/eating-apples-extended-lifespan-test-animals-10-per-cent_183.jpg";
          var canvas = document.getElementById("canvas");
          var ctx = canvas.getContext("2d");
          var canvasOffset = $("#canvas").offset();
          var offsetX = canvasOffset.left;
          var offsetY = canvasOffset.top;
          var canvasWidth = canvas.width;
          var canvasHeight = canvas.height;
          var isDragging = false;
    
    
    function handleMouseDown(e){
      canMouseX=parseInt(e.clientX-offsetX);
      canMouseY=parseInt(e.clientY-offsetY);
      // set the drag flag
      isDragging=true;
        }
    
    function handleMouseUp(e){
      canMouseX=parseInt(e.clientX-offsetX);
      canMouseY=parseInt(e.clientY-offsetY);
      // clear the drag flag
      isDragging=false;
    }
    
    function handleMouseOut(e){
      canMouseX=parseInt(e.clientX-offsetX);
      canMouseY=parseInt(e.clientY-offsetY);
      // user has left the canvas, so clear the drag flag
       //isDragging=false;
    }
    
          function handleMouseMove(e) {
            canMouseX = parseInt(e.clientX - offsetX);
            canMouseY = parseInt(e.clientY - offsetY);
            // if the drag flag is set, clear the canvas and draw the image
            if (isDragging) {
              ctx.clearRect(0, 0, canvasWidth, canvasHeight);
              ctx.drawImage(img, canMouseX - (imgWidth / 2), canMouseY - (imgHeight / 2), imgWidth, imgHeight);
            }
          }
    
          function handleKeyPress(e) {
    
            if (e.which == 32) {
              canKeybX =  (canvasWidth-imgWidth) * Math.random();
              canKeybY = (canvasHeight-imgHeight) * Math.random();
              ctx.clearRect(0, 0, canvasWidth, canvasHeight);
              ctx.drawImage(img, canKeybX, canKeybY, imgWidth, imgHeight);
            }
    
          }
          
    
          $("#canvas").mousedown(function(e){handleMouseDown(e);});
          $("#canvas").mouseout(function(e){handleMouseOut(e);});
          $("#canvas").mouseup(function(e){handleMouseUp(e);});
          $("#canvas").mousemove(function(e) {
            handleMouseMove(e);
          });
          $("#canvas").keydown((function(e) {
            handleKeyPress(e);
          }));
    
        }); // end $(function(){});
      </script>
    
    </head>
    
    <body>
      <canvas id="canvas" width=1300 height=800 tabindex='1'></canvas>
    </body>
    
    </html>

＆＃13;

在按键

2 个答案: