game.html

<!doctype html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8" />
    <link rel="shortcut icon" type="image/png" href="assetts/favicon.png"/>
	<title>Super Pineapple Thing</title>
	<script type="text/javascript" src="bower_components/phaser/build/phaser.min.js"></script>
    <script type="text/javascript" src="bower_components/numjs/dist/numjs.min.js"></script>
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>
<body>

<script type="text/javascript">
    var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, '', { preload: preload, create: create, update: update });
    OVER = false;

    //  The Google WebFont Loader will look for this object, so create it before loading the script.
    WebFontConfig = {

        //  'active' means all requested fonts have finished loading
        //  We set a 1 second delay before calling 'createText'.
        //  For some reason if we don't the browser cannot render the text the first time it's created.
        active: function() { game.time.events.add(Phaser.Timer.SECOND, createText, this); },

        //  The Google Fonts we want to load (specify as many as you like in the array)
        google: {
          families: ['Press Start 2P']
        }

    };

    function preload() {
        game.load.image('pineapple', 'assetts/pineapple.png')
        game.load.image('background', 'assetts/water_tile.jpg');
        game.load.spritesheet('pineappleAnimation', 'assetts/pineappleAnimation.png',165,465);
        game.load.spritesheet('pinkEnemyAnimation', 'assetts/pinkEnemyAnimation.png',165,240);
        game.load.spritesheet('rocketAnimation', 'assetts/rocketAnimation.png', 225, 480);
        game.load.image('hotdog', 'assetts/hotdog.png');
        game.load.spritesheet('cactusAnimation', 'assetts/cactusAnimation.png', 333, 413);
        game.load.spritesheet('coralAnimation', 'assetts/coralAnimation.png', 405, 435);

        game.load.script('webfont', '//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js');
    }

    // Score text
    score_text = null;
    function createText() {
        score_text = game.add.text(16, 16, "0", {
            font: "32px 'Press Start 2P'",
            fill: "#ffffff",
            align: "left",
            height: "100px",
            boundsAlignV: "bottom"
        });
        score_text_shad = game.add.text(16 + 4, 16 + 2, "0", {
            font: "32px 'Press Start 2P'",
            fill: "#333333",
            align: "left",
        });
        score_text.smoothed = false;
        score_text_shad.smoothed = false;
        score_text.fixedToCamera = true;
        score_text.cameraOffset.x = 16;
        score_text.cameraOffset.y = 16;
        score_text_shad.fixedToCamera = true;
        score_text_shad.cameraOffset.x = 20;
        score_text_shad.cameraOffset.y = 18;
    }

    var player;
    function create() {
        NUM_ENEMIES = 50;
        LIGHTING = {'x': 10.0, 'y': 20.0 }

        // World size
        game.world.setBounds(0, 0, 3000, 2500);

        // Register keys
        cursors = game.input.keyboard.createCursorKeys()
        this.spaceKey = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);

        //  We're going to be using physics, so enable the Arcade Physics system
        game.physics.startSystem(Phaser.Physics.ARCADE);

        // Decoration group
        DecorationGroup = game.add.group();

        // Player group
        PlayerGroup = game.add.group();

        // Enemy group
        EnemyGroup = game.add.group();

        // Bullet group
        BulletGroup = game.add.group();

        
        // Add decorations
        for (var i = 0; i < 10; i++) {
            c = game.add.sprite((game.world.width / 10) * (Math.random() * 10) + (Math.random() * 20), (game.world.height / 10) * (Math.random() * 10) + (Math.random() * 20), 'cactusAnimation');
            cor = game.add.sprite((game.world.width / 10) * (Math.random() * 10) + (Math.random() * 20), (game.world.height / 10) * (Math.random() * 10) + (Math.random() * 20), 'coralAnimation');
            c.scale.setTo(0.3, 0.3);
            cor.scale.setTo(0.3, 0.3);
            c.animations.add('cactusAnimation');
            c.__type__ = 'cactus'
            cor.animations.add('coralAnimation');
            c.__type__ = 'coral'
            c.alpha = 0.7
            cor.alpha = 0.7
            DecorationGroup.add(c);
            DecorationGroup.add(cor);
        }

        // EnemyManager class
        class EnemyManager {
            constructor() {
                this.enemies = []

                // Evolution hyperparams
                this.EV_SIGMA = 0.01;

                // Reward stats
                this.max_r = 0.0;
                this.avg_r = 0.0;

                // Id management
                this.curr_id = 0;
            }

            addEnemy(e) {
                this.enemies.push(e);
                EnemyGroup.add(e.shad);
                EnemyGroup.add(e.sprite);
                e.id = this.curr_id;
                this.curr_id += 1;
            }

            next() {
                for (var i in this.enemies) {       
                    this.enemies[i].next({ 'distances': this.getDistances(this.enemies[i].sprite.x, this.enemies[i].sprite.y) })
                }
            }

            getDistances(x, y) {
                var dists = []
                var a = [x, y]
                for (var i in this.enemies) {
                    var b = [this.enemies[i].sprite.x, this.enemies[i].sprite.y]
                    var dist = Math.sqrt(Math.pow(a[0] - b[0], 2) + Math.pow(a[1] - b[1], 2))
                    dists.push([dist, this.enemies[i]])                    
                }
                return dists
            }

            getBestEnemy() {
                var accum = 0.0;
                var be = this.enemies[0];
                var br = be.reward;
                for (var i in this.enemies) {
                    accum += this.enemies[i].reward;
                    if (this.enemies[i].reward > br) {
                        br = this.enemies[i].reward;
                        be = this.enemies[i]
                    }
                }
                this.avg_r = accum / this.enemies.length;
                this.max_r = br;
                return be;
            }

            removeDeadEnemies() {
                this.enemies = this.enemies.filter(function(a) { return a.sprite.alive && a.sprite.exists && a.shad.alive && a.shad.exists; })
                this.enemies = this.enemies.slice(0, NUM_ENEMIES)
            }

            evolveNewEnemy(e_old) {
                var e = new Enemy(e_old);
                var be = this.getBestEnemy()
                var w_1 = be.w_1.add(nj.random([10,5]).subtract(nj.ones([10,5]).divide(2.0)).multiply(this.EV_SIGMA))
                var w_2 = be.w_2.add(nj.random([5,5]).subtract(nj.ones([5,5]).divide(2.0)).multiply(this.EV_SIGMA))
                var w_out = be.w_out.add(nj.random([5,4]).subtract(nj.ones([5,4]).divide(2.0)).multiply(this.EV_SIGMA))
                var b_1 = be.b_1.add(nj.random([5]).subtract(nj.ones([5]).divide(2.0)).multiply(this.EV_SIGMA))
                var b_2 = be.b_2.add(nj.random([5]).subtract(nj.ones([5]).divide(2.0)).multiply(this.EV_SIGMA))
                var b_out = be.b_out.add(nj.random([4]).subtract(nj.ones([4]).divide(2.0)).multiply(this.EV_SIGMA))
                e.set_params(w_1, w_2, w_out, b_1, b_2, b_out)
                this.addEnemy(e)
            }
        }
       
        class Player {
            constructor(xPos,yPos,scale,image) {
                this.sprite = game.add.sprite(xPos,yPos,image);
                game.physics.arcade.enable(this.sprite);
                this.sprite.scale.setTo(scale,scale);
                game.add.tween(this.sprite.scale).to( {x:scale*1.4, y:scale*1.4}, 4000, Phaser.Easing.Linear.None,true, 0, 200, true);
                game.camera.follow(this.sprite)
                this.sprite.anchor.setTo(0.5, 0.0);

                this.shadow = game.add.sprite(xPos, yPos, image);
                this.shadow.scale.setTo(scale, scale)
                game.add.tween(this.sprite.scale).to( {x:scale * 1.4, y:scale * 1.4}, 4000, Phaser.Easing.Linear.Non, true, 0, 200, true);
                this.shadow.tint = 0x000000;
                this.shadow.alpha = 0.6;
                this.shadow.anchor.setTo(0.5, 0.0);
                game.world.moveDown(this.shadow)
    
                this.sprite.body.immovable = true;

                PlayerGroup.add(this.shadow)
                PlayerGroup.add(this.sprite)

                this.addAnimation('pineappleAnimation')

                this.FRAMES_REQUIRED_FOR_SHOT = 5;
                this.frames_since_last_shot = 6;
                this.BULLET_SPEED = 1000.0;

                this.health = 100.0;

                this.score = 0.0;

                this.emitter = game.add.emitter(xPos, yPos, 100);
                this.emitter.makeParticles(image);
                this.emitter.gravity = 200;
                this.emitter.setScale(0.05, 0.1, 0.05, 0.1);

                this.game_over = null;
                this.game_over_shad = null;
 
                this.game_over_shad = game.add.text(game.camera.view.centerX + 4, game.camera.view.centerY + 2, "GAME OVER!", {
                    font: "48px 'Press Start 2P'",
                    fill: "#333333",
                    align: "left",
                });
                this.game_over = game.add.text(game.camera.view.centerX, game.camera.view.centerY, "GAME OVER!", {
                    font: "48px 'Press Start 2P'",
                    fill: "#ffffff",
                    align: "center",
                    height: "100px",
                    boundsAlignV: "bottom"
                });
                this.game_over.smoothed = false;
                this.game_over_shad.smoothed = false;
                this.game_over.alpha = 0
                this.game_over_shad.alpha = 0
            }

            addAnimation (name) {
                this.sprite.animations.add(name);
                this.shadow.animations.add(name);
            }

            playAnimation(name, framesPSecond, loop) {
                this.sprite.animations.play(name,framesPSecond,loop);
                this.shadow.animations.play(name, framesPSecond, loop);
            }

            //controls player movement- parameter is milliseconds until the image gets to the cursor
            movement(secondsToContact) {
                // update shot clock
                this.frames_since_last_shot += 1.0;

                // update health
                if (this.health < 100) { 
                    this.health = Math.min(this.health *= 1.0025, 100.0);
                    tileSpriteOverlay.alpha = 1.0 - (this.health / 100.0);
                } 
  
                // move
                this.sprite.velocity = game.physics.arcade.moveToPointer(this.sprite, 50, game.input.activePointer, secondsToContact);
                this.sprite.rotation = game.physics.arcade.angleToPointer(this.sprite) + (Math.PI/2);
                this.shadow.x = this.sprite.x + LIGHTING.x;
                this.shadow.y = this.sprite.y + LIGHTING.y;
                this.shadow.angle = this.sprite.angle
            }

            fire() {
                if (this.frames_since_last_shot > this.FRAMES_REQUIRED_FOR_SHOT) {
                    var vfa = game.physics.arcade.velocityFromAngle(this.sprite.angle - 90, -64);
                    var b = new Bullet(this.sprite.x - vfa.x, this.sprite.y - vfa.y, this.sprite.angle - 90, '#0000ff', this.BULLET_SPEED, 1000, 'rocketAnimation');
                    b.sprite.__owner_id__ = -1;
                    BulletGroup.add(b.sprite);
                    this.frames_since_last_shot = 0.0;
                }
            }

            reset() {
                OVER = false;
                this.sprite.reset(0,0);
                this.shadow.reset(0,0);
                this.health = 100.0;
                this.score = 0;
                tileSpriteOverlay.alpha = 0.0;
                this.game_over.alpha = 0.0
                this.game_over_shad.alpha = 0.0
            }

            got_hit() {
                this.health -= 15.0;
                if (this.health < 0.0) {
                    this.game_over.x = game.camera.view.centerX;
                    this.game_over.y = game.camera.view.centerY;
                    this.game_over_shad.x = game.camera.view.centerX+4;
                    this.game_over_shad.y = game.camera.view.centerY+2;
                    this.game_over.alpha = 1.0
                    this.game_over.alpha = 1.0

                    OVER = true;
                }

                this.emitter.x = this.sprite.x
                this.emitter.y = this.sprite.y
                this.emitter.start(true, 1000, null, 10);
            }

            destroyed_enemy(r) {
                this.score += 10.0;
            }

        }

        function EnemySprite(width, height, color, x, y, a) {
                shad = game.add.sprite(x, y, 'pinkEnemyAnimation');
                sprite = game.add.sprite(x,y,'pinkEnemyAnimation');

                sprite.__shadow__ = shad;

                shad.tint = 0x000000;
                shad.alpha = 0.6
                game.world.moveDown(shad)
                sprite.anchor.setTo(0.5, 1.0);
                shad.anchor.setTo(0.4, 0.9);

                sprite.scale.setTo(.25,.25);
                shad.scale.setTo(.25,.25);

                game.physics.arcade.enable(sprite);
                sprite.body.setSize(200, 300, 0.0, 0.0);

                // Rotated to init angle
                sprite.angle = a
                shad.angle = a

                // Bounding box
                return [sprite, shad];
        }
    
        class Enemy {
            constructor(e_old) {
                // Sprite
                if (e_old == null) {
                    var es = EnemySprite(40, 60, '#ffffff', Math.random() * game.world.width, Math.random() * game.world.height, Math.random() * 360);
                    this.sprite = es[0]
                    this.shad = es[1]
                }
                else {
                    this.sprite = e_old;
                    this.shad = e_old.__shadow__
                    this.sprite.reset(Math.random() * game.world.width, Math.random() * game.world.height);
                }
                this.sprite.__die__ = this.die

                this.addAnimation('pinkEnemyAnimation');

                // ID
                this.id = null;

                // Movement hyperparams
                this.movement_weights = [3, 100, 100];

                // Policy params
                this.w_1 = nj.random([10,5]).subtract(nj.ones([10,5]).divide(2.0))
                this.w_2 = nj.random([5,5]).subtract(nj.ones([5,5]).divide(2.0))
                this.w_out = nj.random([5,4]).subtract(nj.ones([5,4]).divide(2.0))
                this.b_1 = nj.zeros([5])
                this.b_2 = nj.zeros([5])
                this.b_out = nj.zeros([4])

                // Enemy hyperparams
                this.MAX_SPEED = 200;
                this.MAX_ANGULAR = 250;
                this.SURVIVAL_REWARD = 0.01;
                this.KILL_ENEMY_REWARD = 15.0;
                this.DRAG = 2.0;
                this.BULLET_SPEED = 600.0;

                // Reward counter
                this.reward = 0.0

                // Bullet regularizer
                this.FRAMES_REQUIRED_FOR_SHOT = 30;
                this.frames_since_last_shot = Math.random() * this.FRAMES_REQUIRED_FOR_SHOT;
            }


            addAnimation (name) {
                this.sprite.animations.add(name);
                this.shad.animations.add(name);
            }

            playAnimation (name, framesPSecond, loop) {
                this.sprite.animations.play(name, framesPSecond, loop);
                this.shad.animations.play(name, framesPSecond, loop);
            }

            set_params(w_1, w_2, w_out, b_1, b_2, b_out) {
                this.w_1 = w_1
                this.w_2 = w_2
                this.w_out = w_out
                this.b_1 = b_1
                this.b_2 = b_2
                this.b_out = b_out
            }

            // Actuators
            thrust_forward(a) {
                var vfa = game.physics.arcade.velocityFromAngle(this.sprite.angle, a); 
                this.sprite.body.velocity.x += vfa.x
                this.sprite.body.velocity.y += vfa.y
            }

            thrust_left(a) {
                this.sprite.body.angularVelocity -= ((a + 1.0) / 2.0);
                if (this.sprite.body.angularVelocity < (-1.0 * this.MAX_ANGULAR)) { 
                    this.sprite.body.angularVelocity = -1.0 * this.MAX_ANGULAR;
                }
            }

            thrust_right(a) {
                this.sprite.body.angularVelocity += (a + 1.0)/2.0;
                if (this.sprite.body.angularVelocity > this.MAX_ANGULAR) {
                    this.sprite.body.angularVelocity = this.MAX_ANGULAR;
                }
            }

            fire() {
                if (this.frames_since_last_shot > this.FRAMES_REQUIRED_FOR_SHOT) {
                    var vfa = game.physics.arcade.velocityFromAngle(this.sprite.angle + 90, 32);
                    var b = new Bullet(this.sprite.x - vfa.x, this.sprite.y - vfa.y, 90 + this.sprite.angle, '#ff0000', 600.0, 1500, 'hotdog');
                    b.sprite.__owner_id__ = this.id;
                    BulletGroup.add(b.sprite);
                    this.frames_since_last_shot = 0.0;
                    this.FRAMES_REQUIRED_FOR_SHOT = (Math.random() * 10) + 30;
                }
            }
    
            nonlin(x) {
                for (var i = 0; i < x.shape[0]; i++) {
                    x.set(i, Math.max(0, x.get(i)))
                }
                return x;
            }

            ff(i) {
                var h_1 = nj.sigmoid(i.dot(this.w_1).add(this.b_1))
                var h_2 = nj.sigmoid(h_1.dot(this.w_2).add(this.b_2))
                return nj.sigmoid(h_2.dot(this.w_out).add(this.b_out))
            }

            next(args) {
                // increment reward
                this.reward += this.SURVIVAL_REWARD;

                var dists = args['distances']
                dists.sort(function(a, b) { return a[0] - b[0] })
                var top_3 = dists.slice(1, 4);
                
                var mx = this.sprite.x
                var my = this.sprite.y
                if (top_3.length >= 3) {
                    var i = nj.array([ mx - top_3[0][1].sprite.x, my - top_3[0][1].sprite.y, mx - top_3[1][1].sprite.x, my - top_3[1][1].sprite.y, mx - top_3[2][1].sprite.x, my - top_3[2][1].sprite.y, 0.0, 0.0, 0.0, 0.0])
                }
                else {
                    var i = nj.zeros([10])
                }
                var out = this.ff(i)

                this.thrust_forward(out.get(0) * this.movement_weights[0])
                this.thrust_left(out.get(1) * this.movement_weights[1])
                this.thrust_right(out.get(2) * this.movement_weights[2])
                if (out.get(3) > 0.5) { this.fire(); }

                // World wrap
                game.world.wrap(this.sprite, 5.0, false,  true, true)

                // Mav vel
                this.sprite.body.velocity.setMagnitude(Math.min(this.MAX_SPEED, this.sprite.body.velocity.getMagnitude()));

                // Drag
                var vfa = game.physics.arcade.velocityFromAngle(this.sprite.angle, this.DRAG);
                this.sprite.body.velocity.x -= vfa.x;
                this.sprite.body.velocity.y -= vfa.y;
                if (this.sprite.body.angularVelocity > 0) { this.sprite.body.angularVelocity -= this.DRAG; }
                else if (this.sprite.body.angularVelocity < 0) { this.sprite.body.angularVelocity += this.DRAG;}

                // Bullet management
                this.frames_since_last_shot += 1;

                this.playAnimation('pinkEnemyAnimation',4,true);

                // Update hitbox
                this.sprite.body.setSize(180 + Math.abs(200 * (Math.sin(this.sprite.angle * (Math.PI/180)) / Math.PI*2)), 60 + Math.abs(180 * (Math.cos(this.sprite.angle * (Math.PI/180) / (Math.PI*2)))), Math.sin((this.sprite.angle) * (Math.PI/180)) * 100 - 40, Math.cos((this.sprite.angle) * (Math.PI/180)) * -100 + 100)

                // Update shadow
                this.shad.x = this.sprite.x + LIGHTING.x
                this.shad.y = this.sprite.y + LIGHTING.y
                this.shad.angle = this.sprite.angle
                this.shad.alive = this.sprite.alive
            }
            
        }

        class Bullet {
            constructor(x, y, a, c, V, L, S) {
                this.S = S;

                // bullet v
                this.V = V;

                this.sprite = game.add.sprite(x, y, S);
                if (S == 'rocketAnimation') {
                    this.sprite.scale.setTo(0.1, 0.1);
                }
                else {
                    this.sprite.scale.setTo(0.1, 0.1);
                }
                game.physics.arcade.enable(this.sprite)

                if (S == 'rocketAnimation') {
                    this.sprite.anchor.setTo(0.5, 0);
                    this.sprite.body.setSize(200, 200, 0, -50.0);
                }
                else {
                    this.sprite.anchor.setTo(0.5, 0.5);
                    this.sprite.body.setSize(310, 310, 0, 0);
                }

                this.sprite.angle = a;

                // Give bullet velocity
                var vfa = game.physics.arcade.velocityFromAngle(this.sprite.angle, this.V);
                this.sprite.body.velocity.x = vfa.x;
                this.sprite.body.velocity.y = vfa.y;

                this.sprite.checkWorldBounds = true;
                this.sprite.events.onOutOfBounds.add(function(b) { b.destroy(); }, this);

                if (S == 'rocketAnimation') {
                    this.sprite.angle = a + 90;
                }

                // Lifespan
                this.sprite.lifespan = L;

                if (S == 'rocketAnimation') {
                    this.sprite.animations.add('rocketAnimation');
                }
            }
        }

        //create the background
        tileSprite = game.add.tileSprite(0, 0, window.innerWidth*10, window.innerHeight*10, 'background');
        tileSprite.scale.setTo(0.75, 0.75);
        tileSpriteOverlay = game.add.tileSprite(0, 0, window.innerWidth*10, window.innerHeight*10, 'background');
        tileSpriteOverlay.scale.setTo(0.75, 0.75);
        tileSpriteOverlay.tint = 0xff0000;
        tileSpriteOverlay.alpha = 0.0;


        game.world.sendToBack(tileSpriteOverlay)
        game.world.sendToBack(tileSprite)

        EM = new EnemyManager();
        for (var i = 0; i < NUM_ENEMIES; i++) {
            var e = new Enemy(null);
            EM.addEnemy(e)
        }

        //create a new player
        player = new Player(window.centerX, window.centerY, 0.15, 'pineappleAnimation');
    }

    function update() {
        EM.next()

        //plays animation
        player.playAnimation('pineappleAnimation', 5, true);
        //controls how fast pineapple moves towards mouse
        player.movement(500);
        game.world.bringToTop(PlayerGroup)

        // Player fire bullet
        if (this.spaceKey.isDown) {
            if (OVER) {
                player.reset();
            }
            player.fire();
        }

        // Update score
        if (score_text != null) {
            score_text.setText(player.score);
            score_text_shad.setText(player.score);
            game.world.bringToTop(score_text_shad);
            game.world.bringToTop(score_text);
        }


        for (var i in DecorationGroup.children) {
            c = DecorationGroup.children[i]
            if (c.__type__ == "cactus") {   c.animations.play('cactusAnimation', 3, true); }
            else { c.animations.play('coralAnimation', 6, true); }
        } 

        function enemyCollisionHandler(e1, e2) {
            e1.kill()
            e2.kill()
            EM.evolveNewEnemy()
            EM.evolveNewEnemy()
        }

        function bulletCollisionHandler(a1, a2) {
            if (a2.__owner_id__ == -1) { player.destroyed_enemy(a1.reward); }
            a1.kill()
            EM.evolveNewEnemy(a1);
            for (var i in EM.enemies) {
                if (EM.enemies[i].id == a2.__owner_id__) { EM.enemies[i].reward += EM.enemies[i].KILL_ENEMY_REWARD; }
            }
            a2.destroy()
        }

        // Update bullet lifespans
        for (var i in BulletGroup.children) {
            if (!BulletGroup.children[i].alive) { BulletGroup.children[i].destroy(); }
            else if (BulletGroup.children[i].S == 'rocketAnimation') { BulletGroup.children[i].animations.play('rocketAnimation', 5, true); }
        }

        // Enemy collisions
        // game.physics.arcade.collide(EnemyGroup, EnemyGroup, null, enemyCollisionHandler);
        EM.removeDeadEnemies()

        // Bullet x Enemy collisions
        game.physics.arcade.collide(EnemyGroup, BulletGroup, bulletCollisionHandler);

        // Bullet x Player collision
        game.physics.arcade.collide(BulletGroup, PlayerGroup, function(b, p) { if (b.__owner_id__ != -1 ) { b.kill(); player.got_hit(); }});

        // Bullet x Bullet collision
        game.physics.arcade.collide(BulletGroup, BulletGroup, function(b1, b2) { if (b1.__owner_id__ !== b2.__owner_id__) { b1.kill(); b2.kill(); }});
    }
</script>

</body>
</html>