published ver1

dizzydroid · Sep 29, 2023 · 3464c11 · 3464c11
1 parent c7db475
commit 3464c11
Show file tree

Hide file tree

Showing 7 changed files with 156 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -8,15 +8,37 @@
 <a href="https://dizzydroid.github.io/skimble/">GO SKIMBLE!</a> </b>
 </pre>
 
-In this simple retro game, you're that green fella dodging falling red fellas from the sky!<br>
+In this simple Phaser®-Built arcade-style game, you're that green fella dodging falling red fellas from the sky!<br>
 As the game progresses, the red fellas get bigger and faster 0_0!<br>
+
 How long can you skimble?
 
 ______________________________________
 ### Known issues: 
-- [Report any issues you encounter!](https://github.com/dizzydroid/skimble/issues)
+- Loading the game could take about 2-4 seconds, i'm working on optimizing that
+- the "𝚜𝚔𝚒𝚖𝚋𝚕𝚎" font sometimes doesn't render on first launch, i'm investigating that too.
+- the game is NOT optimized for mobile devices, and that's not currently planned either.
+- the game's resolution is a bit.. cranky. Least of my problems tbh
+- i have <b>not</b> set any conditions regarding the game's difficulty decay onwards, meaning it <i>will</i> get exponentially harder as you progress, addressing that is on my to-do, but for right now: (your skill issue is not my problem!)
+- [Report any other issues you encounter!](https://github.com/dizzydroid/skimble/issues)
+___________________________________________________________
+
+### Upcoming Features: 
+- More level-up features and progression (e.g. Changing backgrounds! maybe music, too?)
+- power-ups, power-downs and other items
+- character and sprite customization
+- in-game economy (e.g. collecting coins in-game)
+- Leaderboard system
+- [Suggestions? We're all ears 👉️ ](https://github.com/dizzydroid/skimble/discussions)
+
+<i>(p.s. there is <b>no</b> ETA to any of those upcoming features or fixes, they completely depend on how often i'll work on this project.)
 ___________________________________________________________
 
+<div id="footer" align="center">
+ <img src="assets/img/skmbl_logo.png">
+</div>
+
+
 <p align="center"> This web-app is part of the <a href = "https://dizzydroid.github.io/blog.html">DizzyBlog</a> © dizzydroid. All rights reserved </p>
 
 
diff --git a/assets/img/music_ico.png b/assets/img/music_ico.png
diff --git a/assets/img/skmbl_logo.png b/assets/img/skmbl_logo.png
diff --git a/assets/music/gameover.mp3 b/assets/music/gameover.mp3
diff --git a/assets/music/music.mp3 b/assets/music/music.mp3
diff --git a/index.html b/index.html
@@ -8,6 +8,7 @@
     </style>
 
 <head>
+    <link rel="icon" type="image/png" href="assets/img/skmbl_logo.png">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>skimble</title>

diff --git a/js/main.js b/js/main.js
@@ -22,11 +22,44 @@ const game = new Phaser.Game(config);
 function preload() {
     this.load.image('startButton', 'assets/img/startbtn.png');
     this.load.image('playAgainButton', 'assets/img/plyagnbtn.png');
+    this.load.audio('bgMusic', 'assets/music/music.mp3');
+    this.load.image('musicIcon', 'assets/img/music_ico.png');
+    this.load.audio('gameOverSound', 'assets/music/gameover.mp3');
+
+
 }
 
 function create() {
+    this.backgroundMusic = this.sound.add('bgMusic', { volume: 1, loop: true });
+    this.backgroundMusic.setVolume(0.2);
+
+    this.spawnDelay = 700;  // Initial delay before spawning
+
+    this.speedMultiplier = 1;  // This value multiplies with the speed
+    this.minBlockSize = 40;  // Minimum size of block
+    this.maxBlockSize = 60;  // Maximum size of block
+
+    this.score = 0;
+    this.scoreText = this.add.text(10, 10, 'Score: 0', { fontSize: '24px', fontFamily: 'Micro', fill: '#fff' });
+
     this.dodgerGameText = this.add.text(400, 300, 'skimble', { fontSize: '48px', fontFamily: 'Micro', fill: '#fff' });
     this.dodgerGameText.setOrigin(0.5, 0.5);
+
+    this.musicButton = this.add.image(760, 30, 'musicIcon')
+    .setOrigin(0.5, 0.5)
+    .setInteractive()
+    .setScale(0.2)
+    .on('pointerdown', function() {
+        if (this.backgroundMusic.isPlaying) {
+            this.backgroundMusic.pause();
+            // You can also adjust the tint of the button to indicate it's off.
+            this.musicButton.setTint(0x555555);
+        } else {
+            this.backgroundMusic.resume();
+            this.musicButton.clearTint();
+        }
+    }, this);
+
 
     this.startGameButton = this.add.image(400, 400, 'startButton')
     .setOrigin(0.5, 0.5)
@@ -39,7 +72,6 @@ function create() {
 
 
     // Initial setup will go here
-   // this.add.text(350, 300, 'Dodger Game', { fontSize: '32px', fill: '#fff' });
     // Create the player's rectangle
     this.player = this.add.rectangle(400, 570, 50, 30, 0x00ff00);
     // Enable physics on the player
@@ -59,42 +91,92 @@ function create() {
     });
 
     function spawnObject() {
-        console.log("Spawning object..."); // Add this
-
-        const x = Phaser.Math.Between(25, 775);
+        const x = Phaser.Math.Between(25, 775);  // Make sure this line is present
 
-        const fallingObject = this.add.rectangle(x, -10, 30, 30, 0xff0000);
+        this.score += 1;
+        this.scoreText.setText('Score: ' + this.score);
+
+        const size = Phaser.Math.Between(this.minBlockSize, this.maxBlockSize); 
+        const fallingObject = this.add.rectangle(x, -10, size, size, 0xff0000);
         this.physics.world.enable(fallingObject);
-
-        fallingObject.body.setGravityY(300 + this.fallenObjectsCount * 10);
-
-        fallingObject.body.setVelocityY(300);
-
+
+        fallingObject.body.setGravityY((300 + (Math.floor(this.score / 10) * 10)) * this.speedMultiplier);
+
         this.fallingObjects.add(fallingObject);
     }
 
 
 
 
+
 
 // ... inside your create function:
 
 this.physics.add.collider(this.player, this.fallingObjects, endGame, null, this);
 
+
+function spawnMultipleObjects() {
+    const numberOfBlocks = Phaser.Math.Between(1, 4);  // Spawns between 1 to 4 blocks at once
+    for (let i = 0; i < numberOfBlocks; i++) {
+        spawnObject.call(this);
+    }
+}
+
+
 function initGame() {
-    // Set a timed event to spawn objects
+
     this.time.addEvent({
-        delay: 700,
+        delay: 15000,  // 15 seconds
+        callback: function() {
+            this.speedMultiplier += 0.2;  // Increase speed by 20% every 15 seconds
+            this.minBlockSize -= 2;      // Decrease min size a bit
+            this.maxBlockSize += 2;      // Increase max size a bit
+        },
+        callbackScope: this,
+        loop: true
+    });
+
+     // Set a timed event to spawn objects
+     this.time.addEvent({
+        delay: this.spawnDelay,
         callback: spawnObject,
         callbackScope: this,
         loop: true
     });
-}
 
+    this.time.addEvent({
+        delay: 15000,  // 15 seconds
+        callback: function() {
+            this.spawnDelay = Math.max(this.spawnDelay * 0.85, 100);  // Reduce the spawn delay by 15%, but don't go lower than 100ms
+            this.time.addEvent({
+                delay: this.spawnDelay,
+                callback: spawnMultipleObjects,
+                callbackScope: this,
+                loop: true
+            });
+        },
+        callbackScope: this,
+        loop: true
+    });
+
+}
 
 function startGame() {
+    this.backgroundMusic.play();
+
     this.dodgerGameText.visible = false;
 
+    // Start score increment
+    this.scoreIncrementer = this.time.addEvent({
+        delay: 1000, // every second
+        callback: function() {
+            this.score++;
+            this.scoreText.setText('Score: ' + this.score);
+        },
+        callbackScope: this,
+        loop: true
+    });
+
     // Initialize the game
     initGame.call(this);
 
@@ -112,16 +194,50 @@ function startGame() {
 
 
 function endGame() {
+    this.backgroundMusic.stop();
+    this.sound.play('gameOverSound'); // Play the game over sound
+
     this.physics.pause();
-    const gameOverText = this.add.text(400, 300, 'Game Over', { fontSize: '48px', fontFamily: 'Micro', fill: '#fff' });
+
+     // Stop the score increment
+    if (this.scoreIncrementer) {
+        this.scoreIncrementer.destroy();
+    }
+    if (this.spawnTimer) {
+        this.spawnTimer.destroy();
+    }
+
+    if (this.spawnDelayTimer) {
+        this.spawnDelayTimer.destroy();
+    }
+    this.scoreText.visible = false;
+
+
+  /*  // Stop spawning of objects
+    if (this.objectSpawner) {
+        this.objectSpawner.destroy();
+    }
+
+    if (this.multipleObjectSpawner) {
+        this.multipleObjectSpawner.destroy();
+    } */
+
+
+    // ... rest of your code for endGame ...
+
+    // Display Game Over text
+    const gameOverText = this.add.text(400, 250, 'Game Over', { fontSize: '48px', fontFamily: 'Micro', fill: '#fff' });
     gameOverText.setOrigin(0.5, 0.5);  // This will center the text
 
+    // Display the final score
+    const finalScoreText = this.add.text(400, 300, 'Score: ' + this.score, { fontSize: '32px', fontFamily: 'Micro', fill: '#fff' });
+    finalScoreText.setOrigin(0.5, 0.5);  // This will center the text
+
     this.playAgainButton = this.add.image(400, 500, 'playAgainButton')
     .setOrigin(0.5, 0.5)
     .setInteractive()
     .setScale(0.5)
     .on('pointerdown', () => location.reload());
-
 }
 
 }