简单的跳跃机制

const canvas=document.getElementById('canvas'); 
const ctx=canvas.getContext('2d'); 
var i=0; 
var j=0; 
var x=0; 
var y=0; 
function mechanic(){ 
    while(i<=15,i++){ 
     y+=1; 
     jump(0,y); 
     console.log('works') 
     if(i==15){ 
      mechanic2() 
     } 
    } 
} 
function mechanic2(){ 
    while(j<=15,j++){ 
     y-=1; 
     jump(0,y); 
     console.log('worksX2') 
     if(j==15){ 
      mechanic() 
     } 
    } 
} 
function jump(x,y){ 
    ctx.fillStyle="white"; 
    ctx.fillRect(0,0,canvas.width,canvas.height); 
    ctx.fillStyle="black"; 
    ctx.fillRect(0+x,0+y,10,10) 
} 
mechanic() 

这里有几个不同的问题。

当你怀疑，你的循环语法可能不是你想要的结果：

while(i <= 15, i++) { 
    // ... 
    if(i == 15) { 
     mechanic2(); 
    } 
} 

;

（我加了一下空白了可读性空白是你的朋友不要吝啬吧。）

在while循环表达式使用逗号操作符，所以它的工作原理是这样的：

首先，它评估i <= 15和丢弃的结果那个表达。

然后它评估i++。这增量i，然后返回值i有之前增加。因为i之前被初始化为0，所以表达式评估为0（并且还增加i至1）。

0值立即终止while循环，因此循环体永远不会运行。

它看起来像你打算这些while循环像for循环工作。其语法如下：

for(; i <= 15; i++) { 
    // ... 
    if(i == 15) { 
     mechanic2(); 
    } 
} 

这会按照您的预期工作。

小调：由于i为15时循环终止，因此循环内部不需要if语句。相反，只要移动电话mechanic2()外循环：

for(; i <= 15; i++) { 
    // ... 
} 
mechanic2(); 

另一个小记：你的一些语句的结束与;有的没有。选择一种风格或其他风格，并始终如一地使用它。大多数JavaScript开发人员使用;，但有些人喜欢忽略它们。如果您确实忽略了它们，请确保您知道分号插入的问题。

现在我们遇到了一个更糟糕的问题：我们已经正确编写了循环，但是不能使用动画循环。在您的JavaScript代码完成执行之前，浏览器不会重新绘制屏幕上的任何内容。如果你坐在一个紧密的环路中，屏幕上什么也不会发生！我只评论循环语法来帮助你理解while和for循环之间的区别，以及逗号操作符的作用，所以当你确实需要编写一个循环时，你将更好地了解写它。）

相反，你应该写一个函数，它是：

1. 更新你的价值观和你的画布需要的话重绘。
2. 请致电requestAnimationFrame()安排您的功能再次运行。
3. 从函数返回。不要循环。

上面链接的页面有一个简单的例子;您可以通过搜索JavaScript animation requestAnimationFrame找到更多示例。