Creating a Credits Scene + Adding Varying Attacks Based on Character …

…Types

index.html

@@ -13,6 +13,7 @@
     <script src = "./src/prefabs/Projectile.js"></script>
     <script src = "./src/prefabs/Character.js"></script>
     <script src = "./src/prefabs/Enemy.js"></script>
+    <script src = "./src/scenes/Credits.js"></script>
     <script src = "./src/scenes/Tutorial.js"></script>
     <script src = "./src/scenes/Fighting.js"></script>
     <script src = "./src/scenes/Menu.js"></script>

src/main.js

@@ -50,7 +50,7 @@ let config = {
             // }
         }
     },
-    scene: [ Menu, Tutorial, Fighting]
+    scene: [ Menu, Tutorial, Fighting, Credits]
 
 }
 

src/prefabs/Character.js

@@ -1,29 +1,33 @@
 class Character extends Phaser.Physics.Arcade.Sprite {
     // poop
-    constructor(scene, x, y , texture, frame, health, mana, attack_dmg, name, power, index) {
+    constructor(scene, x, y , texture, frame, health, mana, attack_dmg, name, power, type, index) {
         super(scene, x, y, texture)
         scene.add.existing(this)
         scene.physics.add.existing(this)
         this.body.setImmovable(true)
         this.x = x
         this.y = y
-        console.log('the y value is : ' + this.y)
+        // console.log('the y value is : ' + this.y)
         // setting character properties
         this.index = index
         this.health = health
         this.mana = mana
         this.name = name // for prints
         this.hurtTimer = temp_timer
-        this.power = power
-        // creating a boolean value to check if the current character has attacked
+        this.power = power // the abilities
+        this.type = type
+        this.attack_dmg = attack_dmg // for dmg
+        // setting boolean values for state checking
         this.hurt = false
         this.hasAttacked = false
-        // setting up fighting damage
-        this.attack_dmg = attack_dmg
-
         this.collapsed = false
-        // temporary check
-        this.check = ''
+
+        // creating an array of attacks
+        // might make a dictionary
+        this.attackList = Array(2).fill(-1)
+
+
+
         this.projectile = new Projectile(scene, this.x + this.width/2, this.y - this.height/2, `${this.name}_projectile`, this)
 
         scene.FSM_holder[index] = new StateMachine('idle', {
@@ -40,6 +44,7 @@ class Character extends Phaser.Physics.Arcade.Sprite {
 class IdleState extends State {
     // in this state the character may only enter the attack and hurt state
     enter (scene, character) {
+        console.log(character.attackList)
         // player is not attacking in idle state
         character.clearTint()
         // player is not hurt
@@ -69,13 +74,7 @@ class IdleState extends State {
                     // is entered
                 }
             }, null, scene)
-        }
-
-
-
-
-
-
+        }  
     }
 }
 
@@ -84,6 +83,11 @@ class AttackState extends State {
     enter (scene, character) {
         // remove the enemies health
         // scene.enemy.damaged = true
+        character.mana -= 10
+        // change mana amt later
+        scene.characters_mp[character.index].match(character.mana)
+
+
         scene.dmgToEnemy = character.attack_dmg
         scene.selectionMenu.allowSelect = false
         // console.log("selection allow is "+ scene.selectionMenu.allowSelect)

src/prefabs/Selection.js

@@ -11,7 +11,9 @@ class SelectionMenu extends Phaser.GameObjects.Graphics{
 
         // set the current player at the first one
         this.current_player = 0 // which character player is on
+        this.current_attack = 0 // which attack is shown first
         this.current_selection = 2 // what the cursor is pointing at
+
         this.cursor_pos = -20
 
         this.allowSelect = true // to keep track if the player has attacked
@@ -21,7 +23,7 @@ class SelectionMenu extends Phaser.GameObjects.Graphics{
         this.cursorImage = scene.add.image(x + -36, y + this.cursor_pos, 'cursor').setOrigin(0.5, 0)
         this.charDisplay = scene.add.bitmapText(x + -28, y + -20, 'font', this.characters[this.current_player].name, 8)
         this.item = scene.add.bitmapText(x + -28, y + -8, 'font', "PHONE", 8)
-        this.powerDisplay = scene.add.bitmapText( x + -28, y + 4, 'font', this.characters[this.current_player].power, 8)
+        this.powerDisplay = scene.add.bitmapText( x + -28, y + 4, 'font', this.characters[this.current_player].attackList[this.current_attack], 8)
         this.selections = [ this.powerDisplay, this.item, this.charDisplay ]
         this.selections[this.current_selection].setTint(0xDFFF00);
         this.availableChar = this.scene.checkActive()
@@ -103,6 +105,8 @@ class SelectionMenu extends Phaser.GameObjects.Graphics{
     charChange(input){
         this.availableChar = this.updateAvailable()
         this.current_player += input
+        // when character is changed auto set the current attack to 0
+        this.current_attack = 0
 
         console.log(this.availableChar)
         console.log(this.current_player)
@@ -118,8 +122,23 @@ class SelectionMenu extends Phaser.GameObjects.Graphics{
         this.charCursor.x = this.characters[this.availableChar[this.current_player]].x+ 15
 
         this.charDisplay.text = this.characters[this.availableChar[this.current_player]].name
-        this.powerDisplay.text = this.characters[this.availableChar[this.current_player]].power
-
+        this.powerDisplay.text = this.characters[this.availableChar[this.current_player]].attackList[this.current_attack]
+
+    }
+
+    attackChange(input){
+        // using the same logic as charChange()
+        // manuever through the selected characters attacks
+        console.log(input)
+        this.current_attack += input
+        if (this.current_attack >= this.characters[this.availableChar[this.current_player]].attackList.length){
+                this.current_attack = 0
+        }
+        else if (this.current_attack < 0){
+            this.current_attack = this.characters[this.availableChar[this.current_player]].attackList.length - 1
+        }
+        console.log('current attack' + this.current_attack)
+        this.powerDisplay.text = this.characters[this.availableChar[this.current_player]].attackList[this.current_attack]
     }
 
 }

src/scenes/Credits.js

@@ -0,0 +1,85 @@
+class Credits extends Phaser.Scene {
+    constructor(){
+        super('creditsScene')
+    }
+
+    create() {
+        this.logo = this.add.image(centerX, centerY - tileSize / 2, 'title_image').setScale(2).setOrigin(0.5)
+        // setting up inputs
+        this.keys = this.input.keyboard.createCursorKeys()
+        this.direction = 'up'
+        this.add.bitmapText(this.width, game.config.height - 8, 'font', '[Space] to Pause   [Up] or [Down] to Scroll', 8).setOrigin(0, 0.5)
+        this.add.bitmapText(this.width, game.config.height - 16, 'font', '[Left] or [Right] for Menu', 8, 1).setOrigin(0, 0.5)
+
+        this.paused = false // value to check if paused
+        const content = ['\nCode: by Charlize Serrano\n',
+                         'Assets: by Charlize Serrano\n\n\n',
+                         '- Music from Pixabay - \n',
+                         'Musician: Grand_Project \n',
+                         'Song: On The Road To The Eighties_Loop2\n\n\n',
+                         '- Fonts from DaFont - \n\n\n\n\n\n',
+                         'Game Influenced by:\n',
+                         'The Amazing World of Gumball\n',
+                         'Season 5 Episode 18: The Console'
+        ]
+
+        this.credits = this.add.bitmapText(centerX, game.config.height + 72, 'font', content, 8, 1).setOrigin(0.5);
+
+    }
+
+    // allow for scrolling inside of credits
+    update() {
+        const { left, right, up, down, space, shift } = this.keys   
+        if (!this.paused){
+            this.move(this.logo, -1)
+            this.move(this.credits, -1)
+        }
+        if (Phaser.Input.Keyboard.JustDown(space)){
+            this.pause()
+        }
+        if (down.isDown) {
+            this.direction = 'down'
+            this.move(this.logo, 10)
+            this.move(this.credits, 10)
+
+        }
+        if (up.isDown){
+            this.direction = 'up'
+            this.move(this.logo, -10)
+            this.move(this.credits, -10)
+
+        }
+
+        if (left.isDown || right.isDown ){
+            this.scene.start('menuScene')
+        }
+
+    }
+    move(item, input) {
+        item.y += input
+
+        // resetting position
+        if (item.y >= 500 && this.direction == 'down'){
+            item.y = -50
+        }
+        if (item.y <= -200 && this.direction == 'up'){
+            item.y = game.config.height + 60
+        }
+    }
+    pause() {
+        console.log("REACHED????")
+        // allow to pause and unpause
+        if (!this.paused){
+            this.paused = true
+            console.log('paused is ' + this.paused)
+            this.move(this.logo, 0)
+            this.move(this.credits, 0)
+            return
+        }
+        else if (this.paused){
+            this.paused = false
+            return
+            // this.move(this.logo, -1)
+        }
+    }
+}

src/scenes/Fighting.js

@@ -17,7 +17,6 @@ class Fighting extends Phaser.Scene {
         this.dmgToEnemy = 0
         this.enemy_dmg = 0
 
-        this.availableCharacters = 
         this.enemyX = leftPos - tileSize
         this.enemyY = floorY + tileSize
 
@@ -36,13 +35,18 @@ class Fighting extends Phaser.Scene {
         this.music = this.sound.add('fight_music').setLoop(true).setVolume(0.4)
 
         // adding a character to scene - each character should have their own HP
-        this.gumball = new Character(this, rightPos-tileSize, floorY + tileSize /1.5, 'gumball', 0, this.hp, MP, 30, 'GUMBALL', 'MAGIC', 0).setOrigin(0,1)
-        this.anais = new Character(this, rightPos, floorY +tileSize / 1.5, 'anais', 0, this.hp, MP, 50, 'ANAIS', 'SCIENCE', 1).setOrigin(0,1)
-        this.darwin = new Character(this, rightPos + tileSize, floorY + tileSize / 1.5, 'darwin', 0, this.hp, MP, 10, 'DARWIN', 'SUPPORT', 2).setOrigin(0,1)
+        this.gumball = new Character(this, rightPos-tileSize, floorY + tileSize /1.5, 'gumball', 0, this.hp, MP, 30, 'GUMBALL', 'MAGIC', 'physical', 0).setOrigin(0,1)
+        this.gumball.attackList = [ 'SCRATCH', 'MAGIC']
+
+        this.anais = new Character(this, rightPos, floorY +tileSize / 1.5, 'anais', 0, this.hp, MP, 50, 'ANAIS', 'SCIENCE', 'mage', 1).setOrigin(0,1)
+        this.anais.attackList = [ 'PUNCH', 'SCIENCE' ]
+
+        this.darwin = new Character(this, rightPos + tileSize, floorY + tileSize / 1.5, 'darwin', 0, this.hp, MP, 10, 'DARWIN', 'SUPPORT', 'mage', 2).setOrigin(0,1)
+        this.darwin.attackList = [ 'SLAP', 'SUPPORT' ]
         // adding each character health
         this.gumball_hp = new HealthBar(this, centerX, floorY + tileSize, this.gumball, 0)
         this.gumball_mp = new ManaBar(this, centerX + tileSize * 3 + 12, floorY + tileSize, this.gumball, 0)
-
+        
         this.anais_hp = new HealthBar(this, centerX,floorY+ tileSize *1.5, this.anais, 0)
         this.anais_mp = new ManaBar(this, centerX + tileSize * 3 + 12, floorY+ tileSize *1.5, this.anais, 1)
 
@@ -52,9 +56,12 @@ class Fighting extends Phaser.Scene {
         // adding all characters into an array to loop all the characters
         this.characters = [ this.gumball, this.anais, this.darwin ]
         this.characters_hp = [ this.gumball_hp, this.anais_hp, this.darwin_hp ]
+        this.characters_mp = [ this.gumball_mp, this.anais_mp, this.darwin_mp ]
+
         // adding enemy to scene - enemy has their own prefab
         this.enemy = new Enemy(this, leftPos - tileSize, floorY + tileSize / 1.5, 'penny', 0, HP, MP, 152, 'PENNY').setOrigin(0,1).setFlipX(true)
         this.enemy_hp = new HealthBar(this, centerX, tileSize / 4, this.enemy)
+        // enemy does not need mana
 
         this.summon = new Summon(this, rightPos - tileSize * 3, centerY, 'nicole', 200).setOrigin(0,1)
 
@@ -118,6 +125,15 @@ class Fighting extends Phaser.Scene {
             if (Phaser.Input.Keyboard.JustDown(space)){
                 this.selectionMenu.select()
             }
+            if (this.selectionMenu.current_selection == 0){
+                if (Phaser.Input.Keyboard.JustDown(right)){
+                    this.selectionMenu.attackChange(1)
+                }
+                if (Phaser.Input.Keyboard.JustDown(left)){
+                    this.selectionMenu.attackChange(-1)
+                }
+            }
+
             if (this.selectionMenu.current_selection == 2){
                 if (Phaser.Input.Keyboard.JustDown(right)){
                     this.selectionMenu.charChange(1)
@@ -126,6 +142,7 @@ class Fighting extends Phaser.Scene {
                     this.selectionMenu.charChange(-1)
                 }
             }
+
             if (Phaser.Input.Keyboard.JustDown(up)){
                 this.selectionMenu.lookChoice(1)
             }

src/scenes/Menu.js

@@ -183,9 +183,12 @@ class Menu extends Phaser.Scene{
     update() {
         const { left, right, up, down, space, shift } = this.keys   
 
-        if (left.isDown || right.isDown || up.isDown ){
+        if (right.isDown || up.isDown ){
             this.scene.start('fightingScene')
         }
+        if (left.isDown){
+            this.scene.start('creditsScene')  
+        }
 
         if (down.isDown){
             this.scene.start('tutorialScene')