react+ts双球交叉和碰撞

燕京拾亿

已于 2022-03-18 09:28:09 修改

阅读量688

点赞数

文章标签： react.js javascript 前端

于 2021-12-13 08:27:37 首次发布

本文链接：https://blog.youkuaiyun.com/m0_59074147/article/details/121897346

版权

本文主要介绍如何使用React和TypeScript来创建一个双球运动并检测它们之间的碰撞效果。通过结合React组件和物理运动的计算，实现了一个交互式的前端视觉展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

index.tsx

import { Component } from "react";
import './index.less';

interface Props {

}
interface State {
  Num: number,
  MaxNum: number,
}


class Drag extends Component<Props, State>{
  constructor(props: Props) {
    super(props);
    this.state = {
      Num: 0,
      MaxNum: 100
    }
  }
  parent?: HTMLDivElement;
  child!: HTMLCollection;
  startX: number = 0;
  ballW: number = 0;
  oW: number = 0;
  x: number = 0;
  dis: number = 0;
  Num: number = 0;
  MaxNum: number = 0;
  scale: number = 0;
  FnStart(ev: React.TouchEvent) {
    this.startX = ev.changedTouches[0].pageX - (ev.target as HTMLDivElement).offsetLeft;
    this.parent = ((ev.target as HTMLDivElement).parentNode) as HTMLDivElement;
    this.child = this.parent.children;
    this.ballW = (ev.target as HTMLDivElement).offsetWidth;
    this.oW = this.parent.offsetWidth - this.ballW;
    documen