React+TS实现两小球碰撞

 TS代码

import React, { Component, createRef } from 'react';
import './index.less'
interface Props {

}
interface State {

}

class Ball extends Component<Props, State> {
    startX: number = 0
    parent?: HTMLDivElement
    child!: HTMLCollection;
    oW: number = 0
    Ball: number = 0
    x: number = 0
    offsetWidth: number = 0
    dis: number = 0
    PullRight:number=0
    PullLeft:number=0
    linecolor = createRef<HTMLDivElement>()
    TwoChild:number=0
    constructor(props: Props) {
        super(props)

        this.state = {

        }
    }

    FnStart(ev: React.TouchEvent<HTMLDivElement>) {
        let target = ev.target as HTMLDivElement
        this.startX = ev.changedTouches[0].pageX - target.offsetLeft;

        this.parent = target.parentNode as HTMLDivElement;
        this.child = this.parent.children;
        this.oW = this.parent.offsetWidth - target.offsetWidth;
        let childtwo = this.child[2] as HTMLDivElement
        this.Ball = childtwo.offsetWidth;


        document.ontouchmove = this.FnMove.bind(this);
        document.ontouchend = this.FnEnd.bind(this);
    }
    FnMove(ev: TouchEvent): void {
        let target = ev.target as HTMLDivElement
        this.x = ev.changedTouches[0].pageX - this.startX

        if (this.x < 0) this.x = 0
        if (this.x > this.oW) this.x = this.oW

       
        //左边
        if (target.className.indexOf("ac") == -1) {
            let TwoChild = (this.child[2] as HTMLDivElement).offsetLeft
            this.dis = TwoChild - this.x;
            if (this.linecolor.current) {
                this.linecolor.current.style.left = this.x + "px";
                this.linecolor.current.style.width = this.dis + "px";
            }
            this.PullRight = this.x + this.Ball;

            if (this.x > TwoChild - this.Ball) {
                if (this.x >= this.oW - this.Ball) {
                    this.x = this.oW - this.Ball
                }
                if (this.PullRight >= this.oW) {
                    this.PullRight = this.oW
                }
                let childtwo = this.child[2] as HTMLDivElement
                childtwo.style.left = this.PullRight + "px";
            }
        }
        //右边
        if (target.className.indexOf("ac") != -1) {
            let OneChild = (this.child[1] as HTMLDivElement).offsetLeft
            if (this.x < OneChild + this.Ball) {
                this.PullRight = this.x - this.Ball;

                if (this.PullLeft <= 0) this.PullLeft = 0;
                if (this.x <= this.Ball) this.x = this.Ball;

                (this.child[1] as HTMLDivElement).style.left = this.x - this.Ball + "px";
                (this.child[0] as HTMLDivElement).style.left = this.x - this.Ball + "px";
            }

            if (this.linecolor.current) {
                this.linecolor.current.style.width = this.x - (this.child[1] as HTMLDivElement).offsetLeft + "px";
            }
           
        }


        target.style.left = this.x + "px"
    }
    FnEnd() {
        document.ontouchmove = null;
        document.ontouchend = null;
    }
    render() {
        return (
            <div className="twopz">
                <div className="line">
                    <div className="line-color" ref={this.linecolor}></div>
                    <div className="ball" onTouchStart={this.FnStart.bind(this)}></div>
                    <div className="ball ac" onTouchStart={this.FnStart.bind(this)}></div>
                </div>
            </div>
        );
    }

}



export default Ball;

CSS代码

.twopz {
    .line {
        width: 500px;
        height: 1px;
        background: rgb(232, 233, 230);
        position: relative;
        top: 100px;
        margin: auto;

        .line-color {
            width: 500px;
            height: 1px;
            position: absolute;
            top: 0;
            bottom: 0;
            background: darkorange;
            margin: auto;
        }

        .ball {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: cyan;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
        }

        .ball.ac {
            left: calc(500px - 50px);
        }
    }
}