Monday, 24 December 2012

Some things I'd like to say... Copter game!

Firstly, I promise that I will eventually finish my hangman game in both C and Java. I've had a lazy month and I haven't done much to improve the code that currently doesn't work....... *sigh*

Now, what I REALLY wanted to blog about was how my Copter game was doing. Yep - you read it right -   I'm making a Copter game! You know, that game on the iPhone where you have to guide a helicopter through a cave-like thing, avoiding obstacles and... Yeah, avoiding obstacles. You know, that game that went out of fashion about 25 years ago? Yeah, well, being the sad and boring person I am, I'm creating a version of that game using functions and variables from Processing.js (Thanks, Ruben) on Khan Academy. At the moment, I've drawn the cave ceiling and floor and a bird which will be the thing you need to guide through the cave. I'm going to give the user an option to either control the bird using the mouse or using the spacebar (which is harder).

This is the code I have written so far:

//start draw loop
var draw = function() {
    //set background colour
    background(28, 3, 25);
    //roof dimension variables
    var x1 = 0;
    //stroke and fill colours for roof and floor
    stroke(0, 0, 0);
    fill(255, 255, 0);
    //roof of cave
    for (var i = 0; i < width/100; i++) {
        rect(x1, height-25, 100, 25);
        x1 += 100;
    }
    //floor dimension variables
    x1 = 0;
    //floor of cave
    for (i = 0; i < width/100; i++) {
        rect(x1, 0, 100, 25);
        x1 += 100;
    }
    //bird position variables
    var x = height/2-15;
    //randomly generate bird RGB values
    var r = random(0, 255),
        g = random(0, 255),
        b = random(0, 255);
    //draw bird
    if (mouseY > 25 && mouseY < height-55) {
        x = mouseY;
        
        // legs
        strokeWeight(7);
        line(125, 240, 125, 320);
        line(125, 320, 98, 349);
        line(125, 320, 163, 346);
        line(125, 320, 139, 361);
        line(200, 240, 200, 320);
        line(200, 320, 169, 355);
        line(200, 320, 238, 346);
        line(200, 320, 215, 363);
        strokeWeight(1);
        
        // body (I still don't fully understand how Beziers work, but I think they're the only way to make the curved shape of a bird's body)
        fill(r, g, b);
        bezier(283, 130, 223, 116, 80, 100, 63, 262);
        bezier(63, 262, 331, 276, 281, 153, 265, 136);
        
        // beak
        triangle(290, 85, 290, 100, 330, 100);
        triangle(290, 100, 290, 115, 330, 100);
        
        // head
        ellipse(250, 100, 100, 100);
        
        
        // eye
        ellipse(270, 80, 25, 25);
        
        // eyeball
        fill(0, 0, 0);
        ellipse(275, 75, 10, 10);
        noFill();
    } else {
        textFont(createFont("cursive", 30), 30);
        text("You lose! Ha!", 50, height/2);
    }
};

And here's what's drawn on the canvas:

No comments:

Post a Comment