jooheek&heeseoc – FinalProject

Press 1 to start!

sketch

//JooHee Kim & Steph Chun
//jooheek@andrew.cmu.edu
//heeseoc@andrew.cmu.edu
//Section E & A
//FinalProject

//background peak variables
var peakDetail = 0.005;
var peakSpeed = 0;
//image variables
var startingImg;
var roseImg, foxImg, kingImg, heartImg, princeImg;
var rose1, rose2, fox1, fox2, king1, king2;
var stage1, stage2;
//image size variable
var imgSize = 30;
//image x location for the rose, fox, king, heart
var roseImgX, foxImgX, kingImgX, heartImgX;
//prince x and y location variables
var princeX = 0;
var princeY = 300; 
//prince velocity
var step = 3;
//variable to show different maps
var gameState = "startingPage";

function preload() {
	//starting page image load
	startingImg = loadImage("https://i.imgur.com/FaTj1qD.png");
	//characters image load
	roseImg = loadImage("https://i.imgur.com/GOidsQF.png");
	foxImg = loadImage("https://i.imgur.com/82QrEHu.png");
	kingImg = loadImage("https://i.imgur.com/VGJWuoN.png");
	heartImg = loadImage("https://i.imgur.com/n5dXPi2.png");

	//dialogues image load
	rose1 = loadImage("https://i.imgur.com/tqYH2Mj.png");
	rose2 = loadImage("https://i.imgur.com/dKifumO.png");
	fox1 = loadImage("https://i.imgur.com/6TTLTzV.png");
	fox2 = loadImage("https://i.imgur.com/54o8F0T.png");
	king1 = loadImage("https://i.imgur.com/CJzrcxQ.png");
	king2 = loadImage("https://i.imgur.com/Q8F6SeH.png");

	//stage continue image loads
	stage1 = loadImage("https://i.imgur.com/W075rzc.png");
	stage2 = loadImage("https://i.imgur.com/E0UeoHi.png");

	//prince image load
	princeImg = loadImage("https://i.imgur.com/nHWDXuC.png");

}

function setup() {
    createCanvas(480, 480);

}

function draw() {

	//loads different map functions at different conditions
	if (gameState == "startingPage") {
		startingPage();
	} else if (gameState == "mapOneMakePlanetMountains") {
		mapOneMakePlanetMountains();
	} else if (gameState == "mapTwoDesertMountainsAndPlatforms") {
		mapTwoDesertMountainsAndPlatforms();
	} else if (gameState == "mapThreeKingPlanet") {
		mapThreeKingPlanet();
	}

	//moves prince with up and right arrow
    if (keyIsDown(RIGHT_ARROW)){
    	princeX += step; //right
    }

    if (keyIsDown(UP_ARROW)){
    	princeY -= step; //up
    } else {//if key is released, the prince falls until the floor
    	princeY += step;
    	princeY = min(princeY, height*3/4-princeImg.height);
    }

}

function keyPressed() {
	//when 1, 2, 3 keys are pressed, the map changes
	if (key == '1') {
		gameState = "mapOneMakePlanetMountains";
		princeX = 0;
		princeY = 300;
	} else if (key == '2') {
		gameState = "mapTwoDesertMountainsAndPlatforms";
		princeX = 0;
		princeY = 300;
	} else if (key == '3') {
		gameState = "mapThreeKingPlanet";
		princeX = 0;
		princeY = 300;
	}
}

//First Game Start Page
function startingPage() {
	image(startingImg, 0, 0, width, height);
	
}

//Map One
function mapOneMakePlanetMountains() {
	background(40, 40, 80);
	noStroke();

	//stars in the background
	fill(255);
	ellipse(random(0, width), random(0, height), 10, 10);

	//peaks in the background
	fill(200);
	beginShape(); 
    for (var planet = 0; planet <= width; planet++) {
        var planetOverallSpeed = (planet * peakDetail) + (millis() * peakSpeed);
        var planetPeaks = map(noise(planetOverallSpeed), 0, 1, width/2, height/4);
        vertex(planet, planetPeaks); 
    }
    vertex(width,height);
    vertex(0, height);
    endShape();

	//plant floor
	var planetFloorY = height*3/4;
	fill(100);
	rect(0, planetFloorY, width, height);

	//rose image
	roseImgX = width - 60;
	image(roseImg, roseImgX, planetFloorY - imgSize, imgSize, imgSize);

	//heart image
	heartImgX = width/2;
	//if prince touches heart it disappears
	if (princeX < heartImgX) {
		image(heartImg, heartImgX, planetFloorY - imgSize, imgSize, imgSize);	
	}

	//prince image
	image(princeImg, princeX, princeY);

	//speech bubbles appear when prince and rose meet
	if (princeX >= roseImgX-60) {
		image(rose1, roseImgX - 130, height*3/4 - 150, imgSize*3, imgSize*3);
		image(rose2, roseImgX - 60, height*3/4 - 130, imgSize*3, imgSize*3);
	}

	//next stage sign when prince goes to end
	if (princeX > roseImgX) {
		image(stage1, 2, height/2-stage1.height/2, stage1.width, stage1.height);
	}

}

//map two
function mapTwoDesertMountainsAndPlatforms() {
	background(131, 234, 255);
	noStroke();
    
    //desert peaks background
    fill(255, 210, 139);
    beginShape(); 

    for (var desert = 0; desert <= width; desert++) {
        var desertOverallSpeed = (desert * peakDetail) + (millis() * peakSpeed);
        var desertPeaks = map(noise(desertOverallSpeed), 0, 1, width/2, height/4);
        vertex(desert, desertPeaks); 
    }

    vertex(width,height);
    vertex(0, height);
    endShape();

    //floor rectangles
    var floorY = height*3/4;
    fill(213, 148, 92);

    rect(0, floorY, width/4, height/4);

    rect(width/2, floorY, width/2, height/4);

    //fox image
    foxImgX = width - 60;
    image(foxImg, foxImgX, floorY - imgSize, imgSize, imgSize);
	
	//heart image
	heartImgX = width/2;
	//if prince touches heart, it disappears
	if (princeX < heartImgX) {
    	image(heartImg, heartImgX, floorY - imgSize, imgSize, imgSize);	
	}

	//prince image
	image(princeImg, princeX, princeY);

	//speech bubbles appear when prince meets fox
	if (princeX >= foxImgX-50) {
		image(fox1, foxImgX - 130, floorY - 150, imgSize*3, imgSize*3);
		image(fox2, foxImgX - imgSize*2, floorY - 130, imgSize*3, imgSize*3);
	}
	
	//next stage sign when prince touches edge
	if (princeX > foxImgX) {
		image(stage2, 2, height/2-stage2.height/2, stage2.width, stage2.height);
	}


}

//map three
function mapThreeKingPlanet() {
	background(40, 40, 80);
	noStroke();

	//stars in background
	fill(255);
	ellipse(random(0, width), random(0, height), 10, 10);

    //peaks in background
    fill(200);
	beginShape(); 
    for (var planet = 0; planet <= width; planet++) {
        var planetOverallSpeed = (planet * peakDetail) + (millis() * peakSpeed);
        var planetPeaks = map(noise(planetOverallSpeed), 0, 1, width/2, height/4);
        vertex(planet, planetPeaks); 
    }

    vertex(width,height);
    vertex(0, height);
    endShape();

    //floors rectangles
    var kingFloorY = height*3/4;

    fill(100);
    rect(0, kingFloorY, width/6, height/4);

    rect(width/3, kingFloorY, width/6, height/4);

    rect(width*2/3, kingFloorY, width/6, height/4);

    rect(width*5/6, height/2, width/6, height/2);

    //king image
    kingImgX = width - width/8;
    image(kingImg, kingImgX, height/2 - imgSize*2, imgSize*2, imgSize*2);
	
	//heart image
	heartImgX = width*2/3;
	//heart disappears when prince touches heart
	if (princeX < heartImgX) {
    	image(heartImg, heartImgX, height*3/4 - imgSize, imgSize, imgSize);	
	}

	//prince image
	image(princeImg, princeX, princeY);

	//if prince reaches king, speech bubbles appear
	if (princeX >= kingImgX-80) {
		image(king2, kingImgX - 140, height*3/4 - imgSize*4, imgSize*3, imgSize*3);
		image(king1, kingImgX - 60, height/2 - imgSize*4, imgSize*3, imgSize*3);
	}
}

We wanted to make an interactive game like SuperMario with the visual/thematic concept as The little Prince. In our game, the player controls the main character to avoid the obstacles, collect items, and in addition to that, we added a dialogue feature so that we can implement the storyline of The Little Prince better. Because of the time constrain, we weren’t able to achieve everything that we’ve listed in the project brief, and we had to re-distribute the workload so that it makes sense to the timeframe that we’ve got.
Also, making the game itself work was more difficult that we thought because of the unexpected details that we had to tackle.