elizabew-final project – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

Click on either of the two choices that are available to continue through the story.
(Try the closet route!)
//calls beginning function to start the game over
var scene = new beginning();

//holds background images
var bg = [];

var bgURL = [
  //outside image
  "https://i.imgur.com/NhThk6g.jpg",
  //lake reflection image
  "https://i.imgur.com/GA10Vet.jpg",
  //image of both lake and forest
  "https://i.imgur.com/c6C6zEC.jpg",
  //cat image
  "https://i.imgur.com/4zrzVTj.jpg",
  //true ending image
  "https://i.imgur.com/LADTQJI.jpg"];

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

function preload(){
  // load images from URL
  for (i = 0; i < bgURL.length; i++){
    bg.push(loadImage(bgURL[i]));
  }
}

//LIST OF SCENES
function beginning() {
  this.sentence = "You wake up surrounded by complete darkness." +
  " Your body aches and you hear the faint sound of growling behind you." +
  " You pull your red hood around yourself to keep warm." +
  " You feel around and find two doors." +
  " One with a round knob and one of with a square knob.";
  this.left = new sit1();
  this.right = new sitA();
  this.lefttext = "go through the round knobbed door";
  this.righttext = "go through the square knobbed door";
  this.fillcolor = "black";
}

//Round knobbed door
function sit1() {
  this.sentence = "You immediately begin to sprint out the door." +
  " The fresh air hits your face like cold knives. Outside." +
  " You look behind you to hear the growling rumble louder." +
  " She's waking up too.";
  this.left = new sit2();
  this.right = new death("You wait and see what happens." +
  " The beast begins to wake up and it immediately sees you" +
  " She's angry and you know exactly why." +
  " She leaps towards you in a familiar fashion," +
  " mouth wide open and ready to bite down...");
  this.lefttext = "RUN!!!!";
  this.righttext = "Wait and see what happens";
  this.fillcolor = "";
  this.b = "outside";
}

function sit2() {
  this.sentence = "You run away before the beast could notice you leaving." +
  " You see a forest and a lake in the distance";
  this.left = new sitOne();
  this.right = new sit3();
  this.lefttext = "Run towards the forest";
  this.righttext = "Run towards the lake";
  this.fillcolor = "";
  this.b = "treeAndLake"
}

function sit3() {
  this.sentence = "As you run towards the lake," +
  " you stop by the edge of the water," +
  " mesmorized by your own unrecognizable reflection...";
  this.left = new death("You can't help but continue staring at yourself." +
  " Bright blue eyes and a long red cape embracing your frail body." +
  " You hear growling beghind you... GIVE...IT...BACK.... ");
  this.right = new sitThree();
  this.lefttext = "Keep staring at your own reflection";
  this.righttext = "Pull your eyes away and continue running";
  this.fillcolor = "";
  this.b = "reflection"
}

function sitOne(){
  this.sentence = "Start running faster and faster through the forest," +
  " trees flashing past you." +
  " You hear the growling not too far behind...";
  this.left = new death("You climbed up the tree as fast as you could." +
  " Right as you grabbed a second branch," +
  " you feel your hood getting tugged, pulling you down with it...");
  this.right = new sitTwo();
  this.lefttext = "Climb up a tree";
  this.righttext = "Hide in the bushes";
  this.fillcolor = "flashing green";
}

function sitTwo(){
  this.sentence = "You jump into a nearby bush and wait..." +
  " the sound of a frustrated growling felt close," +
  " but it seems to have disappeared now.";
  this.left = new sitThree();
  this.right = new sit3();
  this.lefttext = "Keep running!";
  this.righttext = "Run back towards the lake";
  this.fillcolor = "";
  this.b = "outside";
}

function sitThree(){
  this.sentence = "You decide to keep running." +
  " As you run you trip over a soft rock." +
  " Wait, that's a cat!";
  this.left = new sitFour();
  this.right = new sitFour();
  this.lefttext = "Pet the cat";
  this.righttext = "Scratch the cat's belly";
  this.fillcolor = "";
  this.b = "cat";
}

function sitFour(){
  this.sentence = "The cat purrs and rolls around on the ground." +
  " After a few minutes it gets up.";
  this.left = new sitneutralending();
  this.right = new sitneutralending();
  this.lefttext = "Follow the cat";
  this.righttext = "Why wouldn't you follow this cat?";
  this.fillcolor = "";
  this.b = "cat";
}

//Neutral ending
function sitneutralending(){
  this.sentence = "(Neutral ending) You follow the cat into a small den." +
  " I guess this is a nicer ending."
  this.lefttext = "";
  this.righttext = "";
  this.fillcolor = "";
  this.b = "outside";
}

//--------------------
//Square knobbed door
function sitA() {
  this.sentence = "You open the door and find yourself looking into a closet." +
  " You run in and shut the door as quietly as you can." +
  " She's awake now too.";
  this.left = new sitB();
  this.right = new death("You decided to scream on the top of your lungs." +
  " Immediately and without warning, the beast breaks through the closet" +
  " door. Did you have a death wish?");
  this.lefttext = "Stay quiet and hope she leaves";
  this.righttext = "SCREAM!!!";
  this.fillcolor = "black";
}

//Closet scene
function sitB() {
  this.sentence = "You decide to sit quietly in the closet." +
  " After what seemed like hours, the growling disappeared...";
  this.left = new sitC();
  this.right = new sit1A();
  this.lefttext = "Stay in the closet";
  this.righttext = "Walk out";
  this.fillcolor = "black";
}

function sitC() {
  this.sentence = "You felt uneasy and decided to stay in the closet." +
  " You lean back onto the back of the closet and surprisingly," +
  " you fell into a hole that leads outside!";
  this.left = new sitD();
  this.right = new sit1A();
  this.lefttext = "Stay in the closet";
  this.righttext = "Crawl outside";
  this.fillcolor = "black";
}

function sitD(){
  this.sentence = "You STILL decide to stay in the closet for some reason." +
  " Maybe you're still feeling uneasy..." +
  " Time continues to pass as it usually does."+
  " Are you even going to continue on this journey?";
  this.left = new sitE();
  this.right = new sit1A();
  this.lefttext = "Stay in the closet";
  this.righttext = "CRAWL OUTSIDE";
  this.fillcolor = "black";
}

function sitE(){
  this.sentence = "You still stay in the closet. This is not like the narnia" +
  " wardrobe. There is nothing special about this closet." +
  " Why do you want to stay in here so badly?";
  this.left = new sitF();
  this.right = new sit1A();
  this.lefttext = "Stay in the closet";
  this.righttext = "Crawl. Outside. Now.";
  this.fillcolor = "black";
}

function sitF(){
  this.sentence = "Okay, you've committed, we'll stay in this dumb closet."+
  " I even took away the 'crawl outside' button. I hope you're happy with yourself.";
  this.left = new sitG();
  this.right = new sitG();
  this.lefttext = "Stay in the closet";
  this.righttext = "Stay in the closet";
  this.fillcolor = "black";
}

function sitG(){
  this.sentence = "I bet you're happy about this endless loop,"+
  " Even if you change your mind you won't get it back, you're gonna have to" +
  " refresh this whole game manually.";
  this.left = new sitH();
  this.right = new sitH();
  this.lefttext = "Stay in the closet";
  this.righttext = "Stay in the closet";
  this.fillcolor = "black";
}

function sitH(){
  this.sentence = "...";
  this.left = new sitI();
  this.right = new sitI();
  this.lefttext = "Stay in the closet";
  this.righttext = "Stay in the closet";
  this.fillcolor = "black";
}

function sitI(){
  this.sentence = "..........";
  this.left = new sitJ();
  this.right = new sitJ();
  this.lefttext = "Stay in the closet";
  this.righttext = "Stay in the closet";
  this.fillcolor = "black";
}

function sitJ(){
  this.sentence = "..................";
  this.left = new sitK();
  this.right = new sitK();
  this.lefttext = "Stay in the closet";
  this.righttext = "Stay in the closet";
  this.fillcolor = "black";
}

function sitK(){
  this.sentence = "Okay, I'm just going to push you outside. Shoo!";
  this.left = new sit1A();
  this.right = new sit1A();
  this.lefttext = "OUTSIDE";
  this.righttext = "GO. OUTSIDE.";
  this.fillcolor = "black";
}

//To grandmothers house we go!
function sit1A(){
  this.sentence = "You walk outside to see the beast far off in the distance," +
  " obviously looking for you. But you have other plans...";
  this.left = new death("You dance(?) towards the beast flailing about,"+
  " probably hoping to get eaten. (I bet you were the same person wanting to" +
  " stay in that closet...)");
  this.right = new sit1B();
  this.lefttext = "Ignore your plans and dance towards the beast";
  this.righttext = "Head towards the smoke in the nearby forest";
  this.fillcolor = "";
  this.b = "outside";
}

function sit1B(){
  this.sentence = "You run through the forest, to grandmother's house." +
  " She'll protect you from the beast. You hear the beast" +
  " catching up to you, desperate to get what you've stolen back..." +
  " You notice that there is a large pit nearby";
  this.left = new sit1C();
  this.right = new goodishending();
  this.lefttext = "Continue running towards grandmother's house";
  this.righttext = "Wait to push the wolf into the pit";
  this.fillcolor = "flashing green";
}

function sit1C(){
  this.sentence = "You finally reach the door of the house" +
  " The beast is not far behing you. 'GRANDMOTHER' you scream, let me in!" +
  " Hurry!!";
  this.left = new trueending();
  this.right = new death("You decide to keep running, but the beast gets to you." +
  " And you were so close too!");
  this.lefttext = "Wait for grandmother to open the door";
  this.righttext = "Keep running!";
  this.fillcolor = "";
  this.b = "outside";
}

//True ending
function trueending(){
  this.sentence = "(True Ending) Soon after, the door opens." +
  " It's almost impossible to hide your grin..." +
  " You look back at the girl in wolfs skin that was chasing you," +
  " desperate to get her hood back." +
  " 'My, what big teeth you have, little riding hood'!";
  this.lefttext = "";
  this.righttext = "";
  this.fillcolor = "";
  this.b = "trueEnd";
}

//Death scene when the beast gets you
function death(sentence) {
  this.sentence = sentence;
  this.lefttext = "";
  this.righttext = "";
  this.fillcolor = "red";
}

//Good ending where you kill the beast
function goodishending(){
  this.sentence = "(Good Ending) You push the wolf into the pit. Hooray!" +
  " Now nothing is in your way...";
  this.lefttext = "";
  this.righttext = "";
  this.fillcolor = "";
  this.b = "outside";
}

function draw() {

  //Determining background color
  if (scene.fillcolor == "red"){
    background(171,6,11);
  }
  else if (scene.fillcolor == "blue"){
    background(0, 6, 34);
  }
  else if (scene.fillcolor == "flashing green"){
    frameRate(8);
    var r = random(0, 8);
    var g = random(0, 60);
    var b = random(0, 5);
    background(r, g, b);
  }
  else if (scene.fillcolor == "green"){
    background(2, 26, 8);
  }
  else if (scene.fillcolor == "black"){
    background(0);
  }
  else {
    background(0);
  }

  //Creates background images
  if (scene.b == "outside"){
    image(bg[0], 0, 0, 480, 450);
  }
  if (scene.b == "reflection"){
    image(bg[1], 0, 0, 480, 450);
  }
  if (scene.b == "treeAndLake"){
    image(bg[2], 0, 0, 480, 450);
  }
  if (scene.b == "cat"){
    image(bg[3], 0, 0, 480, 450);
  }
  if (scene.b == "trueEnd"){
    image(bg[4], 0, 0, 480, 450);
  }


  //Story text details
  fill(200);
  textSize(12);
  text(scene.sentence, 50, 270, 380, 80);
  //left text decision
  text(scene.lefttext, 50, 380, 100);
  //right text decision
  text(scene.righttext, 300, 380, 100);

  //Reset button text
  if (scene.lefttext == "") {
    text("click here to start over", 180, 370);
  }


}

//Creating "buttons" for choices and for reset
function mouseClicked(){

  //Reset button
  if (scene.lefttext == "") {
    if (mouseX > 180 & mouseX < 300 && mouseY > 360 && mouseY < 380){
       //resets game
       scene = new beginning();
    }
  }

 else{
   //left button decision
   if (mouseX > 50 & mouseX < 130 && mouseY > 370 && mouseY < 420){
     scene = scene.left;
   }
   //right button decision
   if (mouseX > 300 & mouseX < 440 && mouseY > 370 && mouseY < 420){
     scene = scene.right;
   }
 }

}
I decided to create a choose-your-own-adventure game! My initial idea was to focus on having no visuals—using only text and sound to guide the user through the story—but ultimately ended up using both visuals and text together, and just text on its own.
The story was difficult to write in its own right and I don’t claim that it is that good, but the point of this game is that most of the endings the user runs into will build on the story of the game. I decided to focus mainly on using objects (since that was the most difficult part of this class for me and I wanted to make sure I ended this class with the knowledge of how to use them).
Leave a Reply Cancel reply
