Question

我尝试开发手机游戏。以下问题：矩形，您可以在代码中看到的应该是动画。这意味着它应该来自上方并运行到底部等等。如果我运行此代码全部绘制，但矩形不移动。我不知道错误在哪里。

＆＃13;

window.onload = window.onresize = function() {
  var C = 1; // canvas width to viewport width ratio
  var W_TO_H = 2 / 1; // canvas width to canvas height ratio
  var el = document.getElementById("myCanvas");


  var viewportWidth = window.innerWidth;
  var viewportHeight = window.innerHeight;

  var canvasWidth = viewportWidth * C;
  var canvasHeight = canvasWidth / W_TO_H;
  el.style.position = "fixed";
  el.setAttribute("width", canvasWidth);
  el.setAttribute("height", canvasHeight);
  el.style.top = (viewportHeight - canvasHeight) / 2;
  el.style.left = (viewportWidth - canvasWidth) / 2;
  var x = canvasWidth / 100;
  var y = canvasHeight / 100;

  window.ctx = el.getContext("2d");
  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
  // draw triangles


  function init() {
    return setInterval(main_loop, 10);
  }

  function draw() {
    recty = canvasHeight / 100 * 20;
    rectheight = canvasHeight / 100 * 30;
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
    // draw rect
    ctx.beginPath();
    fillStyle = "#000000";
    ctx.rect(x * 30, recty, x * 20, rectheight);
    ctx.fill();
    // draw triangles
    ctx.beginPath();
    ctx.moveTo(x * 90, y * 50);
    ctx.lineTo(x * 99, y * 75);
    ctx.lineTo(x * 99, y * 25);
    ctx.closePath();
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(x * 10, y * 50);
    ctx.lineTo(x * 1, y * 25);
    ctx.lineTo(x * 1, y * 75);
    ctx.closePath();
    ctx.stroke();
    // ballx
    ballx = canvasWidth / 100;
    // draw ball
    ctx.beginPath();
    ctx.fillStyle = "#FF4422";
    ctx.arc(ballx * 50, y * 50, x * 5, 0, 2 * Math.PI);
    ctx.fill();
  }

  function update() {
    recty += 1;
    if (recty > canvasHeight) {
      recty = -rectheight;
    }
    if (recty > canvasHeight) {
      recty -= 1;
    }
  }

  function main_loop() {
    draw();
    update();    
  }
  
  init();
}

＆＃13;

<html>

<head>
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1">
  <style>
  </style>
</head>

<body>
  <div="gameArea">
    <canvas id="myCanvas"></canvas>
    </div>
</body>

</html>

＆＃13;

Answer 1

您的update函数更改了recty，但随后会在draw的第一行覆盖。

recty = canvasHeight / 100 * 20;

我刚刚将此行从draw移至init。

＆＃13;

window.onload = window.onresize = function() {
  var C = 1; // canvas width to viewport width ratio
  var W_TO_H = 2 / 1; // canvas width to canvas height ratio
  var el = document.getElementById("myCanvas");


  var viewportWidth = window.innerWidth;
  var viewportHeight = window.innerHeight;

  var canvasWidth = viewportWidth * C;
  var canvasHeight = canvasWidth / W_TO_H;
  el.style.position = "fixed";
  el.setAttribute("width", canvasWidth);
  el.setAttribute("height", canvasHeight);
  el.style.top = (viewportHeight - canvasHeight) / 2;
  el.style.left = (viewportWidth - canvasWidth) / 2;
  var x = canvasWidth / 100;
  var y = canvasHeight / 100;

  window.ctx = el.getContext("2d");
  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
  // draw triangles


  function init() {
    recty = canvasHeight / 100 * 20;
    return setInterval(main_loop, 10);
  }

  function draw() {
    rectheight = canvasHeight / 100 * 30;
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
    // draw rect
    ctx.beginPath();
    fillStyle = "#000000";
    ctx.rect(x * 30, recty, x * 20, rectheight);
    ctx.fill();
    // draw triangles
    ctx.beginPath();
    ctx.moveTo(x * 90, y * 50);
    ctx.lineTo(x * 99, y * 75);
    ctx.lineTo(x * 99, y * 25);
    ctx.closePath();
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(x * 10, y * 50);
    ctx.lineTo(x * 1, y * 25);
    ctx.lineTo(x * 1, y * 75);
    ctx.closePath();
    ctx.stroke();
    // ballx
    ballx = canvasWidth / 100;
    // draw ball
    ctx.beginPath();
    ctx.fillStyle = "#FF4422";
    ctx.arc(ballx * 50, y * 50, x * 5, 0, 2 * Math.PI);
    ctx.fill();
  }

  function update() {
    recty += 1;
    if (recty > canvasHeight) {
      recty = -rectheight;
    }
    if (recty > canvasHeight) {
      recty -= 1;
    }
  }

  function main_loop() {
    draw();
    update();    
  }
  
  init();
}

＆＃13;

<html>

<head>
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1">
  <style>
  </style>
</head>

<body>
  <div="gameArea">
    <canvas id="myCanvas"></canvas>
    </div>
</body>

</html>

＆＃13;

Javascript动画矩形

1 个答案: