Trinity Intro. Computer Programming, With Game Development (Phaser)
04/22/2018 -  Exercises

Name:_________________        

Exercise 1
(a)
open in Brackets the index.html, and change (Your Name) - to your first name.

**run the index.html - you should see the “space” and “nebula”


(b) 
open the ggame_A.js in Brackets, find the SceneA class:
class SceneA extends Phaser.Scene (should be near line 334)
  ->  in the create ()   method:
change the nebula “X” (starting) position from 300 to 220 -
 this.nebula = this.add.image(300, 250, 'space', 'nebula');


what Changed?__________________________________

(c)   in the  update (time,  delta)
method:
change the nebula.rotation
(From 0.00006 to 0.0001) 

this.nebula.rotation += 0.00006 * delta; 

What Changed?___________________________________


(d)   also in the update (time, delta)
Next - Add movement to the nebula:
 
copy these lines below the (line) this.nebula.rotation += 0.00006 * delta; 
        
        this.nebula.x -= 0.02 * delta;
        this.nebula.y += 0.015 * delta;

        if (this.nebula.y >= 270)
        {
            this.nebula.setPosition(220, 250);
        }

Which way does this move?_______________________________



Exercise 2
(Add a new Scene - “SUN”)

before the let config = {

add (cut & paste) this code::

class SceneB extends Phaser.Scene {

    constructor ()
    {
        super('SceneB');

        this.sun;
    }

    create ()
    {
        this.cameras.main.setViewport(0, 136, 1024, 465);

        this.sun = this.add.image(900, 80, 'space', 'sun');
    }

    update (time, delta)
    {
        this.sun.x -= 0.02 * delta;
        this.sun.y += 0.015 * delta;

        if (this.sun.y >= 630)
        {
            this.sun.setPosition(1150, -190);
        }
    }

}



(b) this will not work yet, until you ad the scene to the “config” (near bottom) object
modify the line:
scene: [ Controller, SceneA  ]
(add SceneB)
 scene: [ Controller, SceneA, SceneB]

**run the index.html


What do you see?_____________________________



(c)
what is the purpose of this “code” - 

       if (this.sun.y >= 630)
        {
            this.sun.setPosition(1150, -190);
        }

Purpose?______________________________________




Exercise 3
lets add asteroids as another scene.

Add (Cut & Paste) this code
{just above the let config = …}

class SceneC extends Phaser.Scene {

    constructor ()
    {
        super('SceneC');

        this.asteroids = [];

        this.positions = [
            { x: 37, y: 176 },
            { x: 187, y: 66 },
            { x: 177, y: 406 },
            { x: 317, y: 256 },
            { x: 417, y: -10 },
            { x: 487, y: 336 },
            { x: 510, y: 116 },
            { x: 727, y: 186 },
            { x: 697, y: 10 },
            { x: 597, y: 216 },
            { x: 695, y: 366 },
            { x: 900, y: 76 },
            { x: 1008, y: 315 }
        ];
    }

    create ()
    {
        this.cameras.main.setViewport(0, 136, 1024, 465);

        for (let i = 0; i < this.positions.length; i++)
        {
            let pos = this.positions[i];

            let therock = this.add.sprite(pos.x, pos.y, 'asteroid').play('asteroid');

            therock.setData('vx', 0.04);
            therock.setOrigin(0);
            therock.setScale(Phaser.Math.FloatBetween(0.3, 0.6));

            this.asteroids.push(therock);
        }
    }

    update (time, delta)
    {
        for (let i = 0; i < this.asteroids.length; i++)
        {
            let therock = this.asteroids[i];

            therock.x -= therock.getData('vx') * delta;

            if (therock.x <= -100)
            {
                therock.x = 1224;
            }
        }
    }

}

(a)  modify the config 
(as follows):
 scene: [ Controller, SceneA, SceneB, SceneC]

What is added?___________________________

(b) do the asteroids have any colliders ?(yes / no)__________




Exercise 4
Lets add a planet - (add this new class, just before the let config = {…(line)

class SceneD extends Phaser.Scene {

    constructor ()
    {
        super('SceneD');

        this.planet;
    }

    create ()
    {
        this.cameras.main.setViewport(0, 136, 1024, 465);

        this.planet = this.add.image(200, 380, 'space', 'planet');
    }

    update (time, delta)
    {
        this.planet.x += 0.01 * delta;

        if (this.planet.x >= 1224)
        {
            this.planet.x = -200;
        }
    }

}


(a) modify the scene: line
  scene: [ Controller, SceneA, SceneB, SceneC, SceneD ]
 
**run the index.html


(b)  add a rotation to the planet:

(below the line) this.planet.x += 0.01 * delta;
add this line:

  this.planet.rotation += 0.00005 * delta; 


**run the index.html


What happens?___________________________



(c)  what is the purpose of this code:

        if (this.planet.x >= 1224)
        {
            this.planet.x = -200;
        }

Purpose?____________________________




Exercise 5
Lastly lets add a “ship”.
The ship will follow a specific (Path) - A Bezio Path (Mathematical) 

add this class (just before the let config = {…  (line)

(cut & paste this code) - before the (a)

class SceneE extends Phaser.Scene {

    constructor ()
    {
        super('SceneE');

        this.ship;
        this.particles;
        this.emitter;

        this.splineData = [
            50, 300,
            146, 187,
            35, 94,
            180, 40,
            446, 35,
            438, 100,
            337, 150,
            452, 185,
            560, 155,
            641, 90,
            723, 147,
            755, 262,
            651, 271,
            559, 318,
            620, 384,
            563, 469,
            433, 457,
            385, 395,
            448, 334,
            406, 265,
            316, 305,
            268, 403,
            140, 397,
            205, 309,
            204, 240,
            144, 297,
            50, 300
          ];

        this.curve;
    }

    create ()
    {
        this.cameras.main.setViewport(0, 136, 1024, 465);

        this.curve = new Phaser.Curves.Spline(this.splineData);

        let ship = this.add.follower(this.curve, 50, 300, 'space', 'ship');

        ship.startFollow({
            duration: 12000,
            yoyo: true,
            ease: 'Sine.easeInOut',
            repeat: -1
        });

        this.particles = this.add.particles('space');

        this.emitter = this.particles.createEmitter({
            frame: 'blue',
            speed: 100,
            lifespan: 2000,
            alpha: 0.6,
            angle: 180,
            scale: { start: 0.7, end: 0 },
            blendMode: 'ADD'
        });

        ship.setDepth(1);

        this.ship = ship;

        this.emitter.startFollow(this.ship);
    }

}


(a)   modify the Config(scene)

add “ , SceneE”

scene: [ Controller, SceneA, SceneB, SceneC, SceneD, SceneE]

**run the index.html