JavaScript游戏循环不显示画布_Javascript_Html_Canvas

JavaScript游戏循环不显示画布

javascript html canvas

JavaScript游戏循环不显示画布,javascript,html,canvas,Javascript,Html,Canvas,在下面的代码中，我编程了一个画布，并显示了一个随着游戏的进行而变宽的红色方块。这一切都奏效了！在之前，我在最初（更简单）的游戏循环中添加了一个简单的游戏循环。原始文件刚刚更新、渲染并重新启动。现代较新的电脑会计算滴答声，并保持它以一致的速度运行，无论电脑/浏览器的速度有多快。有人能解释为什么会这样吗？以下是用于设置所有内容的普通html： <html> <head> <meta charset="utf-8"> <title>Chris

在下面的代码中，我编程了一个画布，并显示了一个随着游戏的进行而变宽的红色方块。这一切都奏效了！在之前，我在最初（更简单）的游戏循环中添加了一个简单的游戏循环。原始文件刚刚更新、渲染并重新启动。现代较新的电脑会计算滴答声，并保持它以一致的速度运行，无论电脑/浏览器的速度有多快。有人能解释为什么会这样吗？以下是用于设置所有内容的普通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>


圣诞小镇
帆布{
显示：块；
位置：固定；
保证金：自动；
排名：0；
底部：0；
左：0；
右：0；
}

下面是用来创建画布和游戏循环的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();

var画布、上下文、键状态；
var宽度=0；
函数tick（）{
“严格使用”；
控制台日志（5+6）；
if（宽度


奇怪的是，它甚至没有登录到控制台，而且没有错误！但是，我似乎无法理解为什么在没有任何错误的情况下不调用tick。请帮忙
 不确定这是否是您想要的，但请检查一下
我改变了几件事
context.fillRect( 0, 0, width, 15);

fillRect的参数是fillRect（x、y、宽度、高度）。你有它作为（宽度，高度，x，y）
我把小于号改为大于号。直到我这样做，才调用Tick（）
(dt > targetTime)

你提到了动画重新启动之类的，所以我添加了这个
if (width < canvas.width) 
    width += 1;
else
    width = 0;

if（宽度
在一些地方缺少一些括号window.performance.now（）：new Date（）.getTime（）
和startTime=getTimeMillis（）dt在帧内为NaN（）。。检查变量声明和getTimeMillis（）方法一我正在使用括号作为IDE，认为这很有趣……无论如何，现在更改它。@EricGuan dt设置为0，它永远不会是NaN。当您将它分配给“dt+Math.min（1，…）时，它会变成NaN。可能是因为“startTime=getTimeMillis”中缺少括号，所以需要是getTimeMillis（）非常感谢你，伙计。如果你不能告诉XD，我相对来说是新的。无论如何，谢谢你。还有一件事。我怎么能阻止dt转向NaN，但仍然按min添加它呢？那么dt=NaN的唯一原因是因为你缺少括号，这导致javascript变得疯狂。你可以在dt上做任何你想做的数学，只要它是有效的javascript语法。但我添加了括号，但我打印出来，它仍然返回Nan？？你是在使用我的小提琴中的代码？还是你只是尝试更改自己的代码，因为我没有在我的答案中发布我所做的每一个更改。而且，在你实现@Archer的注释之前，你的代码不会工作。