react-组件状态练习-移动的小球球

直接贴代码

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import Ball from './components/Ball';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Ball 
      xSpeed={100} ySpeed={130} bg='lightblue' 
    />
  </React.StrictMode>
);

Ball.css

.ball {
  position: fixed;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

Ball.js

import React, { Component } from 'react'
import './Ball.css'

/**
 * 一个满屏幕乱窜的小球
 * 横向速度 向右用正数表示 向左用负数  单位 像素/s
 * 纵向速度 向下用正数表示 向上用负数  单位 像素/s
 * porps : xSpeed ySpeed left top bg
 * state : xSpeed ySpeed left top
 */
export default class Ball extends Component {

  state = {
    xSpeed: this.props.xSpeed,
    ySpeed: this.props.ySpeed,
    left: this.props.left || 0,
    top: this.props.top || 0
  }

  componentDidMount() {
    const duration = 16 // 运行速度为一帧  16毫秒
    setInterval(()=> {
      const xDis = this.state.xSpeed * duration / 1000 // 横向每秒移动的距离
      const yDis = this.state.ySpeed * duration / 1000 // 纵向每秒移动的距离
      let nextLeft = this.state.left + xDis // 得到将要移动到的横向位置
      let nextTop = this.state.top + yDis // 得到将要移动到的纵向位置

      if (nextLeft <= 0) { // 如果超出屏幕左边界
        nextLeft = 0
        this.setState({
          xSpeed: -this.state.xSpeed // 重新设置横向速度
        })
      }else if (nextLeft >= document.documentElement.clientWidth - 100) { // 超出屏幕右边界,100为小球宽度
        nextLeft = document.documentElement.clientWidth - 100
        this.setState({
          xSpeed: -this.state.xSpeed // 重新设置横向速度
        })
      }

      if (nextTop <= 0) { // 如果超出屏幕上边界
        nextTop = 0
        this.setState({
          ySpeed: -this.state.ySpeed // 重新设置纵向速度
        })
      }else if (nextTop >= document.documentElement.clientHeight - 100) { // 超出屏幕下边界,100为小球高度
        nextTop = document.documentElement.clientHeight - 100
        this.setState({
          ySpeed: -this.state.ySpeed // 重新设置纵向速度
        })
      }

      // 最后统一设置小球位置
      this.setState({
        left: nextLeft,
        top: nextTop
      })
    }, duration)
  }

  render() {
    return (
      <div className='ball' style={{
        left: this.state.left,
        top: this.state.top,
        backgroundColor: this.props.bg || '#F40'
      }}></div>
    )
  }
}