通过边界检测重复形状 - html5、canvas、javascript

发布于 2024-10-09 12:30:22 字数 322 浏览 5 评论 0原文

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

这就是我的问题，这是我的代码。另外，由于我是 Javascript 中的 OO 新手，所以任何其他结构技巧都值得赞赏。

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

干杯！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

软糯酥胸 2024-10-16 12:30:22

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

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

I'm not really sure if what you mean exactly is, once the big white diagnal lines are all the way off the top right corner of page, that's when you want them to start back at the bottom left ? right?

What you need to do is check if the line is beyond the width and height of the canvas, and in your case, the window itself since the canvas fills the browser window. So you need to do a series of conditionals. You check if the line x + line width is > canvas width and line.y + line height is > canvas height. If both are true then set the x and y of the line to - what it is at that time. So something like:

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

This is how I recycle circles that come in from the right side of the screen and once they exit the left side they start over on the right.

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);
}

The first thing is just psuedo, you should take a look at a thing I made to use as a starting point for things like this. The structure of your code could use some more organization, canvas gets real complex real quick.
Using the arrow keys, move the square off any one of the 4 sides and see it come in on opposite side.
http://anti-code.com/games/envy/envy.html

Fork if you want: https://github.com/jaredwilli/envy

回复收藏 0 原文

~没有更多了~