![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](wp-content/uploads/2020/08/stop-banner.png)
Use the number keys in order to progress in the story!
var playerChoices = [];
var currentScene = 0;
var sceneList = [];
var leggyFish = [];
var leggyFishLoad = [];
var cat = [];
var catLoad = [];
var catFamily = [];
var catFamilyLoad = [];
var possums = [];
var possumsLoad = [];
var backgrounds = [];
var backgroundsLoad = [];
var endingImages = [];
var endingImagesLoad = [];
var items = [];
var itemsLoad = [];
function preload(){
//preloads images for background, characters, items, etc.
//imgur file link https://imgur.com/a/I9BTC
//backgrounds
//home
backgrounds[0] = "https://i.imgur.com/fdhG0uX.png";
//store
backgrounds[1] = "https://i.imgur.com/XLXhiQ1.png";
//street
backgrounds[2] = "https://i.imgur.com/C9gVejq.png";
//possum ending
backgrounds[3] = "https://i.imgur.com/hoVazkD.png";
//lose ending
backgrounds[4] = "https://i.imgur.com/Dyp8s1Z.png";
//characters
//cat neutral
cat[0] = "https://i.imgur.com/3edcYR9.png";
//cat sad
cat[1] = "https://i.imgur.com/u1bIhz2.png";
//cat happy
cat[2] = "https://i.imgur.com/YFuQ8tH.png";
//cat family neutral
catFamily[0] = "https://i.imgur.com/iWE061b.png";
//cat family angry
catFamily[1] = "https://i.imgur.com/dwXS352.png";
//cat family happy
catFamily[2] = "https://i.imgur.com/gJDwiOw.png";
//cat full family
catFamily[3] = "https://i.imgur.com/qJ2XmCm.png";
//leggy fish neutral
leggyFish[0] = "https://i.imgur.com/afO8XhG.png";
//leggy fish sad
leggyFish[1] = "https://i.imgur.com/h90qSVH.png";
//leggy fish happy
leggyFish[2] = "https://i.imgur.com/kSy0YDp.png";
//possums neutral
possums[0] = "https://i.imgur.com/BV6DYd7.png";
//possums mad
possums[1] = "https://i.imgur.com/2EGHdrk.png";
//water ending
endingImages[0] = "https://i.imgur.com/QwObsf3.png";
//milk ending
endingImages[1] = "https://i.imgur.com/NO4hAnK.png";
//bad possum ending
endingImages[2] = "https://i.imgur.com/smECEKi.png";
//good possum ending
endingImages[3] = "https://i.imgur.com/EX8XQjv.png";
//bad cat ending
endingImages[4] = "https://i.imgur.com/mjmR2QE.png";
//good cat ending
endingImages[5] = "https://i.imgur.com/Xj8lU3S.png";
//leggy fish ending
endingImages[6] = "https://i.imgur.com/ni1ZpWr.png";
//knock off oreos image
items[0] = "https://i.imgur.com/0RvrPHJ.png";
//fish
items[1] = "https://i.imgur.com/cIw1WkF.png";
//grocery store PANTS
items[2] = "https://i.imgur.com/bRV6gGk.png";
//milk
items[3] = "https://i.imgur.com/Psx2phG.png";
// load all images and add to appropriate arrays
for(var b = 0; b < backgrounds.length; b++){
backgroundsLoad[b] = loadImage(backgrounds[b]);
}
for(var c = 0; c < cat.length; c++){
catLoad[c] = loadImage(cat[c]);
}
for(var cF = 0; cF < catFamily.length; cF++){
catFamilyLoad[cF] = loadImage(catFamily[cF]);
}
for(var l = 0; l < leggyFish.length; l++){
leggyFishLoad[l] = loadImage(leggyFish[l]);
}
for(var p = 0; p < possums.length; p++){
possumsLoad[p] = loadImage(possums[p]);
}
for(var e = 0; e < endingImages.length; e++){
endingImagesLoad[e] = loadImage(endingImages[e]);
}
for(var i = 0; i < items.length; i++){
itemsLoad[i] = loadImage(items[i]);
}
}
function createScenes() {
// create all scenes & choices and add them to an array
// format: main dialogue, choice 1 text, choice 1 next scene #,
// choice 2 text, choice 2 next scene #,
// choice 3 text (or "none"), choice 3 next scene,
// background image, character image
// should set up a spreadsheet to keep track of scene nums
//scenes at home
sceneList.push(makeScene("you wake up", "time for cereal", 1,
"none", 0, "none", 0, backgroundsLoad[0], backgroundsLoad[0]));
sceneList.push(makeScene("oh no! you're out of milk", "go to store", 4,
"water's basically the same thing", 2, "none", 0, backgroundsLoad[0], backgroundsLoad[0]));
//ENDING 1
sceneList.push(makeScene("this cereal is reacting strangely to water...","BOOM!!!",3,"none",0,"none",0,backgroundsLoad[0], backgroundsLoad[0]));
sceneList.push(makeScene("your cereal spontaneously combusted", "none", 0, "none", 0, "none", 0, backgroundsLoad[0],backgroundsLoad[0]));
//store scenes
sceneList.push(makeScene("the sun is shining as you walk down the street", "head to the store", 5, "none", 0, "none", 0, backgroundsLoad[2], backgroundsLoad[2]))
sceneList.push(makeScene("you're here for milk, but you're tempted to pick something else up", "resist the temptation", 6,
"wander the aisles", 9, "none", 0, backgroundsLoad[1], backgroundsLoad[1]));
sceneList.push(makeScene("you're on a mission", "take your milk home", 7, "actually, wait...", 9, "none", 0, backgroundsLoad[1], backgroundsLoad[1]));
//ENDING 2
sceneList.push(makeScene("you eat your cereal", "wow, you're so boring", 8, "none", 0, "none", 0, backgroundsLoad[0], backgroundsLoad[0]));
sceneList.push(makeScene("technically you win, but you are a loser", "none", 0, "none", 0, "none", 0, backgroundsLoad[0], backgroundsLoad[0]));
sceneList.push(makeScene("you head to the...", "junk food aisle", 10, "seafood section", 11, "dairy section", 6, backgroundsLoad[1], backgroundsLoad[1]));
sceneList.push(makeScene("you do love your sweets", "let's get some roreos", 13, "aren't you on a diet", 9, "wait what's that", 12, backgroundsLoad[1], backgroundsLoad[1]));
sceneList.push(makeScene("the fish are so fresh", "why not?", 25, "you don't even like seafood", 9, "none", 0, backgroundsLoad[1], backgroundsLoad[1]));
sceneList.push(makeScene("are those........ pants", "grocery store pants oh heck yeah", 42, "you don't trust no grocery store pants", 9, "none", 0, backgroundsLoad[1], backgroundsLoad[1]));
sceneList.push(makeScene("you have just enough money", "time to go home", 14, "none", 0, "none", 0, backgroundsLoad[1], backgroundsLoad[1]));
//possum scenes
sceneList.push(makeScene("you stroll down the street", "what's that?", 15, "none", 0, "none", 0, backgroundsLoad[2], backgroundsLoad[2]));
sceneList.push(makeScene("something emerges from a trah can", "say hi to the... possums?", 16, "none", 0, "none", 0, backgroundsLoad[2], possumsLoad[0]));
sceneList.push(makeScene("the possums eye your purchase", "excuse YOU, these are mine", 17, "offer a cookie", 20, "none", 0, backgroundsLoad[2], possumsLoad[0]));
sceneList.push(makeScene("the possums watch disapprovingly as you walk down the street", "whatever, time for cookies", 18, "none", 0, "none", 0, backgroundsLoad[2], possumsLoad[1]));
//ENDING 3
sceneList.push(makeScene("every bite of cookie tastes like regret", "the possums have cursed you", 19, "none", 0, "none", 0, backgroundsLoad[0], backgroundsLoad[0]));
sceneList.push(makeScene("death is coming for you", "none", 0, "none", 0, "none", 0, backgroundsLoad[0], backgroundsLoad[0]));
sceneList.push(makeScene("the possum grabs the entire package out of your hands and vanishes", "oh well", 21, "none", 0, "none", 0, backgroundsLoad[2], possumsLoad[0]));
sceneList.push(makeScene("you unlock the door with no cookies or milk", "you hear strange rustling sounds", 22, "none", 0, "none", 0, backgroundsLoad[2], backgroundsLoad[2]));
sceneList.push(makeScene("there's an army of possums in your house", "welcome your new family", 23, "none", 0, "none", 0, backgroundsLoad[0], backgroundsLoad[3]));
//ENDING 4
sceneList.push(makeScene("they push forward a gallon of milk", "you did the right thing", 24, "none", 0, "none", 0, backgroundsLoad[0], backgroundsLoad[3]));
sceneList.push(makeScene("the possums are in the house", "none", 0, "none", 0, "none", 0, backgroundsLoad[0], backgroundsLoad[3]));
//cat scenes
sceneList.push(makeScene("you have just enough money", "time to go home", 26, "none", 0, "none", 0, backgroundsLoad[1], backgroundsLoad[1]));
sceneList.push(makeScene("you stroll down the street", "something scurries by", 27, "none", 0, "none", 0, backgroundsLoad[2], backgroundsLoad[2]));
sceneList.push(makeScene("a scrawny cat begs for help", "you coldly walk on", 28, "aw, he looks hungry", 34, "none", 0, backgroundsLoad[2], catLoad[1]));
sceneList.push(makeScene("you are heartless, but not fishless", "continue on your way", 29, "none", 0, "none", 0, backgroundsLoad[2], backgroundsLoad[2]));
sceneList.push(makeScene("as you round the corner, you hear more meows", "it's a family of cats", 30, "none", 0, "none", 0, backgroundsLoad[2], catFamilyLoad[0]));
sceneList.push(makeScene("you stare at each other", "suddenly, one speaks", 31, "none", 0, "none", 0, backgroundsLoad[2], catFamilyLoad[0]));
sceneList.push(makeScene("where's father? he was supposed to bring us food", "uh oh...", 32, "none", 0, "none", 0, backgroundsLoad[2], catFamilyLoad[0]));
//ENDING 5
sceneList.push(makeScene("you remember the cat from before", "should have given him the fish", 33, "prepare to be eaten", 33, "none", 0, backgroundsLoad[2], catFamilyLoad[1]));
sceneList.push(makeScene("you become cat food", "none", 0, "none", 0, "none", 0, backgroundsLoad[2], catFamilyLoad[1]));
sceneList.push(makeScene("the cat politely takes the fish", "farewell sir", 35, "none", 0, "none", 0, backgroundsLoad[2], catLoad[0]));
sceneList.push(makeScene("as you round the corner, you hear more meows", "it's a family of cats", 36, "none", 0, "none", 0, backgroundsLoad[2], catFamilyLoad[0]));
sceneList.push(makeScene("you smile at them", "the cat from before appears!", 37, "none", 0, "none", 0, backgroundsLoad[2], catFamilyLoad[3]));
sceneList.push(makeScene("he gives the fish to his family", "you swear you hear them say ''thanks'' to you", 38, "none", 0, "none", 0, backgroundsLoad[2], catFamilyLoad[3]));
sceneList.push(makeScene("that was nice", "time to go home, finally", 39, "none", 0, "none", 0, backgroundsLoad[2], backgroundsLoad[2]));
sceneList.push(makeScene("when you get home, there's a package at your door", "there's a paw print on it", 40, "none", 0, "none", 0, backgroundsLoad[0], backgroundsLoad[0]));
//ENDING 6
sceneList.push(makeScene("it's... a gallon of milk", "you tearfully thank the cats", 41, "none", 0, "none", 0, backgroundsLoad[0], backgroundsLoad[0]));
sceneList.push(makeScene("you have been blessed by cats", "none", 0, "none", 0, "none", 0, backgroundsLoad[0], backgroundsLoad[0]));
//leggy fish
sceneList.push(makeScene("you have just enough money", "time to go home", 43, "none", 0, "none", 0, backgroundsLoad[1], backgroundsLoad[1]));
sceneList.push(makeScene("you stroll down the street", "there's something odd over there", 44, "none", 0, "none", 0, backgroundsLoad[2], backgroundsLoad[2]));
sceneList.push(makeScene("a fish head peaks at you from behind a bush", "why does this fish has legs", 45, "none", 0, "none", 0, backgroundsLoad[2], leggyFishLoad[0]));
sceneList.push(makeScene("you should really get to know your neighbors", "...some other time", 46, "he looks sad and cold", 47, "none", 0, backgroundsLoad[2], leggyFishLoad[1]));
sceneList.push(makeScene("what are you, heartless", "those pants won't fit you anyways", 47, "none", 0, "none", 0, backgroundsLoad[2], leggyFishLoad[1]));
sceneList.push(makeScene("you look at your grocery store pants", "give the fish pants", 48, "give the fish pants", 48, "GIVE THE FISH PANTS", 48, backgroundsLoad[2], leggyFishLoad[1]));
sceneList.push(makeScene("the fish hurriedly puts them on", "leggy fish looks quite dapper in those pants", 49, "none", 0, "none", 0, backgroundsLoad[2], leggyFishLoad[2]));
sceneList.push(makeScene("you wave good bye", "leggy fish signals you to wait", 50, "none", 0, "none", 0, backgroundsLoad[2], leggyFishLoad[2]));
sceneList.push(makeScene("the fish pulls a box from behind the bush", "thank you?", 51, "none", 0, "none", 0, backgroundsLoad[2], leggyFishLoad[2]));
sceneList.push(makeScene("you head home with the box", "let's see what's inside", 52, "none", 0, "none", 0, backgroundsLoad[0], backgroundsLoad[0]));
//ENDING 7
sceneList.push(makeScene("it's a gallon of milk", "wow, you have such nice neighbors", 53, "none", 0, "none", 0, backgroundsLoad[0], backgroundsLoad[0]));
sceneList.push(makeScene("this is the true ending", "none", 0, "none", 0, "none", 0, backgroundsLoad[0], backgroundsLoad[0]));
}
function setup() {
createCanvas(480, 360);
createScenes();
}
function draw() {
// render the current scene
sceneList[currentScene].draw();
}
function keyPressed() {
var sceneToChange;
// check which key is pressed
// & switch to the correct scene depending on the current scene
if(key == 1) {
sceneToChange = sceneList[currentScene].next1;
currentScene = sceneToChange;
} else if(key == 2 & sceneList[currentScene].opt2 != "none") {
sceneToChange = sceneList[currentScene].next2;
currentScene = sceneToChange;
}
// make sure this is a 3rd option
else if(key == 3 & sceneList[currentScene].opt3 != "none") {
sceneToChange = sceneList[currentScene].next3;
currentScene = sceneToChange;
}
}
function drawScene() {
// draw background image
image(this.bg,0,0,480,360);
// draw character or item
image(this.character,0,0,480,360);
// text underlay
fill(250, 250, 250, 200);
noStroke();
rect(0, (2/3)*height, width,(1/3)*height);
// draw ending text
if(currentScene == 3 || currentScene == 8 || currentScene == 19 || currentScene == 24 || currentScene == 33 || currentScene == 41 || currentScene == 53){
textAlign(CENTER);
image(backgroundsLoad[4],0,0);
fill(255);
text("press '1' to play again ", width/2, 290);
}
else{
fill(0);
}
//adds items
if(currentScene == 12){
image(itemsLoad[2],0,0);
}
if(currentScene == 10){
image(itemsLoad[0],0,0);
}
if(currentScene == 11){
image(itemsLoad[1], 0, 0);
}
if(currentScene == 6 || currentScene == 40 || currentScene == 52 || currentScene == 23){
image(itemsLoad[3],0,0);
}
//adds ending images
if(currentScene == 3){
image(endingImagesLoad[0],0,0);
}
if(currentScene == 8){
image(endingImagesLoad[1],0,0);
}
if(currentScene == 19){
image(endingImagesLoad[2],0,0);
}
if(currentScene == 24){
image(endingImagesLoad[3],0,0);
}
if(currentScene == 33){
image(endingImagesLoad[4],0,0)
}
if(currentScene == 41){
image(endingImagesLoad[5],0,0);
}
if(currentScene == 53){
image(endingImagesLoad[6],0,0);
}
// draw main dialogue
textAlign(CENTER);
textStyle(NORMAL);
textFont("Courier", 12);
text(this.dialogue, width/2, 260);
// draw options
textAlign(LEFT);
textStyle(ITALIC);
// check if each option exists before drawing it
if(this.opt1 != "none"){
text("1. " + this.opt1, width/2-150, 290);
}
if(this.opt2 != "none") {
text("2. " + this.opt2, width/2-150, 310);
}
if(this.opt3 != "none") {
text("3. " + this.opt3, width/2-150, 330);
}
}
// create a scene object
function makeScene(words, one, n1, two, n2, three, n3, b, c) {
var scene = {dialogue: words,
opt1: one,
next1: n1,
opt2: two,
next2: n2,
opt3: three,
next3: n3,
bg: b,
character: c,
draw: drawScene}
return scene;
}
For this project, I collaborated with Allissa Chan in order to create a choice-based game revolving around a trip to the grocery store. We used objects in order to implement all of the scenes, and created our graphics using Adobe Photoshop. There are seven different routes/endings within the game (including our definition of a “true” ending).
