Untitled

<?php include('server.php');

?>

<!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>
        @import url(http://fonts.googleapis.com/css?family=Exo:100,200,400);
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:700,400,300);

    canvas {
        display: block;
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }


    </style>
</head>
<body>
<noscript>
<p>For full functionality of this page it is necessary to enable JavaScript.
Here are the <a href="http://www.enable-javascript.com/" target="_blank">
instructions how to enable JavaScript in your web browser</a>.</p>
</noscript>
<script>
var
// Game vars //
canvas,
ctx,
width,
height,
won,
dau = 200,
fgpos = 0,
frames = 0,
score = 0,
best = localStorage.getItem("best") || 0,
// State vars //
currentstate,
states = {
      Splash: 0, Game: 1,  Score: 2, Loading: 3, Selection: 4
},
// Game objects //
/**
 * Ok button initiated in main()
 */
okbtn,
karumebtn,
jerobtn,
bukubtn,
/**
 * The bird
 */
bird = {
    x: 60,
    y: 100,
    frame: 0,
    velocity: 0,
    animation: [0, 1, 2, 1], // animation sequence
    rotation: 0,
    radius: 12,
    gravity: 0.25,
    _jump: 4.6,
    /**
     * Makes the bird "flap" and jump
     */
    jump: function() {
        this.velocity = -this._jump;
    },
    /**
     * Update sprite animation and position of bird
     */
    update: function() {
        // make sure animation updates and plays faster in gamestate
        var n = currentstate === states.Splash ? 10 : 5;
        this.frame += frames % n === 0 ? 1 : 0;
        this.frame %= this.animation.length;
        // in splash state make bird hover up and down and set
        // rotation to zero
        if (currentstate === states.Splash  ) {
            this.y = height - 280 + 5*Math.cos(frames/10);
            this.rotation = 0;
        } else { // game and score state //
            this.velocity += this.gravity;
            this.y += this.velocity;
            // change to the score state when bird touches the ground
            if (this.y >= height - s_fg.height+40) {
                this.y = height - s_fg.height+40;
                if (currentstate === states.Game) {
                    currentstate = states.Score;
                }
                // sets velocity to jump speed for correct rotation
                this.velocity = this._jump;
            }
            // when bird lack upward momentum increment the rotation
            // angle
            if (this.velocity >= this._jump) {
                this.frame = 1;
                this.rotation = Math.min(Math.PI/2, this.rotation + 0.3);
            } else {
                this.rotation = -0.3;
            }
        }
    },
    /**
     * Draws bird with rotation to canvas ctx
     *
     * @param  {CanvasRenderingContext2D} ctx the context used for
     *                                        drawing
     */
    draw: function(ctx) {
        ctx.save();
        // translate and rotate ctx coordinatesystem
        ctx.translate(this.x, this.y);
        ctx.rotate(this.rotation);

        var n = this.animation[this.frame];
        // draws the bird with center in origo
        s_bird[n].draw(ctx, -s_bird[n].width/2, -s_bird[n].height/2);
        ctx.restore();
    }
},
/**
 * The pipes
 */
pipes = {
    _pipes: [],
    // padding: 80, // TODO: Implement paddle variable
    /**
     * Empty pipes array
     */
    reset: function() {
        this._pipes = [];
    },
    /**
     * Create, push and update all pipes in pipe array
     */
    update: function() {
        // add new pipe each 100 frames
        if (frames % 100 === 0) {
            // calculate y position
            var _y = height - (s_pipeSouth.height+s_fg.height+120+200*Math.random());
            // create and push pipe to array
            this._pipes.push({
                x: 500,
                y: _y,
                width: s_pipeSouth.width,
                height: s_pipeSouth.height
            });
        }
        for (var i = 0, len = this._pipes.length; i < len; i++) {
            var p = this._pipes[i];


            if (i === 0) {


                    //score += p.x === (bird.x) ? 1 : 0;
                    score += p.x === (bird.x + 2.5) ? 1 : 0;
                    score += p.x === (bird.x + 3.5) ? 1 : 0;
                    score += p.x === (bird.x + 4.5) ? 1 : 0;
                    score += p.x === (bird.x + 5.5) ? 1 : 0;
                    //score += p.x === (bird.x + 8) ? 1 : 0;
                    //score += p.x === (bird.x + 7.5) ? 1 : 0;


                // collision check, calculates x/y difference and
                // use normal vector length calculation to determine
                // intersection
                var cx  = Math.min(Math.max(bird.x, p.x), p.x+p.width);
                var cy1 = Math.min(Math.max(bird.y, p.y), p.y+p.height);
                var cy2 = Math.min(Math.max(bird.y, p.y+p.height+300), p.y+2*p.height+300);
                // closest difference
                var dx  = bird.x - cx;
                var dy1 = bird.y - cy1;
                var dy2 = bird.y - cy2;
                // vector length
                var d1 = dx*dx + dy1*dy1;
                var d2 = dx*dx + dy2*dy2;
                var r = bird.radius*bird.radius;
                // determine intersection
                if (r > d1 || r > d2) {
                    currentstate = states.Score;
                }
            }
            // move pipe and remove if outside of canvas
            p.x -= 1;
            if (p.x < -p.width) {
                this._pipes.splice(i, 1);
                i++;
                len--;
            }

            if (score <= 4) {p.x -= 2.5;
            }else if (score >=5 && score <=9) {p.x -= 3.5;
            }if (score >=10 && score <=14) {p.x -= 4.5;
            }else if (score >=15 && score <=19) {p.x -= 5.5;
            }else if (score >= 20 && score <= 24) {p.x -=5.5;
            }if (score >=25 && score < 30){p.x -= 5.5;
            }else if (score === 30){p.x -= 8;

                currentstate = states.Score;

            }


         }
    },
    /**
     * Draw all pipes to canvas context.
     *
     * @param  {CanvasRenderingContext2D} ctx the context used for
     *                                        drawing
     */
    draw: function(ctx) {
        for (var i = 0, len = this._pipes.length; i < len; i++) {
            var p = this._pipes[i];
            s_pipeSouth.draw(ctx, p.x, p.y);
            s_pipeNorth.draw(ctx, p.x, p.y+100+p.height);
        }
    }
};
/**
 * Called on mouse or touch press. Update and change state
 * depending on current game state.
 *
 * @param  {MouseEvent/TouchEvent} evt tho on press event
 */
function onpress(evt) {
    switch (currentstate) {


        //Splash
        case states.Splash:

           /* if(balance >= 200){

            oldblc = balance;

            newblc = balance - 200;

            insert newblc to database;

                if (oldblc === balance){

                    alert("Transaction failed.")


                }else {*/
                    currentstate = states.Game;
            bird.jump();
            break;
                    /*
                }

        }else {

            alert("You don't have sufficient Balance.")
        }
            */

            currentstate = states.Game;
            bird.jump();
            break;
        // update bird velocity
        case states.Game:
            bird.jump();
            break;
        // change state if event within okbtn bounding box
        case states.Score:
            // get event position
            var mx = evt.offsetX, my = evt.offsetY;
            if (mx == null || my == null) {
                mx = evt.touches[0].clientX;
                my = evt.touches[0].clientY;
            }
            // check if within
            if (okbtn.x < mx && mx < okbtn.x + okbtn.width &&
                okbtn.y < my && my < okbtn.y + okbtn.height
            ) {
                pipes.reset();
                window.location=('twoselection.php');
                score = 0;
            }


    }
}
/**
 * Starts and initiate the game
 */
function main() {
    // create canvas and set width/height
    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";
    }
    // listen for input event
    document.addEventListener(evt, onpress);
    canvas.width = width;
    canvas.height = height;
    if (!(!!canvas.getContext && canvas.getContext("2d"))) {
        alert("Your browser doesn't support HTML5, please update to latest version");
    }
    ctx = canvas.getContext("2d");


    currentstate = states.Splash;
    // append canvas to document
    document.body.appendChild(canvas);
    // initate graphics and karumebtn
    var imge = new Image();
    imge.onload = function() {
        initSprites(this);
        ctx.fillStyle = s_bg.color;
        karumebtn = {
            x: (width - s_buttons.Karume.width)/2,
            y: height/2 - 100,
            width: s_buttons.Karume.width,
            height: s_buttons.Karume.height
        }
    run();
    }

    // initate graphics and jerobtn
    var imgee = new Image();
    imgee.onload = function() {
        initSprites(this);
        ctx.fillStyle = s_bg.color;
        jerobtn = {
            x: (width - s_buttons.Jero.width)/2,
            y: height/2 - S-buttons.jero.width/2,
            width: s_buttons.Jero.width,
            height: s_buttons.Jero.height
        }
        run();
    }

    // initate graphics and bukubtn
    var imgeee = new Image();
    imgeee.onload = function() {
        initSprites(this);
        ctx.fillStyle = s_bg.color;
        bukubtn = {
            x: (width - s_buttons.Buku.width)/2,
            y: height/2 + 50,
            width: s_buttons.Buku.width,
            height: s_buttons.Buku.height
        }
    run();
    }


    // initate graphics and okbtn
    var img = new Image();
    img.onload = function() {
        initSprites(this);
        ctx.fillStyle = s_bg.color;
        okbtn = {
            x: (width - s_buttons.Ok.width)/2,
            y: height - 200,
            width: s_buttons.Ok.width,
            height: s_buttons.Ok.height
        }


        run();
    }
    img.src = "res/sheet.png";
}
/**
 * Starts and update gameloop
 */
function run() {
    var loop = function() {
        update();
        render();
        window.requestAnimationFrame(loop, canvas);
    }
    window.requestAnimationFrame(loop, canvas);
}
/**
 * Update forground, bird and pipes position
 */
function update() {
    frames++;
    if (currentstate !== states.Score) {
        fgpos = (fgpos - 2) % 14;


    } else {
        // set best score to maximum score
        best = Math.max(best, score);
        localStorage.setItem("best", best);


    }


    if (currentstate === states.Game) {
        pipes.update();


    }
    bird.update();
}
/**
 * Draws bird and all pipes and assets to the canvas
 */
function render() {
    // draw background color
    ctx.fillRect(0, 0, width, height);
    // draw background sprites
    s_bg.draw(ctx, 0, 0);
    s_bg.draw(ctx, s_bg.width - 5, 0);
    pipes.draw(ctx);
    bird.draw(ctx);
    // draw forground sprites
    s_fg.draw(ctx, fgpos, 430);
    s_fg.draw(ctx, fgpos+s_fg.width, 430);
    var width2 = width/2; // center of canvas
    if (currentstate === states.Splash) {
        // draw splash text and sprite to canvas
        s_splash.draw(ctx, width2 - s_splash.width/2, height - 300);
        //s_text.GetReady.draw(ctx, width2 - s_text.GetReady.width/2, height-380);


    }

    //if (currentstate === states.Selection) {
        // draw splash text and sprite to canvas

       // s_buttons.Karume.draw(ctx, karumebtn.x, karumebtn.y);
        //s_buttons.Jero.draw(ctx, jerobtn.x, jerobtn.y);
        //s_buttons.Buku.draw(ctx, bukubtn.x, bukubtn.y);


    //}
    if (score === 30) {

                    currentstate = states.Score;
                }
    if (currentstate === states.Score) {
        // draw gameover text and score board
        s_text.GameOver.draw(ctx, width2 - s_text.GameOver.width/2, height-400);
        s_score.draw(ctx, width2 - s_score.width/2, height-340);
        s_buttons.Ok.draw(ctx, okbtn.x, okbtn.y);


        //failed
        if (score <= 19) {
        s_scoredf.draw(ctx, width2 - s_scoredf.width/2 - 30, height-327);
        }


        //Vyangu
        //score >= 20 && <= 24
        if (score >= 20) {
        s_scored.draw(ctx, width2 - s_scored.width/2 - 30, height-330);


            //Display amount won
            if (dau === 200) {

                if (score >= 20 && score <= 24) {
                    won =dau * 10;

                }


                    //score >= 25 && <= 29
                if (score >= 25 && score <= 29) {
                    won =dau * 20;

                }

                if (score === 30) {
                    won =dau * 30;
                    currentstate = states.Score;
                }


                    if (won === 2000) {


    </script>
<?php


$link=mysqli_connect("localhost", "root", "....");


if(!$link){

    die ("No connection: ".mysqli_connect_error());

} else{

mysqli_select_db($link, "db");


$res=mysqli_query($link, "select balance from registrations where username='$_SESSION[username]'");

  //$Balance = $res;


$count=mysqli_num_rows($res);


            if($count === 1){

         //   insert newblc to database;


      mysqli_query($link, "UPDATE registrations SET balance = balance + won WHERE username = '$_SESSION[username]'");


            }else {

                 ?>


        <script type="text/javascript">


            alert("Something went wrong.");
        </script>

               <?php


            }


}


?>
<script>


                                s_won1.draw(ctx, width2 - s_won1.width/2 - 30, height-278);

                    }

                    if (won === 4000) {


                                s_wonn2.draw(ctx, width2 - s_wonn2.width/2 - 30, height-278);


                    }

                    if (won === 6000) {


                                s_wonnn3.draw(ctx, width2 - s_wonnn3.width/2 - 30, height-278);
                            }


                    }
            }

        }


        // draw score and best inside the score board
        s_numberS.draw(ctx, width2-47, height-304, score, null, 10);
        s_numberS.draw(ctx, width2-47, height-262, best, null, 10);
    } else {


        // draw score to top of canvas
        s_numberB.draw(ctx, null, 20, score, width2);
    }
}
// start and run the game
main();
    </script>


</body>
</html>