feat: adapt for mobiles

Author: user-of-github

games/running-ball-babylonjs/Readme.md

@@ -2,7 +2,9 @@
 
 ---
 
-### [[LIVE DEMO]: running-ball-babylonjs-by-user-of-github.netlify.app](https://running-ball-babylonjs-by-user-of-github.netlify.app/)
+### [[LIVE DEMO]: running-ball-babylonjs-by-user-of-github.netlify.app](https://running-ball-babylonjs-by-user-of-github.netlify.app/)  
+
+__Attention__: Adapted for desktop and mobile devices. On desktop use arrows or keys A/D to move left/right. On mobile just use taps (touches) to bottom-left or bottom-right part of the screen to translate the ball. On mobile ball is just translated to one of 3 roads, while on desktop it is moved via impulse.
 
 ---
 

games/running-ball-babylonjs/src/game/Game.ts

@@ -5,6 +5,7 @@ import { GameStorageService, StoredDataType } from './game-services/storage.serv
 import { GameUiElementsService } from './game-services/ui-elements.service';
 import { GameConstants } from './constants';
 import { GameSceneService } from './game-services/scene.service';
+import { isMobileDevice } from './utils';
 
 export class Game {
   private readonly movingVectorStraight = new Vector3(0, 0, GameConstants.StartSpeedOfMovingStraight);
@@ -49,7 +50,15 @@ export class Game {
       (element as HTMLButtonElement).onclick = this.restart.bind(this);
     }
 
-    window.addEventListener('keydown', (event) => {
+    if (isMobileDevice()) {
+        this.initControlsMobile();
+    } else {
+        this.initControlsDesktop();
+    }
+  }
+
+  private initControlsDesktop() {
+    window.addEventListener('keydown', event => {
       if (this.gameStatus === GameStatus.GameOver && event.key === 'Enter') {
         this.restart();
         return;
@@ -67,7 +76,7 @@ export class Game {
       }
     });
 
-    window.addEventListener('keyup', (event) => {
+    window.addEventListener('keyup', event => {
       if (this.gameStatus !== GameStatus.Playing) return;
 
       switch (true) {
@@ -81,6 +90,34 @@ export class Game {
     });
   }
 
+  private initControlsMobile() {
+    console.log('MOBILE');
+
+
+    this.elementsRefs.canvas.addEventListener('touchstart', event => {
+      if (this.gameStatus !== GameStatus.Playing) return;
+      if (!(event.changedTouches[0].screenY > 0.3 * window.screen.height)) return;
+
+      this.stopBallMovingAside();
+    });
+
+    this.elementsRefs.canvas.addEventListener('touchend', event => {
+      if (this.gameStatus !== GameStatus.Playing) return;
+      if (!(event.changedTouches[0].screenY > 0.3 * window.screen.height)) return;
+
+      const x = event.changedTouches[0].clientX;
+      const screenWidth = this.elementsRefs.canvas.clientWidth;
+
+      if (x < screenWidth / 2) {
+        console.log('left')
+        this.sceneService.ball.translate(GameConstants.TranslateVectorLeft, GameConstants.TranslateVectorDistance);
+      } else {
+        console.log('right')
+        this.sceneService.ball.translate(GameConstants.TranslateVectorRight, GameConstants.TranslateVectorDistance);
+      }
+    });
+  }
+
   private checkIfGameOver(): void {
     const ball = this.sceneService.ball;
     const walls = this.sceneService.walls;

games/running-ball-babylonjs/src/game/constants.ts

@@ -15,5 +15,8 @@ export const GameConstants = Object.freeze({
   StartSpeedOfMovingStraight: 6,
   MoveVectorLeft: new Vector3(-2, 0, 0),
   MoveVectorRight: new Vector3(2, 0, 0),
+  TranslateVectorLeft: new Vector3(-1, 0, 0),
+  TranslateVectorRight: new Vector3(1, 0, 0),
+  TranslateVectorDistance: 2.6666, // SinglePlatformSize.width / 3
   BallRadius: 0.75
 });

games/running-ball-babylonjs/src/game/game-services/scene.service.ts

@@ -16,14 +16,15 @@ import {
   Texture,
   type Material,
   Color3,
-  SceneLoader
+  SceneLoader,
+  ArcRotateCamera
 } from '@babylonjs/core';
 import '@babylonjs/loaders/glTF';
 //@ts-ignore
 import * as CANNON from 'cannon';
 import { WaterMaterial } from '@babylonjs/materials';
 import { GameConstants } from '../constants';
-import { notRepeatedRandomFreeSpacePositionGenerator } from '../utils';
+import { isMobileDevice, notRepeatedRandomFreeSpacePositionGenerator } from '../utils';
 
 export class GameSceneService {
   public readonly platformMaterial: Material;
@@ -40,6 +41,8 @@ export class GameSceneService {
   public readonly light: PointLight;
   public readonly shadowGenerator: ShadowGenerator;
 
+  private readonly isMobile = isMobileDevice();
+
   private platforms: Mesh[] = [];
   private _walls: Mesh[] = [];
   private _ball: Mesh = {} as Mesh;
@@ -134,19 +137,35 @@ export class GameSceneService {
   }
 
   private configureCamera(): Camera {
-    const camera = new FreeCamera('camera', new Vector3(-2, 5, -10), this.scene);
-    camera.setTarget(GameConstants.ZeroVector);
+    let camera: Camera;
+
+    if (this.isMobile) {
+      camera = new ArcRotateCamera("arcCamera", Math.PI / 4, Math.PI / 3, 9, new Vector3(0, 0, 6), this.scene);
+      camera.position = new Vector3(0, 7, -15)
+    } else {
+      camera = new FreeCamera('camera', new Vector3(-2, 5, -10), this.scene);
+      (camera as FreeCamera).setTarget(GameConstants.ZeroVector);
+    }
 
     return camera;
   }
 
   private updateCameraAndLight(): void {
-    this.camera.position.z = this._ball.getAbsolutePosition().z - 12;
-    this.camera.position.y = this._ball.getAbsolutePosition().y + 6;
+    const ballPosition = this._ball.getAbsolutePosition();
+
+    if (this.isMobile) {
+      (this.camera as ArcRotateCamera).target.z = ballPosition.z + 5;
+      (this.camera as ArcRotateCamera).target.y = ballPosition.y;
+      this.camera.position.z = ballPosition.z - 20;
+      this.camera.position.y = ballPosition.y + 7;
+    } else {
+      this.camera.position.z = this._ball.getAbsolutePosition().z - 12;
+      this.camera.position.y = this._ball.getAbsolutePosition().y + 6;
+    }
 
-    this.light.position.z = this._ball.getAbsolutePosition().z + 10;
-    this.light.position.y = this._ball.getAbsolutePosition().y + 10;
-    this.light.position.z = this._ball.getAbsolutePosition().z + 10;
+    this.light.position.z = ballPosition.z + 10;
+    this.light.position.y = ballPosition.y + 10;
+    this.light.position.z = ballPosition.z + 10;
   }
 
   private configureSky() {

games/running-ball-babylonjs/src/game/utils.ts

@@ -14,3 +14,7 @@ export const notRepeatedRandomFreeSpacePositionGenerator = (freeSpace: number):
     return randomFreePlaceIndexInRow;
   };
 };
+
+export const isMobileDevice = (): boolean => {
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+}

games/running-ball-babylonjs/src/style.css

@@ -16,7 +16,7 @@ body {
 
 .app {
   width: 100%;
-  height: 100vh;
+  height: 100dvh;
   position: relative;
 }