js图案随机不重叠排列

基础概念

在JavaScript中实现图案的随机不重叠排列，通常涉及到以下几个基础概念：

随机数生成：使用Math.random()函数生成随机数。
碰撞检测：确保新生成的图案位置不会与已有图案重叠。
坐标系统：通常使用二维坐标系来表示图案的位置。

类型与应用场景

类型：
- 固定大小的图案随机排列。
- 可变大小的图案随机排列。
- 基于网格的随机排列。
- 基于物理模拟的随机排列。
应用场景：
- 游戏中的背景生成。
- 数据可视化中的元素布局。
- 用户界面中的动态图标排列。
- 艺术创作软件中的图案生成。

示例代码

以下是一个简单的示例，展示如何在HTML5 Canvas上随机排列固定大小的圆形图案，确保它们不重叠：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Non-overlapping Circles</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="800" height="600"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const numCircles = 50;
        const circleSize = 20;
        const circles = [];

        class Circle {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.radius = circleSize;
            }

            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fillStyle = 'blue';
                ctx.fill();
                ctx.closePath();
            }

            collidesWith(other) {
                const dx = this.x - other.x;
                const dy = this.y - other.y;
                const distance = Math.sqrt(dx * dx + dy * dy);
                return distance < (this.radius + other.radius);
            }
        }

        function generateRandomCircle() {
            let x, y;
            let newCircle;
            do {
                x = Math.random() * (canvas.width - circleSize * 2) + circleSize;
                y = Math.random() * (canvas.height - circleSize * 2) + circleSize;
                newCircle = new Circle(x, y);
            } while (circles.some(circle => newCircle.collidesWith(circle)));
            return newCircle;
        }

        for (let i = 0; i < numCircles; i++) {
            const newCircle = generateRandomCircle();
            circles.push(newCircle);
        }

        function drawCircles() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            circles.forEach(circle => circle.draw());
        }

        drawCircles();
    </script>
</body>
</html>