Untitled

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="mobile-web-app-capable" content="yes">

	<title>FlappyJS</title>

	<script src="sprite.js"></script>

	<style>
	canvas {
		display: block;
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	</style>
</head>
<body>


<!-- START OF SCRIPT -->
<script>

var

    canvas,
    ctx,
    width,
    height,
    fgpos = 0,

    frames = 0,
    score = 0,
    best = 0,

    currentstate,
    states = {
        Splash: 0, Game: 0, Score: 2
    },


    bird = {

        x: 60,
        y: 0,
        frame: 0,
        velocity:0,
        animation: [0,1,2,1],
        rotation: 0,
        gravity: 0.25,
        _jump: 4.6,

        jump: function (){

            this.velocity = -this._jump;
        },

        update : function (){
            var n = currentstate === states.Splash ? 10 : 5;
            this.frame += frames % n === 0 ? 1 : 0;
            this.frame %= this.animation.length;

           if(currentstate === states.Splash){
               this.y = height - 280 + 5*Math.cos(frames/10);
               this.rotation = 0;
           }
    },

        draw : function (ctx){
            ctx.save();
            ctx.translate(this.x, this.y);
            ctx.rotate (this.rotation);


            var n = this.animation[this.frame];
            s_bird[n].draw(ctx, -s_bird[n].width/2, -s_bird[n].height/2);

            ctx.restore();
    }

    },


    pipes = {
        update : function() {},
        draw : function(ctx){}
    };


    function onpress(evt) {

       switch (currentstate) {

           case states.Splash:
               currentstate = states.Game;
               bird.jump();
               break;

           case states.Game:
               bird.jump();
               break;

           case states.Score:
              break;


       }
    }


    //START OF MAIN

    function main(){
        canvas = document.createElement("canvas");

        width = window.innerWidth;
        height = window.innerHeight;

        var evt = "touchstart"
        if (width >= 500) {
            width  = 320;
            height = 480;
            canvas.style.border = "1px solid #000";
            evt = "mousedown";
        }

        document.addEventListener(evt, onpress);
        canvas.width  = width;
        canvas.height = height;
        ctx = canvas.getContext("2d");

        currentstate = states.Splash;

        document.body.appendChild(canvas);

        var img = new Image();
        img.onload = function(){
            initSprites(this);
            ctx.fillStyle = s_bg.color;
            run();

        }

        img.src = "sheet2.png";

    }

    //START OF RUN


    function run(){
        var loop = function (){
            update();
            render();
            window.requestAnimationFrame(loop, canvas);
        }
            window.requestAnimationFrame(loop, canvas);

    }

        //START OF UPDATE

    function update(){
        frames++;
        fgpos = (fgpos - 2) % 14;

        bird.update();
        pipes.update();
    }
         //START OF RENDER


    function render(){
        ctx.fillRect(0, 0, width, height);
        s_bg.draw(ctx, 0, height - s_bg.height);
        s_bg.draw(ctx, s_bg.width, height - s_bg.height);

        bird.draw(ctx);
        pipes.draw(ctx);


        s_fg.draw(ctx, fgpos, height - s_fg.height);
        s_fg.draw(ctx, fgpos+s_fg.width, height - s_fg.height);


        var width2 = width/2;

        if (currentstate === states.Splash) {
            s_splash.draw(ctx, width2 - s_splash.width/2, height - 300);
            s_text.GetReady.draw(ctx, width2 - s_text.GetReady.width/2, height - 380);
        }
    }


    main();


</script> <!-- START OF SCRIPT -->


</body>
</html>