Skip to content

Instantly share code, notes, and snippets.

@buesing

buesing/Flappy Ball

Created March 20, 2014 19:10
Show Gist options
  • Save buesing/9671515 to your computer and use it in GitHub Desktop.
Save buesing/9671515 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Flappy Ball
<!DOCTYPE html>
<html>
<style>
body { margin:0; }
canvas { display:block; }
</style>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript" charset="utf-8">
window.onload = function() {
canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx = canvas.getContext("2d");
reset();
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
(function animloop(){
requestAnimFrame(animloop);
render();
})();
};
function reset() {
POS_X = canvas.width / 4;
pos_y = canvas.height / 3;
velocity = 1.5;
score = 0;
RADIUS = 10;
i = 0;
gap = 200;
barriers = [];
game_over = false;
}
document.onmousedown = function(e) {
if (game_over) { reset(); }
cx = e.clientX;
cy = e.clientY;
velocity = -10;
};
function Barrier(y1, y2) {
console.log(y1, y2);
this.y1 = y1;
this.y2 = y2;
this.color = randColor();
this.x = canvas.width;
}
Barrier.prototype.draw = function() {
ctx.fillRect(this.x, this.y2, 40, canvas.height - this.y2);
ctx.fillRect(this.x, 0, 40, this.y1);
ctx.fillStyle = this.color;;
ctx.fill();
this.x -= 5;
};
function randColor() {
return '#'+Math.floor(Math.random()*16777215).toString(16);
}
function render() {
if (game_over) {
ctx.font = "100px Verdana";
ctx.fillStyle = "black";
ctx.fillText("Game over!", 100, 100);
ctx.fillText("score: "+score, 100, 200);
return;
}
pos_y += velocity;
velocity += 0.4;
canvas.width = canvas.width;
ctx.fillStyle = "#000000";
ctx.beginPath();
ctx.arc(POS_X, pos_y, RADIUS, 0, 2*Math.PI, true);
ctx.closePath();
ctx.fill();
// barriers
if (i == 0) {
score++;
gap -= 0.5;
var y = Math.random() * (canvas.height - 300);
barriers.push(new Barrier(y,y + gap));
if (barriers.length > 10) {
barriers.shift();
}
}
i = (i + 1) % 100;
for (var o = 0; o < barriers.length; o++) {
barriers[o].draw();
if (barriers[o].x < POS_X && barriers[o].x+40 > POS_X) {
if (pos_y > barriers[o].y2 || pos_y < barriers[o].y1) {
game_over = true;
}
}
}
if (pos_y > canvas.height) {
game_over = true;
}
}
</script>
</body>
</html>
@izelnakri
Copy link

Added intro h1

<!DOCTYPE html>
<html>
<style>
body { margin:0; }
canvas { display:block; }
</style>
<body>
<h1 id="intro" style="position: absolute; top: 20px; color: red;">Press left-click to fly!</h1><canvas id="canvas"></canvas>
<script type="text/javascript" charset="utf-8">
window.onload = function() {
    function removeIntro () {
        document.getElementById("intro").remove();
    }
    setTimeout(removeIntro, 2500);
    canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    ctx = canvas.getContext("2d");
    reset();
    window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       ||
              window.webkitRequestAnimationFrame ||
              window.mozRequestAnimationFrame    ||
              function( callback ){
                window.setTimeout(callback, 1000 / 60);
              };
    })();


    (function animloop(){
      requestAnimFrame(animloop);
      render();
    })();
};

function reset() {
    POS_X = canvas.width / 4;
    pos_y = canvas.height / 3;
    velocity = 1.5;
    score = 0;
    RADIUS = 10;
    i = 0;
    gap = 200;
    barriers = [];
    game_over = false;
}

document.onmousedown = function(e) {
    if (game_over) { reset(); }
    cx = e.clientX;
    cy = e.clientY;
    velocity = -10;
};


function Barrier(y1, y2) {
    console.log(y1, y2);
    this.y1 = y1;
    this.y2 = y2;
    this.color = randColor();
    this.x = canvas.width;
}

Barrier.prototype.draw = function() {
    ctx.fillRect(this.x, this.y2, 40, canvas.height - this.y2);
    ctx.fillRect(this.x, 0, 40, this.y1);
    ctx.fillStyle = this.color;;
    ctx.fill();
    this.x -= 5;
};

function randColor() {
    return '#'+Math.floor(Math.random()*16777215).toString(16);
}
function render() {
    if (game_over) {
        ctx.font = "100px Verdana";
        ctx.fillStyle = "black";
        ctx.fillText("Game over!", 100, 100);
        ctx.fillText("score: "+score, 100, 200);
        return;
    }
    pos_y += velocity;
    velocity += 0.4;
    canvas.width = canvas.width;
    ctx.fillStyle = "#000000";
    ctx.beginPath();
    ctx.arc(POS_X, pos_y, RADIUS, 0, 2*Math.PI, true);
    ctx.closePath();
    ctx.fill();
    // barriers
    if (i == 0) {
        score++;
        gap -= 0.5;
        var y = Math.random() * (canvas.height - 300);
        barriers.push(new Barrier(y,y + gap));
        if (barriers.length > 10) {
            barriers.shift();
        }
    }
    i = (i + 1) % 100;
    for (var o = 0; o < barriers.length; o++) {
        barriers[o].draw();
        if (barriers[o].x < POS_X && barriers[o].x+40 > POS_X) {
            if (pos_y > barriers[o].y2 || pos_y < barriers[o].y1) {
                game_over = true;
            }
        }
    }
    if (pos_y > canvas.height) {
        game_over = true;
    }
}
</script>
</body>
</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment