flappy-sparc.html

flappy bird

<div id="score_div"></div>
<canvas id="my_canvas" width="800" height="600">

</canvas>

<script>
    var myCanvas = document.getElementById("my_canvas");
    var scoreDiv = document.getElementById("score_div");
    var ctx = myCanvas.getContext("2d");

    var score = 0;
    var bird = {
        x: 0,
        y: 0,
        vy: 1
    };

    var pipe = {
        x: 800,
        vx: -2,
        width: 20,
        gap_start: 100,
        gap_size: 100
    };

    var gravity = 0.1;

    var haveWeLostTheGame = false;

    function draw() {
        ctx.clearRect(0, 0, 800, 600);
        ctx.fillRect(bird.x, bird.y, 10, 10);


        ctx.fillRect(pipe.x, 0, pipe.width, pipe.gap_start);
        ctx.fillRect(pipe.x, pipe.gap_start + pipe.gap_size, pipe.width, 600 - (pipe.gap_start + pipe.gap_size));
    }


    function isPointInsideRectangle(px, py, rx, ry, w, h) {
        return px >= rx && px <= rx + w && py >= ry && py <= ry + h;
    }

    function isBirdCollidingWithPipe(bird, pipe) {
        var isCollidingWithTopPart = isPointInsideRectangle(
            bird.x,
            bird.y,
            pipe.x,
            0,
            pipe.width,
            pipe.gap_start);

        var isCollidingWithBottomPart = isPointInsideRectangle(
            bird.x,
            bird.y,
            pipe.x,
            pipe.gap_start + pipe.gap_size,
            pipe.width,
            600 - (pipe.gap_start + pipe.gap_size));

        return isCollidingWithBottomPart || isCollidingWithTopPart;
    }

    function didWeLose() {
        if (isBirdCollidingWithPipe(bird, pipe)) {
            return true;
        }

        if (bird.y < 0 || bird.y > 600) {
            return true;
        }

        return false;
    }

    function update() {
        bird.y += bird.vy;
        bird.vy += gravity;

        pipe.x += pipe.vx;
        pipe.x = pipe.x + pipe.vx;

        if (pipe.x < 0) {
            pipe.x = 800;
            pipe.gap_start = Math.random() * 250 + 50;
            score++;

            scoreDiv.innerText = score;
        }

        if (didWeLose()) {
            alert("you have lost, your score was: " + score);
            haveWeLostTheGame = true;
        }
    }

    function frame() {
        if (haveWeLostTheGame) {
            return;
        }

        // 2 update our internal state
        update();

        // 1 display objects
        draw();
    }

    setInterval(frame, 1000 / 60);

    function onKeyDown(e) {
        bird.vy = -4;
    }

    document.addEventListener("keydown", onKeyDown);

    /*

english
    press a button and your bird goes up
    if you are not pressing a button, your bird falls down
    if you bump into a wall you die
    bird moves to the right
    you get a point every time you go thru a pipe
    if you hit the bottom you die

tasks
    collision
    score
    describe state of the game
        - score
        - position of bird
        - next pipe
            - x, y, gap_size, width
        - velocity of the bird
        - background art
    model the movement
        gravity
    user input
    game loop
        die? what happens?
     */
</script>