canvas带方向指示的元素碰撞效果-html代码-BFW代码库

canvas带方向指示的元素碰撞效果

代码语言：html

所属分类：动画

代码描述：canvas带方向指示的元素碰撞效果，点击鼠标左键增加元素

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
*{
  margin: 0;
  padding: 0;
}
</style>

</head>
<body>
<canvas id="canvas" width="640" height="480" />

<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
const log = document.getElementById('log');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

function distance(x1, y1, x2, y2) {
  return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
}
class Vector2d {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  getRotateRad(cx, cy, x, y, radian) {
    const cos = Math.cos(radian);
    const sin = Math.sin(radian);
    const nx = cos * (x - cx) + sin * (y - cy);
    const ny = cos * (y - cy) - sin * (x - cx);
    return { x: nx, y: ny };
  }
  rotateRad(cx, cy, x, y, radian) {
    const cos = Math.cos(radian);
    const sin = Math.sin(radian);
    this.x = cos * (x - cx) + sin * (y - cy);
    this.y = cos * (y - cy) - sin * (x - cx);
  }
  add(x, y) {
    this.x += x;
    this.y += y;
  }
  sub(x, y) {
    this.x -= x;
    this.y -= y;
  }
  mul(x, y) {
    this.x *= x;
    this.y *= y;
  }}

class Ball {
  constructor(x, y, vecX, vecY, speed, scale) {
    this.x = x;
    this.y = y;
    this.defX = x;
    this.defY = y;
    this.vec = new Vector2d(vecX, vecY);
    this.forceVec = new Vector2d(0, 0);
    this.speed = speed;
    this.scale = scale;
    this.life = Math.random() * 500 + 500;
    this.mass = scale;
    this.color = `rgb(${Math.random() * 100 + 155}, ${Math.random() * 150 + 40}, ${Math.random() * 150 + 40})`;
    this.eye = new Eye(this);
  }
  setHit(val, hitObj, distance) {
    this.isHit = true;
    this.isHitObj = hitObj;
    this.hitdistance = distance;
  }
  draw(context) {
    context.beginPath(); //パス作成
    //描写cmd　start
    context.arc(this.x, this.y, this.scale, 0, 2 * Math.PI, true);
    context.fillStyle = this.color; //線の色指定
    context.fill(); //線を描写

    // vector表示
    context.beginPath();
    context.moveTo(this.x, this.y);
    context.lineTo(this.x + this.vec.x * 5, this.y + this.vec.y * 5);
    context.strokeStyle = "black";
    context.lineWidth = 1;
    context.stroke();
    context.closePath();
    this.eye.draw(context);
  }
  update() {
    this.beforeX = this.x;
   .........完整代码请登录后点击上方下载按钮下载查看