Question

我有一个用javascript和html编码的弹跳球模拟。我需要通过在文本框中输入值来更新一些变量（重力和弹跳因子），然后单击按钮以刷新画布并使用新参数弹回球。这是我的代码。

var canvas = document.getElementById("canvas"),
  ctx = canvas.getContext("2d");

var W = 1300,
  H = 450;

canvas.height = H;
canvas.width = W;

var ball = {},
  gravity = 0.2,
  bounceFactor = 0.7;

$('#update').click(function() {
  gravity = document.getElementById('grav').value;
  bounceFactor = document.getElementById('bounce').value;
  document.getElementById('setgrav').value = gravity;
  document.getElementById('setbounce').value = bounceFactor;
  update();
  setInterval(update, 1000 / 60);
});

ball = {
  x: 0,
  y: 0,
  radius: 15,
  color: "red",
  // Velocity components
  vx: 2,
  vy: 1,
  draw: function() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
    ctx.fillStyle = this.color;
    ctx.fill();
    ctx.closePath();
  }
};

function clearCanvas() {
  ctx.clearRect(0, 0, W, H);
}

function update() {
  clearCanvas();
  ball.draw();

  ball.y += ball.vy;
  ball.x += ball.vx;
  ball.vy += gravity;

  if (ball.y + ball.radius > H) {
    ball.y = H - ball.radius;
    ball.vy *= -bounceFactor;
  }
}

setInterval(update, 1000 / 60);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  Gravity
  <input type="text" name="grav" id="grav" value="" />
  <p>
    Bounce
    <input type="text" name="bounce" id="bounce" value="" />
    <p>
      Set Gravity
      <input type="text" name="setgrav" id="setgrav" value="" />
      <p>
        Set Bounce
        <input type="text" name="setbounce" id="setbounce" value="" />
        <p>

</form>
<button id="update">Update</button>
<canvas id="canvas" style="display:block;
    border: 1px solid blue;
    margin:50px auto;">

</canvas>

它不起作用。当我点击更新。画布空白。我做错了什么？感谢

更新的问题：

如果我需要使用球的图像而不是使用Javascript绘制球，该怎么办？

Answer 1

不是分配字符串的实际值，而是将解析为float的值分配给变量。

gravity = parseFloat(document.getElementById('setgrav').value);
bounceFactor = parseFloat(document.getElementById('setbounce').value);

现在，无论何时单击更新，都会更新值。我假设其ID中具有set的元素是用于设置重力和反弹值的元素。

Answer 2

感谢@Akash的帮助，您的解决方案得到了帮助。它更新了值但我还必须重置球属性，以便在我点击更新后从头开始弹跳。下面是更新函数的Javascript代码

$('#update').click(function(){

gravity = parseFloat(document.getElementById('grav').value);
bounceFactor = parseFloat(document.getElementById('bounce').value);

document.getElementById('setgrav').value = gravity;
document.getElementById('setbounce').value = bounceFactor;

ball = {
    x: 0,
    y: 0,

    radius: 15,
    color: "red",

    // Velocity components
    vx: 2,
    vy: 1,

    draw: function() {

        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, false);
        ctx.fillStyle = this.color;
        ctx.fill();
        ctx.closePath();
    }
};


update();

});

Answer 3

表单的控件在开始时没有值（=== undefined），所以当你更新时，你会让一个/几个未定义的值泄漏到你的代码中。您可能知道，这不会打破程序，在这种情况下它将停止显示。

两个修正：
•初始化控件，使其具有有效值。它还将帮助用户了解值的数量级 •仅在进行一些基本验证后更新变量值。

{{1}}

刷新html画布而不刷新页面

3 个答案: