带有边界检测的重复形状 - html5、canvas、javascript答案

【问题标题】：Repeat shapes with boundary detection - html5, canvas, javascript带有边界检测的重复形状 - html5、canvas、javascript
【发布时间】：2011-05-30 08:19:36
【问题描述】：

我想使用 html5 画布标签和 javascript 创建一个简单的抽象模式。我已经使用一些变量、函数和对象弄清楚了我想要它做的事情，但是通过我使用的边界检测，我希望每个特定的形状在它离开屏幕时回到它的起始位置（从而循环动画）。

所以这是我的问题，这是我的代码。由于我是 Javascript 中的 OO 新手，因此任何其他结构提示都值得赞赏。

在这里查看我的进度：http://helloauan.com/apps/test/

干杯！

【问题讨论】：

我希望动画循环播放，所以当一个形状离开屏幕时，它会回到它的起点，并形成一个连续的循环模式。而不是当第一个形状离开屏幕时，它会重置整个事物。
“循环”（通常用于指基于时间的项目从 time=0 开始）是指“环绕”（通常用于指基于空间的项目离开屏幕的右边缘并从左边缘返回）？
@Phrogz 是的，完全一样，所以图案是连续的，所以随着屏幕上每个白色形状的移动，它会回到它的起始位置，然后再次开始动画。谢谢。

标签： javascript html animation canvas boundary

【解决方案1】：

我不太确定你的意思是不是，一旦大的白色诊断线一直远离页面的右上角，那就是你希望它们从左下角开始的时候？对吧？

您需要做的是检查线条是否超出画布的宽度和高度，在您的情况下，检查窗口本身，因为画布填充了浏览器窗口。所以你需要做一系列的条件。您检查线 x + 线宽是否 > 画布宽度和 line.y + 线高是否 > 画布高度。如果两者都为真，则将线的 x 和 y 设置为 - 当时的值。所以像：

if( line.x + line.width > canvas.width && line.y + line.height < 0) {
  line.x = -0;
  line.y = canvasHeight + line.height;
}

这就是我如何回收从屏幕右侧进入的圆圈，一旦它们离开左侧，它们就会从右侧重新开始。

if( d.x + d.radius < 0 ) {
    d.radius = 5+(Math.random()*10);
    d.x = cwidth + d.radius;
    d.y = Math.floor(Math.random()*cheight);
    d.vX = -5-(Math.random()*5);
}

第一件事只是假的，你应该看看我做的一个东西作为这样的事情的起点。你的代码结构可以使用更多的组织，画布变得非常复杂非常快。使用箭头键，将正方形从 4 个边中的任何一个移开，然后看到它从对面进入。 http://anti-code.com/games/envy/envy.html

如果你愿意，可以分叉：https://github.com/jaredwilli/envy

【讨论】：