optimize game for mobile and web

lib/components/ball.dart

@@ -1,6 +1,8 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
 import 'package:flame/collisions.dart';
 import 'package:flame/components.dart';
-import 'package:flutter/material.dart';
 
 import '../game.dart';
 import '../utils.dart';
@@ -15,12 +17,16 @@ class Ball extends CircleComponent
   @override
   Future<void> onLoad() async {
     super.onLoad();
-    if (gameRef.mode == GameMode.multiple) {
-      message = Message(
-          'Tap on the ball to play\nPlayer 1: Use W/S keys to play\nPlayer 2: Use ArrowUp/ArrowDown keys to play');
+    if (kIsWeb) {
+      if (gameRef.mode == GameMode.multiple) {
+        message = Message(
+            'Tap on the ball to play\nPlayer 1: Use W/S keys to play\nPlayer 2: Use ArrowUp/ArrowDown keys to play');
+      } else {
+        message = Message(
+            'Tap on the ball to play\nUse ArrowLeft/ArrowRight keys to play');
+      }
     } else {
-      message = Message(
-          'Tap on the ball to play\nUse ArrowLeft/ArrowRight keys to play');
+      message = Message('Tap on the ball to play');
     }
     gameRef.add(message!);
     radius = 20;
@@ -55,11 +61,17 @@ class Ball extends CircleComponent
     velocity = Vector2(list.first, list.last);
   }
 
-  void replay() {
+  void reset() {
     gameRef.miss = 0;
     gameRef.points?.score = 0;
     gameRef.player1?.score = 0;
     gameRef.player2?.score = 0;
+    position = gameRef.size / 2;
+    velocity = Vector2.zero();
+  }
+
+  void replay() {
+    reset();
     start();
   }
 
@@ -105,9 +117,16 @@ class Ball extends CircleComponent
           gameRef.miss++;
           if (gameRef.miss == 3) {
             gameRef.isGameStarted = false;
-            message = Message(
-                'Game over. Your score: ${gameRef.points?.score}\nPress space to replay\nPress enter for main menu');
-            gameRef.add(message!);
+            if (kIsWeb) {
+              message = Message(
+                  'Game over. Your score: ${gameRef.points?.score}\nPress space to replay\nPress enter for main menu');
+              gameRef.add(message!);
+            } else {
+              message = Message(
+                  'Game over. Your score: ${gameRef.points?.score}\nTap on the ball to replay');
+              gameRef.add(message!);
+              reset();
+            }
           } else {
             start();
           }

lib/components/bat.dart

@@ -11,6 +11,15 @@ class Bat extends RectangleComponent
   bool isBeforeSpaceAvailable = true;
   bool isAfterSpaceAvailable = true;
 
+  Bat.solo(Vector2 gameSize) {
+    position = Vector2(gameSize[0] / 2, gameSize[1] - 25);
+    size = Vector2(gameSize[0] / 4, gameSize[1] / 64);
+    anchor = Anchor.center;
+    add(RectangleHitbox()
+      ..renderShape = true
+      ..setColor(Colors.green));
+  }
+
   Bat.top(Vector2 gameSize, mode) {
     if (mode == GameMode.multiple) {
       position = Vector2(gameSize[0] - 20, gameSize[1] / 2);

lib/components/draggable.dart

@@ -0,0 +1,14 @@
+import 'package:flame/components.dart';
+import 'package:flame/input.dart';
+
+import '../components/bat.dart';
+
+class DraggableBat extends Bat with Draggable {
+  DraggableBat.solo(super.gameSize) : super.solo();
+
+  @override
+  bool onDragUpdate(DragUpdateInfo info) {
+    position.add(Vector2(info.delta.game[0], 0));
+    return super.onDragUpdate(info);
+  }
+}

lib/components/foreground.dart

@@ -1,6 +1,7 @@
+import 'package:flutter/material.dart';
+
 import 'package:flame/components.dart';
 import 'package:flame/extensions.dart';
-import 'package:flutter/material.dart';
 
 import '../game.dart';
 import '../utils.dart';

lib/components/message.dart

@@ -1,6 +1,7 @@
-import 'package:flame/components.dart';
 import 'package:flutter/material.dart';
 
+import 'package:flame/components.dart';
+
 import '../game.dart';
 
 class Message extends TextComponent with HasGameRef<MyGame> {

lib/components/mode.dart

@@ -1,6 +1,7 @@
-import 'package:flame/components.dart';
 import 'package:flutter/material.dart';
 
+import 'package:flame/components.dart';
+
 import '../game.dart';
 
 class Mode extends TextComponent with HasGameRef<MyGame> {

lib/game.dart

@@ -1,25 +1,28 @@
 import 'package:flame/components.dart';
 import 'package:flame/game.dart';
 import 'package:flame/input.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 
 import 'components/background.dart';
-import 'components/foreground.dart';
 import 'components/ball.dart';
 import 'components/banner.dart';
 import 'components/bat.dart';
+import 'components/draggable.dart';
+import 'components/foreground.dart';
 import 'components/score.dart';
 import 'utils.dart';
 
 class MyGame extends FlameGame
-    with HasCollisionDetection, HasTappables, KeyboardEvents {
+    with HasCollisionDetection, HasTappables, HasDraggables, KeyboardEvents {
   bool isGameStarted = false;
   int speed = 0;
   int miss = 0;
   late Foreground foreground = Foreground();
   late Vector2 velocity1;
   late Vector2 velocity2;
+  Bat? bat;
   Bat? bat1;
   Bat? bat2;
   Score? points;
@@ -38,7 +41,27 @@ class MyGame extends FlameGame
     addAll([
       Background(),
       ScreenHitbox(),
-      banner,
+    ]);
+    if (kIsWeb) {
+      add(banner);
+    } else {
+      solo();
+    }
+  }
+
+  solo() {
+    speed = 600;
+    mode = GameMode.single;
+    foreground = Foreground();
+    ball = Ball();
+    bat = DraggableBat.solo(size);
+    points = Score.mid(mode);
+    if (kIsWeb) remove(banner);
+    addAll([
+      foreground,
+      ball,
+      bat!,
+      points!,
     ]);
   }
 
@@ -49,7 +72,7 @@ class MyGame extends FlameGame
     ball = Ball();
     bat1 = Bat.top(size, mode);
     points = Score.mid(mode);
-    remove(banner);
+    if (kIsWeb) remove(banner);
     addAll([
       foreground,
       ball,
@@ -67,7 +90,7 @@ class MyGame extends FlameGame
     bat2 = Bat.down(size, mode);
     player1 = Score.right(mode);
     player2 = Score.left(mode);
-    remove(banner);
+    if (kIsWeb) remove(banner);
     addAll([
       foreground,
       ball,

lib/main.dart

@@ -1,5 +1,7 @@
-import 'package:flame/game.dart';
 import 'package:flutter/material.dart';
+
+import 'package:flame/game.dart';
+
 import 'game.dart';
 
 Future<void> main() async {

lib/utils.dart

@@ -1,7 +1,7 @@
 import 'dart:math';
 
 double get getRandom {
-  final angle = Random().nextInt(100) + (600);
+  final angle = Random().nextInt(100) + 450;
   return angle.toDouble();
 }
 

pubspec.lock

@@ -57,6 +57,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.3.0"
+  flame:
+    dependency: "direct main"
+    description:
+      name: flame
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.3.0"
   flutter:
     dependency: "direct main"
     description: flutter
@@ -102,6 +109,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.7.0"
+  ordered_set:
+    dependency: transitive
+    description:
+      name: ordered_set
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "5.0.0"
   path:
     dependency: transitive
     description:
@@ -165,3 +179,4 @@ packages:
     version: "2.1.2"
 sdks:
   dart: ">=2.17.0 <3.0.0"
+  flutter: ">=3.0.0"

pubspec.yaml

@@ -1,58 +1,23 @@
 name: ping_pong
 description: A new Flutter project.
 
-# The following line prevents the package from being accidentally published to
-# pub.dev using `flutter pub publish`. This is preferred for private packages.
-publish_to: 'none' # Remove this line if you wish to publish to pub.dev
+publish_to: "none"
 
-# The following defines the version and build number for your application.
-# A version number is three numbers separated by dots, like 1.2.43
-# followed by an optional build number separated by a +.
-# Both the version and the builder number may be overridden in flutter
-# build by specifying --build-name and --build-number, respectively.
-# In Android, build-name is used as versionName while build-number used as versionCode.
-# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
-# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
-# Read more about iOS versioning at
-# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
 version: 1.0.0+1
 
 environment:
   sdk: ">=2.17.0 <3.0.0"
 
-# Dependencies specify other packages that your package needs in order to work.
-# To automatically upgrade your package dependencies to the latest versions
-# consider running `flutter pub upgrade --major-versions`. Alternatively,
-# dependencies can be manually updated by changing the version numbers below to
-# the latest version available on pub.dev. To see which dependencies have newer
-# versions available, run `flutter pub outdated`.
 dependencies:
   flutter:
     sdk: flutter
-
-
-  # The following adds the Cupertino Icons font to your application.
-  # Use with the CupertinoIcons class for iOS style icons.
   cupertino_icons: ^1.0.2
+  flame: ^1.3.0
 
 dev_dependencies:
   flutter_test:
     sdk: flutter
-
-  # The "flutter_lints" package below contains a set of recommended lints to
-  # encourage good coding practices. The lint set provided by the package is
-  # activated in the `analysis_options.yaml` file located at the root of your
-  # package. See that file for information about deactivating specific lint
-  # rules and activating additional ones.
   flutter_lints: ^2.0.0
 
-# For information on the generic Dart part of this file, see the
-# following page: https://dart.dev/tools/pub/pubspec
-
-# The following section is specific to Flutter packages.
 flutter:
-
-  # The following line ensures that the Material Icons font is
-  # included with your application, so that you can use the icons in
-  # the material Icons class.
   uses-material-design: true