Diana Connolly – Final Project

For my final project, I created a simple computer game. Going into the assignment, I knew that I wanted to create a game in which you simply were flying and avoiding hitting cliffs above and below you. My game turned into a jetpacker game in which you are going deeper and deeper into a cave.

Please click on the canvas to be able to use the key commands. Press ‘S’ first to start the game and get everything moving. Then, you can use ‘J’ to ignite your jetpack, and to jump upwards. I recommend you hold down ‘J’ for longer strides instead of using short, jerky jump motions. Either way, try to stay alive as long as possible, measured by the seconds alive listed in the top left corner and the background cave color changing as you go deeper into the cave.

Jetpack Game

var topRocks = [];
var bottomRocks = [];
var count = 0; //will keep track of where on the noise curve we are
var jetPackY; //character's Y location, from top

var flameImg; //character image with flame
var noFlameImg; //character
var monsterImg; //flying monster character

var notPaused = false; //game is paused
var gameOver = false; //game is in play

var initialTime = 0; //time counter variables
var elapsed;
var timeAtDeath = 0;

var colR = 255; //initial background color
var colG = 161;
var colB = 105;

function preload() {
    flameImg = loadImage("http://dianaconnolly.me/assets/jetpacker!-01.png");
    noFlameImg = loadImage("http://dianaconnolly.me/assets/jetpackerNoFlame-01.png");
}

function setup() {
		monsterX = width + 1000;
		monsterY = height / 2 - 30;
    createCanvas(600, 400);
    frameRate(40);
    jetPackY = height / 2;
    // pushes in noise values into top and bottom rock arrays
    while (count < width + 1) {
        topRocks.push(height - noise(count * 0.01) * height / 3);
        bottomRocks.push(noise(width + count * 0.01) * height / 3);
        count++;
    }
}


function draw() {
    background(colR, colG, colB);

    drawBottomRocks();
    drawTopRocks();

    //prints time alive
    fill(255);
    textSize(15);
    textStyle(BOLD);
    textAlign(LEFT);
    textFont("Helvetica");
    if (!notPaused) {
        elapsed = 0;
    } else if (gameOver) {
        elapsed = timeAtDeath;
    } else {
        var elapsed = getElapsed();
    }
    text("Seconds alive: " + elapsed, 15, 25);

    //moving background and jetpacker
    if (notPaused & !gameOver) {
        timeAtDeath = getElapsed();
        updateScreen();
				monsterX -= 3;
        updateBackgroundColor(elapsed);
        println("lik");
        if (keyIsDown(74)) {
            jetPackY -= 5; //start moving jetPack w/ pressing "J"
        } else {
            jetPackY += 3; //jetPack falls otherwise
        }
    }

    //draw jetPack
    var jetPackX = width / 3;
    if (keyIsDown(74)) {
        image(flameImg, jetPackX, jetPackY, 30, 40);
    } else {
        image(noFlameImg, jetPackX, jetPackY, 30, 40);
    }

    if (!notPaused & !gameOver) { //starting page
        fill(0);
        textSize(20);
        textStyle(BOLD);
        textAlign(CENTER);
        textFont("Helvetica");
        text("Press 'S' to start game", width / 2, height / 2 - 10);
        text("Hold down 'J' to move up", width / 2, height / 2 + 50);
    }

    //checks for hitting bottom rocks
    var tallestBottomPoint = bottomRocks[jetPackX];
    for (var j = jetPackX; j < jetPackX + 30; j++) {
        tallestBottomPoint = max(bottomRocks[j], tallestBottomPoint);
    }
    if (jetPackY + 30 >= height - tallestBottomPoint) {
        gameOver = true;
        textAlign(CENTER);
        textSize(60);
        textFont("Helvetica");
        fill(255, 0, 0);
        text("GAME OVER", width / 2, height / 2);
        textSize(20);
        fill(0);
        text("Press 'R' to start again", width / 2, height / 2 + 40);
    }

    //checks for hitting top rocks
    var tallestTopPoint = height - topRocks[jetPackX];
    for (var k = jetPackX; k < jetPackX + 30; k++) {
        tallestTopPoint = max(height - topRocks[k], tallestTopPoint);
    }
    if (jetPackY + 10 <= tallestTopPoint) {
        gameOver = true;
        textAlign(CENTER);
        textSize(60);
        textFont("Helvetica");
        fill(255, 0, 0);
        text("GAME OVER", width / 2, height / 2);
        textSize(20);
        fill(0);
        text("Press 'R' to start again", width / 2, height / 2 + 40);
    }

    //restart game
    if (keyIsPressed) {
        if (key == 'r' || key == 'R') {
            jetPackY = height / 2;
            notPaused = false;
            gameOver = false;
        }
    }

}

function keyPressed() {
    // if you press S, start and reset start time
    if (key == 's' || key == 'S') {
        initialTime = getSecondsToday();
        notPaused = true;
    }
}



// ----------------------------------------------------------------------------------------
// FUNCTIONS CALLED FROM ABOVE

function drawBottomRocks() {
    beginShape();
    noStroke();
    fill(31, 19, 79);
    vertex(0, height);
    for (var i = 0; i < bottomRocks.length; i++) {
        vertex(i, height - bottomRocks[i]);
    }
    vertex(width, height);
    endShape(CLOSE);
}

function drawTopRocks() {
    beginShape();
    noStroke();
    fill(31, 19, 79);
    vertex(0, 0);
    for (var i = 0; i < topRocks.length; i++) {
        vertex(i, height - topRocks[i]);
    }
    vertex(width, 0);
    endShape(CLOSE);
}

function updateScreen() {
    //shifts over mountains based on noise plots
    for (var i = 0; i < 5; i++) {
        bottomRocks.shift();
        topRocks.shift();
        count++;
        topRocks.push(height - noise(count * 0.01) * height / 2);
        bottomRocks.push(noise(width + count * 0.01) * height / 2);
    }
}

function getSecondsToday() {
    // returns seconds since midnight today
    var h = hour();
    var m = minute();
    var s = second();
    return (s) + (m * 60) + (h * 60 * 60);
}

function getElapsed() {
    // responsible for returning seconds since game started
    return getSecondsToday() - initialTime;
}

function updateBackgroundColor(elapsed) {
    //shifts background color
    colR = map(elapsed, 0, 20, 255, 227);
    colG = map(elapsed, 0, 20, 161, 167);
    colB = map(elapsed, 0, 20, 105, 193);
}

Leave a Reply