Team:Aalto-Helsinki/Flappycoli

From 2014.igem.org

(Difference between revisions)
(Created page with "{{:Team:Aalto-Helsinki/header}} <html> <head> <meta charset="utf-8" /> <title>Flappy Coli</title> <style> #game_div, p { width: 400px; margin: auto; ...")
 
(8 intermediate revisions not shown)
Line 16: Line 16:
</head>
</head>
<body>
<body>
 +
<div class="row splashyla">
 +
        <div class="col-md-12">
 +
            <a href="https://2014.igem.org/"><img src="https://static.igem.org/mediawiki/2014/3/35/Aalto_Helsinki_Logom_iGEM.png" class="img-responsive igem-logo"></a>
 +
        </div>
 +
    </div>
<div id=""page-content-wrapper"">
<div id=""page-content-wrapper"">
-
<script>
+
<article>
-
// Initialize Phaser
+
  <script type="text/javascript" src="https://2014.igem.org/Team:Aalto-Helsinki/flappycoli.js?action=raw&ctype=text/css"></script>
-
var game = new Phaser.Game(400, 490, Phaser.AUTO, 'game_div');
+
-
 
+
-
// Our 'score' global variable
+
-
var score = 0;
+
-
var tailLength=1;
+
-
var tailNodes=130;
+
-
var tailNodes2=70;
+
-
var nodes = Array();
+
-
var nodes2 = Array();
+
-
var music;
+
-
 
+
-
// Define all the states
+
-
game.state.add('load', load_state);  
+
-
game.state.add('menu', menu_state); 
+
-
game.state.add('play', play_state); 
+
-
 
+
-
// Start with the 'load' state
+
-
game.state.start('load'); 
+
-
 
+
-
var load_state = {
+
-
        preload: function() {
+
-
        //this.game.stage.backgroundColor = '#71c5cf';
+
-
        game.load.image("background", "assets/background.png");
+
-
 
+
-
        // Load the bird sprite
+
-
        this.game.load.image('coli', 'assets/coli.png');
+
-
        this.game.load.image('pipe', 'assets/pipe.png');
+
-
        this.game.load.image('logopipe', 'assets/logopipe.png');
+
-
 
+
-
        for (i=0; i<tailNodes; i++) {
+
-
                            nodes[i]={
+
-
                            x:0,
+
-
                            y:0
+
-
                        };
+
-
                        };
+
-
        for (i=0; i<tailNodes2; i++) {
+
-
                            nodes2[i]={
+
-
                            x:0,
+
-
                            y:0
+
-
                        };
+
-
                        };
+
-
    },
+
-
 
+
-
    create: function() {
+
-
        // When all assets are loaded, go to the 'menu' state
+
-
        this.game.state.start('menu');
+
-
    }
+
-
};
+
-
 
+
-
var menu_state = { 
+
-
    create: function() {
+
-
        // Call the 'start' function when pressing the spacebar
+
-
        background = game.add.tileSprite(0, 0, 400, 490, "background");   
+
-
 
+
-
        var space_key = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
+
-
        space_key.onDown.add(this.start, this);
+
-
        if(this.game.input.pointer1.isDown){
+
-
            this.start();
+
-
        }
+
-
 
+
-
        // Defining variables
+
-
        var style = { font: "30px Arial", fill: "#ffffff" };
+
-
        var x = game.world.width/2, y = game.world.height/2;
+
-
 
+
-
        // Adding a text centered on the screen
+
-
        var text = this.game.add.text(x, y-50, "Press space to start", style);
+
-
        text.anchor.setTo(0.5, 0.5);
+
-
 
+
-
        // If the user already played
+
-
        if (localStorage.getItem("highscore") > 0) {
+
-
            // Display its score
+
-
            if(score > 0){
+
-
                var score_label = this.game.add.text(x, y+50, "score: " + score, style);
+
-
            } else {
+
-
                var score_label = this.game.add.text(x, y+50, "", style);
+
-
            }
+
-
            var high_score_label = this.game.add.text(x, y+50, "high score: " + localStorage.getItem("highscore"), style);
+
-
            score_label.anchor.setTo(0.5, 2);
+
-
            high_score_label.anchor.setTo(0.5, 0.5); 
+
-
        }
+
-
    },
+
-
 
+
-
    // Start the actual game
+
-
    start: function() {
+
-
        this.game.state.start('play');
+
-
    }
+
-
};
+
-
 
+
-
var play_state = {
+
-
 
+
-
    // No more 'preload' function, since it is already done in the 'load' state
+
-
 
+
-
    create: function() {
+
-
        background = game.add.tileSprite(0, 0, 400, 490, "background");   
+
-
        var space_key = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
+
-
        space_key.onDown.add(this.jump, this);
+
-
        if(this.game.input.pointer1.isDown){
+
-
            this.jump();
+
-
        }
+
-
 
+
-
        this.pipes = game.add.group();
+
-
        this.pipes.createMultiple(1, 'logopipe');
+
-
        this.pipes.createMultiple(4, 'pipe');
+
-
        this.pipes.createMultiple(2, 'logopipe');
+
-
        this.pipes.createMultiple(4, 'pipe');
+
-
        this.pipes.createMultiple(1, 'logopipe');
+
-
        this.pipes.createMultiple(8, 'pipe');
+
-
        this.timer = this.game.time.events.loop(1500, this.add_row_of_pipes, this);         
+
-
 
+
-
        this.bird = this.game.add.sprite(100, 245, 'coli');
+
-
        this.bird.body.gravity.y = 1150;
+
-
        this.bird.anchor.setTo(-0.2, 0.5);
+
-
 
+
-
        // No 'this.score', but just 'score'
+
-
        score = 0;
+
-
        var style = { font: "30px Arial", fill: "#ffffff" };
+
-
        this.label_score = this.game.add.text(20, 20, "0", style);
+
-
        this.label_high_score_title = this.game.add.text(300, 20, "HI:", style); 
+
-
        this.label_high_score = this.game.add.text(350, 20, localStorage.getItem("highscore"), style);
+
-
 
+
-
        canvas = game.add.graphics(0,0);
+
-
    },
+
-
 
+
-
    update: function() {
+
-
        canvas.clear();
+
-
        canvas.lineStyle(2,0xffffff,1);
+
-
        var headX=this.bird.x+15;
+
-
        var headY=this.bird.y+7;
+
-
        var headX2=this.bird.x+15;
+
-
        var headY2=this.bird.y+15;
+
-
        nodes[0]={
+
-
            x:headX,
+
-
            y:headY
+
-
        };
+
-
        nodes2[0]={
+
-
            x:headX2,
+
-
            y:headY2
+
-
        };
+
-
 
+
-
        var nodeAngle = 0;
+
-
 
+
-
        canvas.moveTo(headX,headY);
+
-
        for(i=1;i<tailNodes-(Math.max(1,(100-score*4)));i++){
+
-
            nodeAngle = Math.atan2(nodes[i].y-nodes[i-1].y,nodes[i].x-nodes[i-1].x);
+
-
            nodes[i]={
+
-
                x: nodes[i-1].x-0.4+tailLength*Math.cos(nodeAngle),
+
-
                y: nodes[i-1].y+tailLength*Math.sin(nodeAngle)
+
-
            }
+
-
            canvas.lineTo(nodes[i].x,nodes[i].y);
+
-
        }
+
-
 
+
-
        if(score > 5){
+
-
            canvas.moveTo(headX2,headY2);
+
-
            for(i=1;i<tailNodes2-(Math.max(1,(70-score*2)));i++){
+
-
                nodeAngle = Math.atan2(nodes2[i].y-nodes2[i-1].y,nodes2[i].x-nodes2[i-1].x);
+
-
                nodes2[i]={
+
-
                    x: nodes2[i-1].x-0.6+tailLength*Math.cos(nodeAngle),
+
-
                    y: nodes2[i-1].y+tailLength*Math.sin(nodeAngle)
+
-
                }
+
-
                canvas.lineTo(nodes2[i].x,nodes2[i].y);
+
-
            }
+
-
        }
+
-
        if (this.bird.inWorld == false){
+
-
            this.check_highscore();
+
-
            this.restart_game();
+
-
        }
+
-
 
+
-
        if (this.bird.angle < 20)
+
-
            this.bird.angle += 1;
+
-
 
+
-
        this.game.physics.overlap(this.bird, this.pipes, this.hit_pipe, null, this);     
+
-
    },
+
-
 
+
-
    jump: function() {
+
-
        if (this.bird.alive == false)
+
-
            return;
+
-
 
+
-
        this.bird.body.velocity.y = -350;
+
-
        this.game.add.tween(this.bird).to({angle: -20}, 100).start();
+
-
    },
+
-
 
+
-
    hit_pipe: function() {
+
-
        if (this.bird.alive == false)
+
-
            return;
+
-
 
+
-
        this.bird.alive = false;
+
-
        this.game.time.events.remove(this.timer);
+
-
 
+
-
        this.check_highscore();
+
-
 
+
-
        this.pipes.forEachAlive(function(p){
+
-
            p.body.velocity.x = 0;
+
-
        }, this);
+
-
    },
+
-
 
+
-
    check_highscore: function(){
+
-
        if (score > localStorage.getItem("highscore")){
+
-
            localStorage.setItem("highscore", score);
+
-
            this.label_high_score.content = localStorage.getItem("highscore"); 
+
-
        }
+
-
    },
+
-
 
+
-
    restart_game: function() {
+
-
        this.game.time.events.remove(this.timer);
+
-
 
+
-
        // This time we go back to the 'menu' state
+
-
        this.game.state.start('menu');
+
-
    },
+
-
 
+
-
    add_one_pipe: function(x, y) {
+
-
        var pipe = this.pipes.getFirstDead();
+
-
        pipe.reset(x, y);
+
-
        pipe.body.velocity.x = -200;
+
-
        pipe.outOfBoundsKill = true;
+
-
    },
+
-
 
+
-
    add_row_of_pipes: function() {
+
-
        var hole = Math.floor(Math.random()*5)+1;
+
-
 
+
-
        for (var i = 0; i < 8; i++)
+
-
            if (i != hole && i != hole +1)
+
-
                this.add_one_pipe(400, i*60+10); 
+
-
 
+
-
        // No 'this.score', but just 'score'
+
-
        score += 1;
+
-
        this.label_score.content = score; 
+
-
    }
+
-
};
+
-
</script>
+
-
   
+
-
  <br><br>
+
   <div id="game_div"> </div>
   <div id="game_div"> </div>
   <br>
   <br>
Line 264: Line 38:
     ga('send', 'pageview');
     ga('send', 'pageview');
   </script>
   </script>
-
</body>
 
 +
</article>
</div>
</div>
 +
</body>
</html>
</html>
 +
{{:Team:Aalto-Helsinki/footer}}
{{:Team:Aalto-Helsinki/footer}}

Latest revision as of 19:36, 13 October 2014

Flappy Coli

By Aalto-Helsinki
Using a guide by lessmilk.com

Retrieved from "http://2014.igem.org/Team:Aalto-Helsinki/Flappycoli"