Question

在下面的代码中，我编写一个画布并显示一个随着游戏进展而增长的红色块。这一切都奏效了！直到，我为我最初（更简单）的游戏循环添加了一个简单的游戏循环。原始版本刚刚更新，渲染和重新启动。无论计算机/浏览器的速度有多快，现代更新的Counts都能让它以一致的速度运行。谁能解释为什么会这样？这是用于设置所有内容的简单html：

<html>

<head>
  <meta charset="utf-8">
  <title>Christmas Town</title>
  <style>
    canvas {
      display: block;
      position: fixed;
      margin: auto;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
  </style>

</head>

<body>

  <script src="game.js"></script>

</body>

</html>

这是应该创建画布和游戏循环的JavaScript：

var canvas, context, keyState;
var width = 0;

function tick() {
    "use strict";
    console.log(5 + 6);
    if (width < canvas.getWidth()) {
        width += 1;
    }
}

function render() {
    "use strict";
    context.fillStyle = "#FF0000";
    context.fillRect(canvas.width, canvas.height, 0, 0);
    context.save();
    context.fillRect(width, 15, 0, 0);
    context.restore();
}

function getTimeMillis() {
    "use strict";
    return window.performance && window.performance.now ? window.performance.now : new Date.getTime();
}

var FPS = 60, startTime, dt = 0, lastTime = getTimeMillis(), targetTime = 1 / FPS;
function frame() {
    "use strict";
    startTime = getTimeMillis();
    dt = dt + Math.min(1, ((startTime - lastTime) / 1000));
    while (dt < targetTime) {
        dt -= targetTime;
        tick();
    }
    render();
    lastTime = startTime;
    window.requestAnimationFrame(frame, canvas);
}

function main() {
    "use strict";
    canvas = document.createElement("canvas");
    canvas.width = 500;
    canvas.height = 500;

    context = canvas.getContext("2d");
    document.body.appendChild(canvas);
    window.requestAnimationFrame(frame, canvas);
}

main();

奇怪的部分是它甚至没有登录到控制台，并且没有错误！但是，我似乎无法弄清楚为什么没有任何错误就不会调用tick。请帮忙！

Answer 1

不确定这是否是你想要的但是检查出来。 https://jsfiddle.net/jnsLfwde/

我改变了一些事情。

context.fillRect( 0, 0, width, 15);

fillRect的参数是fillRect（x，y，width，height）。你有（宽度，高度，x，y）;

我将小于号码反转为大于。在我这样做之前，没有调用Tick（）。

(dt > targetTime)

你提到动画重启或其他什么，所以我添加了这个。

if (width < canvas.width) 
    width += 1;
else
    width = 0;

JavaScript游戏循环不显示画布

1 个答案: