Question

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

所以这是我的问题，这是我的代码。此外，任何其他结构提示都受到赞赏，因为我是Javascript中的OO新手。

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

干杯！

Answer 1

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

您需要做的是检查线条是否超出画布的宽度和高度，在您的情况下，窗口本身是自画布填充浏览器窗口以来。所以你需要做一系列条件。你检查线x +线宽是否>画布宽度和line.y +行高是＆gt;帆布高度。如果两者都为真，则将行的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);
}

第一件事就是伪装，你应该看一下我用来作为这样的事情的起点。你的代码结构可以使用更多的组织，画布真正快速复杂。使用箭头键，将正方形从四个边中的任何一个移开，看到它在另一侧进入。 http://anti-code.com/games/envy/envy.html

如果你想要叉：https://github.com/jaredwilli/envy

使用边界检测重复形状 - html5，canvas，javascript

1 个答案: