0

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

所以这是我的问题，这是我的代码。由于我对 Javascript 中的 OO 不熟悉，因此也感谢任何其他结构提示。

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

干杯!

4

1 回答 1

0

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

您需要做的是检查线条是否超出画布的宽度和高度，在您的情况下，检查窗口本身，因为画布填充了浏览器窗口。所以你需要做一系列的条件。您检查线 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);
}

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

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

于 2011-07-31T11:48:47.803 回答