Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <body onload="advanceTo(scenario.one)">
  <div id="header" class="game-header">
    <h1>Pac-Man Text Adventure</h1>
  </div>
  
  <div class="game-container">
    <div id="text" class="game-text">
    </div>
    <div id="buttons" class="game-buttons">
    </div>
  </div>
    
</body>



              
            
!

CSS

              
                /* pacifico font */
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body {
  background-color: #000000;
  text-align: center;
  font-family: "Open Sans";
  margin-left: 28%;
  margin-right: 28%;
  border: solid 4px #1136ff;
  border-radius: 12px;
}

.lose-text {
  color: #f32d26;
}

.win-text {
  color: #11f804;
}

.game-header h1 {
  font-size: 48px;
  color: #fffb00;
  margin: 0px;
  padding-top: 24px;
  padding-bottom: 24px;
  border-bottom: dotted 4px #fffb00;
  width: 80%;
  display: inline-block;
}

.game-header h1 span a {
  color: #00fcff;
}

.game-text {
  color: #ffa1cd;
  font-size: 18px;
  padding: 24px 18px;
}

.game-buttons {
  text-align: center;
  padding-bottom: 24px;
}

a,
a:visited {
  text-decoration: none;
  color: #00ae68;
}

a.button {
  display: inline-block;
  width: 260px;
  margin: 10px 20px 10px 20px;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  line-height: 40px;
  color: #fff;
  border-radius: 5px;
  transition: all 0.2s;
}

.button {
  border: dotted 4px #fff;
}
              
            
!

JS

              
                var text = document.getElementById("text");
var buttonBox = document.getElementById('buttons');

var changeText = function(words) {
  text.innerHTML = words;
};

var changeButtons = function(buttonList) {
  buttonBox.innerHTML = "";
  for (var i = 0; i < buttonList.length; i++) {
    buttonBox.innerHTML += "<a href='#'class='button' onClick="+buttonList[i][1]+">" + buttonList[i][0] + "</a>";
  }
};

var advanceTo = function(scenario) {
  changeText(scenario.text)
  changeButtons(scenario.buttons)
};


scenario = {}
var scenario = {
  one: {
    text: "You are Pac-Man, a strange pie that eats things for some reason, you are trapped in a maze with spooky ghosts things. Which direction do you move?",
    buttons: [["turn left?", "advanceTo(scenario.two)"],["turn right?", "advanceTo(scenario.two)"]]
  },
  two: {
    text: "You eat delicious dots, what now?",
    buttons: [["go up?", "advanceTo(scenario.three)"],["go down?", "advanceTo(scenario.four)"]]
  },
  three: {
    text: "That was a close call, a ghost nearly got you!",
    buttons: [["turn left?", "advanceTo(scenario.four)"],["turn right?", "advanceTo(scenario.five)"]]
  },
  four: {
    text: "<h2 class='lose-text'>A ghost appears behind you and kills you. Sad times.</h2> </br> 'Death is not the greatest loss in life. The greatest loss is what dies inside us while we live.' - Norman Cousins",
    buttons: [["restart?", "advanceTo(scenario.one)"]]
  },
  five: {
    text: "You continue eating lots of yummy dots, yum. What's the point of all this?",
    buttons: [["stop eating?", "advanceTo(scenario.six)"],["continue feasting?", "advanceTo(scenario.seven)"]]
  },
  six: {
    text: "A ghost looks at your defeatist attitude and takes pity, the ghost turns its back and drifts away into the darkness",
    buttons: [["follow ghost?", "advanceTo(scenario.eight)"],["get back to eating?", "advanceTo(scenario.nine)"]]
  },
  seven: {
    text: "Back to some yummy dots, yum yum, ohhh a cherry appears infront of you. What now?",
    buttons: [["eat cherry?", "advanceTo(scenario.fourteen)"],["eww fruit!", "advanceTo(scenario.fifteen)"]]
  },
  eight: {
    text: "You sneak behind the ghost, it travels past a glowing white chamber...",
    buttons: [["investigate chamber?", "advanceTo(scenario.ten)"],["continue following ghost?", "advanceTo(scenario.eleven)"]]
  },
  nine: {
    text: "<h2 class='lose-text'> Distracted by all the yummy dots, a ghost appears and kills you. </h2> </br> I don't want to die without any scars. - Chuck Palahniuk, Fight Club",
    buttons: [["restart?", "advanceTo(scenario.one)"]]
  },
  ten: {
    text: "In the chamber a bearded, scruffy developer sits typing at a untidy desk, he turns to face you, it looks like he is about to depart some wisdom...",
    buttons: [["receive wisdom?", "advanceTo(scenario.twelve)"],["naw, back to eating!", "advanceTo(scenario.thirteen)"]]
  },
  eleven: {
    text: "<h2 class='lose-text'>More yummy dots, oh nooooo, you are surrounded by ghosts, you die.</h2> </br> 'Every man's life ends the same way. It is only the details of how he lived and how he died that distinguish one man from another.' - Ernest Hemingway",
    buttons: [["restart?", "advanceTo(scenario.one)"]]
  },
  twelve: {
    text: "<h2 class='win-text'>Oh Pac-Man you were never meant to be a text adventure game, were you? But I started and I finished, it was a fun few hours.</h2> </br> <h2> Congrats, you made it to the end! </h2> </br> 'If you obey all the rules, you’ll miss all the fun.' - Katharine Hepburn",
    buttons: [["restart?", "advanceTo(scenario.one)"]]
  },
  thirteen: {
    text: "<h2 class='lose-text'>More yummy dots outside the chamber, munch, munch, opps you are surrounded by ghosts. Your gluttony got the better of you, you die. Sad face.</h2> </br> 'The fear of death follows from the fear of life. A man who lives fully is prepared to die at any time.' - Mark Twain",
    buttons: [["restart?", "advanceTo(scenario.one)"]]
  },
  fourteen: {
    text: "The power of the cherry surges through you, ghosts run scared and you gobble them all up, after the tasty last ghost you come accross a glowing white chamber...",
    buttons: [["investigate chamber?", "advanceTo(scenario.ten)"],["naw, still hungry!", "advanceTo(scenario.four)"]]
  },
  fifteen: {
    text: "<h2 class='lose-text'>Big mistake pal, without the power of the cherry a ghost comes along and easily kills you. Oh dear.</h2> </br> If life must not be taken too seriously, then so neither must death. - Samuel Butler",
    buttons: [["restart?", "advanceTo(scenario.one)"]]
  }
  
};
              
            
!
999px

Console