html [Circle Collision]通过判断任意两个圆形的圆心距离是否小于两圆半径之和，若小于则为碰撞#JavaScript #HTML

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html [Circle Collision]通过判断任意两个圆形的圆心距离是否小于两圆半径之和，若小于则为碰撞#JavaScript #HTML相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>碰撞的小球</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    canvas {
      border: 1px solid orange;
      margin: 10px auto 0;
      display: block;
    }
  </style>
</head>

<body>
  <!-- 绘画框 -->
  <canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
  function KeyPress() {
    this.keyListeners = []
  }
  KeyPress.prototype = {
    addKeyListener: function(keyAndListener) {
      this.keyListeners.push(keyAndListener)
    },
    findKeyListener: function(key) {
      var listener = undefined
      this.keyListeners.forEach(function(keyAndListener) {
        var currentKey = keyAndListener.key
        if (currentKey === key) {
          listener = keyAndListener.listener
        }
      })
      return listener
    },
    keyPressed: function(e) {
      var listener = undefined,
        key = undefined

      switch (e.keyCode) {
        case 32:
          key = 'space';
          break;
        case 37:
          key = 'left';
          break;
        case 39:
          key = 'right';
          break;
        case 38:
          key = 'up';
          break;
        case 40:
          key = 'down';
          break;
      }
      listener = this.findKeyListener(key)
      if (listener) {
        listener()
      }
    }
  }
  // 业务代码.......
  var canvas = document.getElementById('canvas')
  var context = canvas.getContext('2d')
  var isCollisions = false

  var Circle = function(context) {
    this.left = 0
    this.top = 0
    this.radius = 40
    this.context = context
  }

  Circle.prototype = {
    paint: function() {
      // context.fillRect(this.left, this.top, this.width, this.height)
      context.beginPath()
      context.arc(this.left + this.radius, this.top + this.radius, this.radius,
        0, Math.PI * 2, false)
      context.fill()

    }
  }
  var circle1 = new

以上是关于html [Circle Collision]通过判断任意两个圆形的圆心距离是否小于两圆半径之和，若小于则为碰撞#JavaScript #HTML的主要内容，如果未能解决你的问题，请参考以下文章

Altium Designer出现collision警告

密码学系列之:碰撞抵御和碰撞攻击collision attack

路径规划 The Dynamic Window Approach to Collision Avoidance (附python代码实例)

找不到类“NunoMaduro\Collision\Adapters\Laravel\CollisionServiceProvider”

LeetCode 735. Asteroid Collision

Collision（hdu5114）