putisgamedown

src/app/app-routing.module.ts

@@ -7,6 +7,7 @@ import {RulesPageComponent} from "./pages/rules-page/rules-page.component";
 import {BanlistPageComponent} from "./pages/banlist-page/banlist-page.component";
 import {MessagesPageComponent} from "./pages/messages-page/messages-page.component";
 import {VipPageComponent} from "./pages/vip-page/vip-page.component";
+import {DowngamePageComponent} from "./pages/downgame-page/downgame-page.component";
 
 const routes: Routes = [
   { path: "", component: MainPageComponent},
@@ -15,7 +16,8 @@ const routes: Routes = [
   { path: "rules", component: RulesPageComponent },
   { path: "banlist", component: BanlistPageComponent },
   { path: "messages", component: MessagesPageComponent },
-  { path: "vip", component: VipPageComponent }
+  { path: "vip", component: VipPageComponent },
+  { path: "putisRun", component: DowngamePageComponent}
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -66,6 +66,7 @@ import {VipFreeDialog} from "./pages/vip-page/VipFreeDialog";
 import {VipPromocodeDialog} from "./pages/vip-page/VipPromocodeDialog";
 import {MatCheckboxModule} from "@angular/material/checkbox";
 import {PromocodeService} from "./services/promocode.service";
+import { DowngamePageComponent } from './pages/downgame-page/downgame-page.component';
 
 registerLocaleData(localeRu, "ru")
 
@@ -101,7 +102,8 @@ registerLocaleData(localeRu, "ru")
     DiscordConnectDialog,
     VipBuyDialog,
     VipFreeDialog,
-    VipPromocodeDialog
+    VipPromocodeDialog,
+    DowngamePageComponent
   ],
   imports: [
     BrowserModule,

src/app/pages/downgame-page/downgame-page.component.scss

@@ -0,0 +1,58 @@
+@keyframes cactusMov {
+  0%{
+    left: 580px;
+  }
+
+  100%{
+    left: -20px;
+  }
+}
+
+@keyframes jump {
+  0%{
+    top: 150px;
+  }
+  30%{
+    top: 130px;
+  }
+  50%{
+    top: 80px;
+  }
+  80%{
+    top: 130px;
+  }
+  100%{
+    top: 150px;
+  }
+}
+
+.game {
+  width: 600px;
+  height: 200px;
+  border-bottom: 1px solid #000;
+  margin: auto;
+}
+
+#putis {
+  width: 50px;
+  height: 50px;
+  background-image: url(../../../assets/images/downGame/dino.png);
+  background-size: 50px 50px;
+  position: relative;
+  top: 150px;
+}
+
+#cactus {
+  width: 20px;
+  height: 40px;
+  background-image: url(../../../assets/images/downGame/cactus.png);
+  background-size: 20px 40px;
+  position: relative;
+  top: 110px;
+  left: 580px;
+  animation: cactusMov 1s infinite linear;
+}
+
+.jump {
+  animation: jump 0.3s linear;
+}

src/app/pages/downgame-page/downgame-page.component.ts

@@ -0,0 +1,53 @@
+import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+import {ActionService} from "../../services/action.service";
+
+@Component({
+  selector: 'app-downgame-page',
+  styleUrls: ['./downgame-page.component.scss'],
+  template: `
+    <div class="game" (click)="jump()">
+      <div id="putis" #putis [ngClass]="{'jump':isJump}"></div>
+      <div id="cactus" #cactus></div>
+    </div>
+  `
+})
+export class DowngamePageComponent implements OnInit {
+
+  constructor(private actionService: ActionService) { }
+
+  @ViewChild('putis', {static: false})
+  putis!: ElementRef;
+
+  @ViewChild('cactus', {static: false})
+  cactus!: ElementRef;
+
+  isAlive!: NodeJS.Timeout;
+
+  isJump: boolean = false;
+
+  ngOnInit(): void {
+    this.createGame();
+  }
+
+  createGame() {
+    this.isAlive = setInterval (() => {
+      //console.log(this.putis, window.getComputedStyle(this.putis.nativeElement).top)
+
+      let putisTop = this.putis ? parseInt(window.getComputedStyle(this.putis.nativeElement).top) : 0;
+      let cactusLeft = this.cactus ? parseInt(window.getComputedStyle(this.cactus.nativeElement).left) : 0;
+
+      if (cactusLeft < 50 && cactusLeft > 0 && putisTop >= 140) {
+        alert("GAME OVER!")
+      }
+    }, 10)
+  }
+
+  jump() {
+    if (!this.isJump) {
+      this.isJump = true;
+      setTimeout(() => {
+        this.isJump = false;
+      }, 300);
+    }
+  }
+}