Javascript 使用canvas和p5.js移动正方形

我尝试使用p5.js和HTML5的canvas元素来移动一个正方形

我尝试过以多种方式重新安排代码，有时当代码位于画布最初无法创建的某些位置时。不管我试了多少次，我似乎都无法使它起作用

它之所以使用变量“direction”，是因为我计划根据按下的箭头键使它移动

我的代码如下所示：

var snakeX=0；
var-snakeY=0；
var Snakx2=20；
var snakeY2=20；
var direction=“right”；
var-alive=true；
var长度=2；
函数设置（）{
createCanvas（window.innerWidth，window.innerHeight）
帧率（10）；
}
函数绘图（）{
背景（0）；
中风（255）；
填充（255）；
rect（蛇，蛇，蛇2，蛇2）；
}
如果（方向=“向上”）{
snakeY=snakeY+10
snakeY2=snakeY-长度
}
函数move（）{
如果（方向=“向下”）{
snakeY=snakeY-10
snakeY2=snakeY+长度
}
如果（方向=“右”）{
蛇X=蛇X+10
Snake2=snakeX-长度
}
如果（方向=“左”）{
斯内克斯=斯内克斯-10
蛇x2=蛇x+长度
}
循环（）
}

---

如果我正确理解您的问题，可以通过执行以下操作解决动画问题：

• 在

  draw（）

  函数中添加对

  move（）

  的调用
• 可选地将

  if（direction=='up'）{..}

  块添加到

  move（）

以下是更新后的代码片段，以显示此操作：

var snakeX=0；
var-snakeY=0；
var Snakx2=20；
var snakeY2=20；
var direction=“right”；
var-alive=true；
变量长度=2
函数设置（）{
createCanvas（window.innerWidth，window.innerHeight）
帧率（10）；
}
函数绘图（）{
背景（0）；
中风（255）；
填充（255）；
rect（蛇，蛇，蛇2，蛇2）；
/*确保为每个绘图（）调用move（）*/
移动（）
}
函数move（）{
/*将其移动到Move（）的括号内*/
如果（方向=“向上”）{
snakeY=snakeY+10
snakeY2=snakeY-长度
}
如果（方向=“向下”）{
snakeY=snakeY-10
snakeY2=snakeY+长度
}
如果（方向=“右”）{
蛇X=蛇X+10
Snake2=snakeX-长度
}
如果（方向=“左”）{
斯内克斯=斯内克斯-10
蛇x2=蛇x+长度
}
}

现在正方形移动了，但不再是正方形。。。哦，我有什么问题吗？那是因为你正在以更快的速度将

snake2

增加到

snakeX

，这导致两者之间的差异（或距离）随着时间的推移而增加。如果你还需要其他东西，请告诉我，我可以建议：-）好的，我得到了修复（我没有意识到第三个和第四个值以及一个rect（）是宽度和高度），但我添加了另一个函数，它使画布没有显示…@soconfoosion听到它被修复了真是太好了-你想将更新后的代码上传到github吗，JSFIDLE或codepen，我们可以在那里找到它？当然可以！事实上，它已经上传到github，我使用github来测试我的页面，并以任何方式托管它们！我只是做了一点测试，所以让我把它恢复到原来的状态（通过测试，我的意思是把它搞得更糟…）