JavaScript游戏循环不显示画布

Question

In the following code I program a canvas and display a red block that grows in width as the game progresses. 在下面的代码中，我对画布进行了编程，并显示了一个红色的块，该块的宽度随着游戏的进行而增长。 It all worked too! 一切都可行！ Until, I added a simple game loop to my originally (simpler) game loop. 直到我将一个简单的游戏循环添加到我的原始（更简单的）游戏循环中。 The original just updated, rendered, and restarted. 原始文件刚刚更新，渲染并重新启动。 The modern newer one Counts ticks and keeps it running at a consistent speed, no matter how fast the computer/browser. 不管计算机/浏览器有多快，现代的更新版Counts都会滴答作响，并保持一致的速度运行。 Can anyone explain why this is? 谁能解释为什么？ Here is the plain html to set up everything: 这是设置所有内容的纯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>

And here is the JavaScript which is supposed to create the canvas and Game Loop: 这是应该创建画布和游戏循环的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();

The weird part is it's not even logging to the console, and there are no errors! 奇怪的是，它甚至没有登录到控制台，也没有错误！ But, I cant seem to figure out why tick is not being called without there being any errors. 但是，我似乎无法弄清楚为什么没有任何错误就不会调用tick。 Please help! 请帮忙！

Answer 1

Not sure if this is what you wanted but check it out. 不知道这是否是您想要的，但请检查一下。 https://jsfiddle.net/jnsLfwde/ https://jsfiddle.net/jnsLfwde/

Couple things i changed. 几件事我改变了。

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

The parameters for fillRect are fillRect(x,y,width,height). fillRect的参数为fillRect（x，y，width，height）。 You had it as (width,height,x,y); 你有它作为（width，height，x，y）;

I reversed the less than sign to greater than. 我将小于号改为大于号。 Tick() wasn't being called until i did this. 直到我这样做，Tick（）才被调用。

(dt > targetTime)

You mentioned the animation restarting or something so i added this. 您提到动画重新启动或其他事情，所以我添加了它。

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

JavaScript游戏循环不显示画布

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-11-25 16:47:14

JavaScript游戏循环不显示画布

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-11-25 16:47:14

解决方案1
2 已采纳 2015-11-25 16:47:14