React RaceGame Js

by RaviMakwana

React

import React from "react";
import f1red from "./image/f1-red.png";
import f1green from "./image/f1-green.png";
import gameover from "./image/gameover.png";
import gamestart from "./image/gamestart.gif";
import "./App.css";

class Game extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      home: <GameStar />,
      road: null,
    };
  }

  handleClick(self) {
    setTimeout(function () {
      self.setState({
        home: false,
        road: <Road />,
      });
    }, 2500);
  }

  render() {
    return (
      <div className="Game">
        <div onClick={() => { this.handleClick(this); }} >
          {this.state.home}
        </div>
        {this.state.road}
      </div>
    );
  }
}

class Road extends React.Component {
  constructor(props) {
    super(props);
    var self = this;
    var bottomat = window.innerHeight;
    var carsOnTrack = [1, 0, 0, 0, 1];
    var carInterval = undefined;
    var carSpeed = 10;
    this.state = {
      car: <MyCar track={3} left={600} bottom={50} />,
      rivalcar1: <RivalCar track={1} bottom={bottomat} />,
      rivalcar2: <RivalCar track={2} bottom={bottomat} />,
      rivalcar3: <RivalCar track={3} bottom={bottomat} />,
      rivalcar4: <RivalCar track={4} bottom={bottomat} />,
      rivalcar5: <RivalCar track={5} bottom={bottomat} />,
      gameover: null,
      carspeed: carSpeed,
    };

    window.addEventListener("wheel", function (event) {
      clearInterval(carInterval);
      var delta;
      if (event.wheelDelta) delta = event.wheelDelta;
      else delta = -1 * event.deltaY;

      if (delta < 0) carSpeed -= 1;
      else carSpeed += 1;
      setCarSpeed();
    });

    function setCarOnTRack() {
      bottomat = window.innerHeight;
      var isAllinTrack = true;
      carsOnTrack.forEach(function (element, idx) {
        carsOnTrack[idx] = Math.floor(Math.random() * 2) + 0;
        if (carsOnTrack[idx]...