HTML редактор

<!doctype html>
<html lang="ru">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Практика по ES6 классам. Canvas</title>
  <style>
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

body {
      margin: 0;
    }

canvas {
      display: block;
      background-color: #f5f5f5;
    }
  </style>
  <script defer src="canvas.js"></script>
</head>

<body>

class Circle {
      constructor(x, y, dx, dy, r, color) {
        this.x = x
        this.y = y
        this.dx = dx
        this.dy = dy
        this.r = r
        this.color = color
        this.constructor.contains.push(this)
      }
      processBorderCollision() {
        if (this.x + this.r >= app.width || this.x - this.r <= 0) {
          this.dx = -this.dx
        }
        if (this.y + this.r >= app.height || this.y - this.r <= 0) {
          this.dy = -this.dy
        }
      }
      draw() {
        app.ctx.beginPath();
        app.ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false)
        app.ctx.fillStyle = this.color
        app.ctx.fill()
        this.update()
      }
      update() {
        for (let i = 0; i < Circle.contains.length - 1; i++) {
          for (let j = i + 1; j < Circle.contains.length; j++) {
            Circle.processCollision(Circle.contains[i], Circle.contains[j])
          }
        }
        this.processBorderCollision()
        this.x += this.dx
        this.y += this.dy
      }
      static contains = []
      static create() {
        const r = 15
        const x = Math.random() * (app.width - r * 2) + r
        const y = Math.random() * (app.height - r * 2) + r
        const dx = (Math.random() - 0.5) * 5
        const dy = (Math.random() - 0.5) * 5
        const color = `#${Math.floor(Math.random() * 16777215).toString(16)}`
        new this(x, y, dx, dy, r, color)
      }
      static processCollision(circle1, circle2) {
        const d1x = circle1.x - circle2.x
        const d1y = circle1.y - circle2.y
        const dc = Math.sqrt(d1x * d1x + d1y * d1y)
        const v1c = Math.sqrt(circle1.dx * circle1.dx + circle1.dy * circle1.dy)
        const v2c = Math.sqrt(circle2.dx * circle2.dx + circle2.dy * circle2.dy)
        const vcmax = Math.max(v1c, v2c)
        const v1x = circle1.dx / vcmax
        const v1y = circle1.dy / vcmax
        const v2x = circle2.dx / vcmax
        const v2y = circle2.dy / vcmax
        const min = circle1.r + circle2.r
        if (dc <= min) {
          const v1xNew = d1x / dc + v1x
          const v1yNew = d1y / dc + v1y
          const v2xNew = -d1x / dc + v2x
          const v2yNew = -d1y / dc + v2y
          const v1cNew = Math.sqrt(v1xNew * v1xNew + v1yNew * v1yNew)
          const v2cNew = Math.sqrt(v2xNew * v2xNew + v2yNew * v2yNew)
          const ratio = (v1c + v2c) / (v1cNew + v2cNew)
          circle1.dx = v1xNew * ratio
          circle1.dy = v1yNew * ratio
          circle2.dx = v2xNew * ratio
          circle2.dy = v2yNew * ratio
        }
      }
    }

for (let i = 0; i < 25; i++) {
      Circle.create()
    }

app.init();
  </script>
</body>

</html>