карта

.babelrc

@@ -1,3 +1,4 @@
 {
+  "plugins": ["@babel/plugin-proposal-async-generator-functions", "@babel/plugin-transform-runtime"],
   "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"]
 }

package.json

@@ -27,16 +27,17 @@
   },
   "homepage": "https://github.com/Berlevog/yandex.middlefrontend.mario#readme",
   "dependencies": {
-    "eventemitter3": "^4.0.7",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
+    "eventemitter3": "^4.0.7",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.0",
     "recharts": "^2.1.2"
   },
   "devDependencies": {
     "@babel/core": "^7.15.5",
+    "@babel/plugin-proposal-async-generator-functions": "^7.15.4",
     "@babel/plugin-transform-runtime": "^7.15.0",
     "@babel/preset-env": "^7.15.6",
     "@babel/preset-react": "^7.14.5",
@@ -50,9 +51,9 @@
     "@types/react": "^17.0.19",
     "@types/react-dom": "^17.0.9",
     "@types/react-router-dom": "^5.1.8",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
     "@typescript-eslint/eslint-plugin": "^4.31.1",
     "@typescript-eslint/parser": "^4.31.1",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
     "autoprefixer": "^10.3.4",
     "babel-loader": "^8.2.2",
     "css-loader": "^6.2.0",
@@ -64,6 +65,7 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^5.1.0",
     "eslint-plugin-react": "^7.25.1",
+    "fs-extra": "^10.0.0",
     "html-webpack-plugin": "^5.3.2",
     "husky": "^7.0.2",
     "jest": "^27.2.0",

src/engine/Application.tsx

@@ -37,7 +37,7 @@ class Application extends PureComponent<ApplicationProps> {
   }
 
   componentWillUnmount() {
-    cancelAnimationFrame(this.requestIdRef.current);
+    this.destroy();
   }
 
   addChild(child: DisplayObject) {
@@ -71,6 +71,13 @@ class Application extends PureComponent<ApplicationProps> {
     const { width, height, color } = this.props;
     return <canvas ref={this.canvasRef} width={width} height={height} style={{ backgroundColor: color }} />;
   }
+
+  destroy() {
+    cancelAnimationFrame(this.requestIdRef.current);
+    this.children.forEach((child) => {
+      child.destroy();
+    });
+  }
 }
 
 export default Application;

src/engine/Clouds.ts

@@ -0,0 +1,57 @@
+import { ResourceImage } from "../pages/Game/Resources";
+import { DisplayObject, Engine, Sprite } from "./Engine";
+
+class Cloud extends Sprite {
+  public deleted: boolean = false;
+  private sprite: ResourceImage;
+  private interval: NodeJS.Timer;
+
+  constructor(size: number, speed: number = 1) {
+    super();
+    this.sprite = new ResourceImage("images/cloud.png");
+    this.size = { width: 24, height: 24 };
+    this.position = { x: 800, y: Math.floor(Math.random() * 80 + 5) };
+    this.interval = setInterval(() => {
+      this.positionX = Math.floor(this.positionX - speed);
+    }, 100);
+  }
+
+  render(renderer: Engine.IRenderer) {
+    const { canvas, context } = renderer;
+    context.save();
+    // context.scale(-1, 1);
+    context.drawImage(this.sprite.img, this.positionX, this.positionY, this.size.width, this.size.height);
+    context.restore();
+  }
+}
+
+export default class Clouds extends DisplayObject {
+  private clouds: Cloud[];
+  private interval: NodeJS.Timer;
+
+  constructor() {
+    super();
+    this.clouds = [new Cloud(3)];
+    this.interval = setInterval(() => {
+      this.clouds = this.clouds.filter((cloud) => !cloud.deleted);
+      this.clouds.push(new Cloud(Math.floor(Math.random() * 3 + 1), Math.floor(Math.random() * 5 + 1)));
+    }, 10000);
+  }
+
+  getClouds(): Cloud[] {
+    return this.clouds;
+  }
+
+  render(renderer: Engine.IRenderer) {
+    this.clouds.forEach((cloud) => {
+      if (cloud.positionY < 0) {
+        cloud.deleted = true;
+      }
+      cloud.render(renderer);
+    });
+  }
+
+  destroy() {
+    clearInterval(this.interval);
+  }
+}

src/engine/Engine.test.ts

@@ -0,0 +1,45 @@
+import { distanceTo, getAABBColision, isAABBColision, linearEquation, Rect } from "./Engine";
+
+describe("AABB Collision detection works well", () => {
+  it("Return false if no collision detected", () => {
+    expect(isAABBColision(new Rect(0, 0, 100, 100), new Rect(101, 101, 100, 100))).toBeFalsy();
+    expect(isAABBColision(new Rect(100, 100, 20, 20), new Rect(0, 0, 20, 20))).toBeFalsy();
+    expect(isAABBColision(new Rect(0, 100, 100, 100), new Rect(0, 0, 100, 100))).toBeFalsy();
+  });
+
+  it("Return true when collision detected", () => {
+    expect(isAABBColision(new Rect(0, 0, 100, 100), new Rect(50, 50, 100, 100))).toBeTruthy();
+    expect(isAABBColision(new Rect(50, 50, 100, 100), new Rect(0, 0, 100, 100))).toBeTruthy();
+    expect(isAABBColision(new Rect(0, 100, 100, 100), new Rect(0, 50, 100, 100))).toBeTruthy();
+  });
+});
+
+describe("AABB Collision returns right colision side", () => {
+  it("Should return right", () => {
+    expect(getAABBColision(new Rect(0, 0, 100, 100), new Rect(80, 0, 100, 100))?.right).toBeTruthy();
+  });
+  it("Should return left", () => {
+    expect(getAABBColision(new Rect(80, 0, 100, 100), new Rect(0, 0, 100, 100))?.left).toBeTruthy();
+  });
+  it("Should return top", () => {
+    expect(getAABBColision(new Rect(0, 0, 100, 100), new Rect(0, 80, 100, 100))?.top).toBeTruthy();
+  });
+  it("Should return bottom", () => {
+    expect(getAABBColision(new Rect(0, 80, 100, 100), new Rect(0, 0, 100, 100))?.bottom).toBeTruthy();
+  });
+});
+
+it("Should return null if no collision", () => {
+  expect(getAABBColision(new Rect(0, 0, 100, 100), new Rect(100, 100, 100, 100))).toBe(null);
+});
+
+it("Должен посчитать растояние между двумя точками", () => {
+  expect(distanceTo({ x: 0, y: 0 }, { x: 0, y: 100 })).toBe(100);
+  expect(Math.floor(distanceTo({ x: 25, y: 25 }, { x: 100, y: 100 }))).toBe(106);
+});
+it("Должен вычислить линейную функцию по двум точкам и вернуть Y от X", () => {
+  expect(linearEquation({ x: 10, y: 10 }, { x: 20, y: 20 }, 15)).toBe(15);
+  expect(linearEquation({ x: 0, y: 0 }, { x: 20, y: 20 }, 15)).toBe(15);
+  expect(linearEquation({ x: 0, y: 0 }, { x: 10, y: 20 }, 10)).toBe(20);
+  expect(linearEquation({ x: 0, y: 0 }, { x: 10, y: 20 }, 5)).toBe(10);
+});