(WIP) First game I've ever attempted; looking for code feedback


#1

Hey all! Here’s my first attempt ever at coding a game. I’m still learning so any feedback you may have to simplify or clean up the code would be great or any other advice would be greatly appreciated!

(My next attempt will to be adding bullet functionality for the ship)

Space Shooter Game

<!doctype html>

Making your first Phaser 3 Game - Part 1 body { margin: 0; }
</style>
<script type="text/javascript">
    var config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        physics: {
            default: 'arcade',
            arcade: {
                debug: false
            }
        },
        scene: {
            preload: preload,
            create: create,
            update: update
        }
    };

    var game = new Phaser.Game(config);
    var player;
    var space;
    var enemy;
    var ACCLERATION = 400;
    var DRAG = 1600;
    var MAXSPEED = 800;
    var laser;
    var scoreText;
    var gasCollectible;
    var collect;
    var createAsteroid;
    var createEnemy;
    var explosion;
    var score = 0;
    var music;

    function preload() {
        this.load.image('ship', 'assets/ship.png');
        this.load.image('space', 'assets/space.jpg');
        this.load.image('gas', 'assets/collect.png');
        this.load.image('asteroid', 'assets/asteroid.png');
        this.load.image('asteroid2', 'assets/asteroid2.png');
        this.load.image('alien', 'assets/alien.png');
        this.load.spritesheet('explosion', 'assets/explosionsbg.png', {
            frameWidth: 256,
            frameHeight: 256
        });

        this.load.image('laser', 'assets/laser.png');
        this.load.audio('explode', 'assets/explode.mp3');
        this.load.audio('soundtrack', 'assets/soundtrack.mp3');
        this.load.audio('laser', 'assets/laser.mp3');
        this.load.audio('collect', 'assets/collect.wav')

    }

    function create() {

        //Scrolling background
        space = this.add.tileSprite(400, 300, 800, 600, 'space');

        //Background music
        var music = this.sound.add('soundtrack');
       music.play();

        //Player character
        player = this.physics.add.sprite(200, 300, 'ship');
        player.body.maxVelocity.setTo(MAXSPEED, MAXSPEED);
        player.body.drag.setTo(DRAG, DRAG);
        player.setCollideWorldBounds(true);

        //Display Score
        scoreText = this.add.text(600, 16, 'Score: 0', {
            fontSize: '32px',
            fill: '#fff'
        });
        scoreText.setDepth(2);

        //Spawn Collectibles
        var collectibleTimer = this.time.addEvent({
            delay: 5000,
            callback: createCollectible,
            callbackScope: this,
            loop: true
        });


        function createCollectible() {
            gasCollectible = this.physics.add.sprite(850, Math.random() * 600, 'gas').setVelocity(-200, 0);
            this.physics.add.overlap(player, gasCollectible, collectGas, null, this);
        }

        //Spawn Asteroids
        var asteroidTimer = this.time.addEvent({
            delay: 1250,
            callback: createAsteroid,
            callbackScope: this,
            loop: true
        });

        function createAsteroid() {

            createAsteroid = this.physics.add.sprite(850, Math.random() * 600, Phaser.Math.RND.pick(['asteroid', 'asteroid2'])).setVelocity(Phaser.Math.Between(-400, -100), 0).setScale(Math.random(1, .5));
            this.physics.add.overlap(player, createAsteroid, hitAsteroid, null, this);
       
        }

        //Gameplay Mechanics

        //Collect Gas Canister
        function collectGas(player, gasCollectible) {
            gasCollectible.disableBody(true, true);
            score += 10;
            scoreText.setText('Score: ' + score);
            this.sound.play('collect');


            //Spawn Alien Ship
            if (score == 30) {
                createEnemy = this.physics.add.sprite(700, 0, 'alien');

                var tween = this.tweens.add({
                    targets: [createEnemy],
                    y: 600,
                    duration: 5000,
                    yoyo: true,
                    repeat: -1,
                    delay: function(i, total, target) {
                        return i * 600;
                    }

                });

                asteroidTimer.remove(false);

                var laser = this.sound.add('laser');

                laserTimer = this.time.addEvent({
                    delay: 750,
                    callback: createLaser,
                    callbackScope: this,
                    loop: true

                });

                function createLaser() {
                    createLaser = this.physics.add.sprite(createEnemy.x, createEnemy.y, 'laser').setVelocity(-400, 0);
                    this.physics.add.overlap(player, createLaser, hitLaser, null, this);
                    this.sound.play('laser');
                    
                }

              //Laser Death

                function hitLaser(player, laser) {
                    createAsteroid.disableBody(true, true);
                    player.disableBody(true, true);
                    laser.disableBody(true, true);
                    laserTimer.remove(false);
                    asteroidTimer.remove(false);
                    collectibleTimer.remove(false);
                    this.sound.play('explode');

                    //  Explosion

                    var explode = {
                        key: 'boom',
                        frames: this.anims.generateFrameNumbers('explosion'),
                        frameRate: 24,
                        hideOnComplete: true
                    };

                    anim = this.anims.create(explode);

                    explosion = this.add.sprite(player.x + 40, player.y, 'explosion').setScale(1.5);

                    explosion.anims.play('boom');

                    gameOverText = this.add.text(330, 280, 'Game Over', {
                        fontSize: '32px',
                        fill: '#fff'
                    });

                    score = 0;
                    restartText = this.add.text(330, 315, 'Replay', {
                        fontSize: '32px',
                        fill: '#fff'
                    });
                    restartText.setInteractive();
                    restartText.on('pointerover', () => (this.add.text(330, 315, 'Replay', {
                        fontSize: '32px',
                        fill: '#3f4'
                    })));
                    restartText.on('pointerout', () => (this.add.text(330, 315, 'Replay', {
                        fontSize: '32px',
                        fill: '#fff'
                    })));
                    restartText.on('pointerdown', () => {
                        this.scene.restart();
                        music.stop();
                    });

                }

            } 

            // Win Conditional
            if (score == 50) {
                gameWinText = this.add.text(330, 280, 'You Win', {
                    fontSize: '32px',
                    fill: '#fff'
                });

                asteroidTimer.remove(false);
                collectibleTimer.remove(false);
                laserTimer.remove(false);
                createEnemy.disableBody(true, true);
                score = 0;
                restartText = this.add.text(330, 315, 'Replay', {
                    fontSize: '32px',
                    fill: '#fff'
                });
                restartText.setInteractive();
                restartText.on('pointerover', () => (this.add.text(330, 315, 'Replay', {
                    fontSize: '32px',
                    fill: '#3f4'
                })));
                restartText.on('pointerout', () => (this.add.text(330, 315, 'Replay', {
                    fontSize: '32px',
                    fill: '#fff'
                })));
                restartText.on('pointerdown', () => {
                    this.scene.restart();
                    music.stop();
                });

            }

        }

        //Lose Conditional
        function hitAsteroid(player, asteroid) {
            asteroid.disableBody(true, true);
            player.disableBody(true, true);
            asteroidTimer.remove(false);
            collectibleTimer.remove(false);
            this.sound.play('explode');

            //  Explosion

            var explode = {
                key: 'boom',
                frames: this.anims.generateFrameNumbers('explosion'),
                frameRate: 24,
                hideOnComplete: true
            };

            anim = this.anims.create(explode);

            explosion = this.add.sprite(player.x + 40, player.y, 'explosion').setScale(1.5);

            explosion.anims.play('boom');

            gameOverText = this.add.text(330, 280, 'Game Over', {
                fontSize: '32px',
                fill: '#fff'
            });

            score = 0;
            restartText = this.add.text(330, 315, 'Replay', {
                fontSize: '32px',
                fill: '#fff'
            });
            restartText.setInteractive();
            restartText.on('pointerover', () => (this.add.text(330, 315, 'Replay', {
                fontSize: '32px',
                fill: '#3f4'
            })));
            restartText.on('pointerout', () => (this.add.text(330, 315, 'Replay', {
                fontSize: '32px',
                fill: '#fff'
            })));
            restartText.on('pointerdown', () => {
                this.scene.restart();
                music.stop();
            });

        }

        //Keyboard controls
        cursors = this.input.keyboard.createCursorKeys();

    }

    function update() {

        // Scroll the background

        space.tilePositionX += 2;

        // Player controls    

        player.body.acceleration.y = 0;
        if (cursors.up.isDown) {

            player.body.acceleration.y = -800;

        } else if (cursors.down.isDown) {

            player.body.acceleration.y = 800;

        } else {
            player.setVelocityY(0);

        }

        if (cursors.up.isDown && player.body.touching.down) {
            player.setVelocityY(-330);
        }

    }

</script>

#2

Your game looks really nice ! :+1:

My first feedback is to tell you that you can post your games in itch.io so it’s easier to access and they have SEO and everything you need to develop your gameplay


#3

Thank you! Will definitely check that out.


#4

That will be great because we can have discussions around the games them selfes not only on Phaser

For me itch.io is amazing place for this purpose but if you want more places you can also take a look at https://github.com/nazimboudeffa/awesome-phaser that was inspired from https://github.com/Raiper34/awesome-phaser but agmented with publishers