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 includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                <link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono" rel="stylesheet">
<div class = "storytile scene1" id = "scene1"></div>
<div class = "storytile scene2" id = "scene2"></div>
<div class = "storytile scene3" id = "scene3"></div>
<div class = "storytile scene4" id = "scene4"></div>
<div class = "storytile scene5" id = "scene5"></div>
<div class = "storytile scene6" id = "scene6"></div>
<div class = "storytile scene7" id = "scene7"></div>
<div class = "storytile scene8" id = "scene8"></div>
<div class = "storytile scene9" id = "scene9"></div>
<div class = "storytile scene10" id = "scene10"></div>
<div class = "storytile scene11" id = "scene11"></div>
<div class = "storytile scene12" id = "scene12"></div>
<div class = "storytile scene13" id = "scene13"></div>
<div class = "storytile scene14" id = "scene14"></div>
<div class = "storytile scene15" id = "scene15"></div>
<div class = "storytile scene16" id = "scene16"></div>
<div class = "storytile scene17" id = "scene17"></div>
<div class = "storytile scene18" id = "scene18"></div>
<div class = "storytile scene19" id = "scene19"></div>
<div class = "storytile scene20" id = "scene20"></div>
<div class = "storytile scene21" id = "scene21"></div>
<div class = "storytile scene22" id = "scene22"></div>
<div class = "storytile scene23" id = "scene23"></div>
<div class = "storytile scene24" id = "scene24"></div>
<div class = "storytile scene25" id = "scene25"></div>
<div class = "storytile scene26" id = "scene26"></div>
<div class = "storytile scene27" id = "scene27"></div>
<div class = "storytile scene28" id = "scene28"></div>
<div class = "storytile scene29" id = "scene29"></div>
<div class = "storytile scene30" id = "scene30"></div>
<div class = "storytile scene31" id = "scene31"></div>
<div class = "storytile scene32" id = "scene32"></div>
<div class = "storytile scene33" id = "scene33"></div>
<div class = "storytile scene34" id = "scene34"></div>
<div class = "storytile scene35" id = "scene35"></div>
<div class = "storytile scene36" id = "scene36"></div>
<div class = "storytile scene37" id = "scene37"></div>
<div class = "storytile scene38" id = "scene38"></div>
<div class = "storytile scene39" id = "scene39"></div>
<div class = "storytile scene40" id = "scene40"></div>
<div class = "storytile scene41" id = "scene41"></div>
<div class = "storytile scene42" id = "scene42"></div>
<div class = "storytile scene43" id = "scene43"></div>
<div class = "storytile scene44" id = "scene44"></div>
<div class = "storytile scene45" id = "scene45"></div>
<div class = "storytile scene46" id = "scene46"></div>
<div class = "storytile scene47" id = "scene47"></div>
<div class = "storytile scene48" id = "scene48"></div>
<div class = "storytile scene49" id = "scene49"></div>
<div class = "storytile scene50" id = "scene50"></div>
<div class = "storytile scene51" id = "scene51"></div>
<div class = "storytile scene52" id = "scene52"></div>

              
            
!

CSS

              
                body{
  width:100%;
  height:100%;
}
.storytile{
  position:fixed;
  background:rgb(25,100,50);
  border:2px gray ridge;
  border-radius:5px;
  padding:5px;
  font-family:Share Tech Mono;
  margin-bottom:20px;
  width:100%;
  height:100%;
}
.innertile1{
  background:rgb(25,130,50);
  border-radius:5px;
  width:100%;
  height:100%;
  color:black;
}
.inner-text{
  text-align:center;
}
button{
  margin:20px;
}
              
            
!

JS

              
                //game engine functions:
//if you wan to use it, please notify me at connerow1115@gmail.com. STRICTLY DO NOT PLAIGERIZE!
var newTile = function(num,t1,t2,b1,b2,b3,s1,s2,s3){
  $("#scene"+num).html('<div class = "innertile1"><div class = "inner-text"><h1>'+t1+'</h1><p>'+t2+'</p><a href = "#'+s1+'"><button class = "choice1-'+num+' btn btn-default">'+b1+'</button></a><a href = "#'+s2+'"><button class = "choice2-'+num+' btn btn-default">'+b2+'</button></a><a href = "#'+s3+'"><button class = "choice3-'+num+' btn btn-default">'+b3+'</button></a></div></div>');
  $("."+s1).hide();
  $("."+s2).hide();
  $("."+s3).hide();
  
  $(".choice1-"+num).on("click",function(){
    $("."+s1).show();
    $("#scene"+num).hide();
  });
  $(".choice2-"+num).on("click",function(){
    $("."+s2).show();
        $("#scene"+num).hide();

  });
  $(".choice3-"+num).on("click",function(){
    $("."+s3).show();
        $("#scene"+num).hide();

  });
  
};
var fail = function(num,t1,t2,b1,b2,b3,s1,s2,s3){
  $("#scene"+num).html('<div class = "innertile1"><div class = "inner-text"><h1>'+t1+'</h1><p>'+t2+'</p><a href = "#'+s1+'"><button class = "choice1-'+num+' btn btn-default">'+b1+'</button></a><a href = "#'+s2+'"><button class = "choice2-'+num+' btn btn-default">'+b2+'</button></a><a href = "#'+s3+'"><button class = "choice3-'+num+' btn btn-default">'+b3+'</button></a></div></div>');
  $(".choice1-"+num).on("click",function(){
    $("."+s1).show();
    $("#scene"+num).hide();
  });
  $(".choice2-"+num).on("click",function(){
    $("."+s2).show();
        $("#scene"+num).hide();

  });
  $(".choice3-"+num).on("click",function(){
    $("."+s3).show();
        $("#scene"+num).hide();

  });
};

//correct answers. I have very messy code, so don't bother cheating. >:D
{
newTile('1','The Spy: my first html game','<strong>rules:</strong><br>1. click the button with the answer that you think is right<br>2. Try your best to get to the end.<br>3. that\'s pretty much all<br><br>You are a spy sent on a mission. Your job is to bring a criminal, who is creating a secret weapon back alive and you must keep as much evidence as you can. Your mission starts here.','Here','Okay!','I think I\'m sick...',"scene2","scene3","scene4");
newTile('2','You Can Continue!','"Good", says your boss, "since you can solve puzzles like that, I will give you the job".<br>You go to the place where the criminal is: an abandoned nuclear power plant. "All yours!", says the boss and now you are on your own. He drops you off at the entrance of the factory and drives away. You have a laser gun, 5 grenades, a rocket launcher with 5 rockets, a laser scope, and a gamma ray detector. Those two will explained how to use later. What do you do now?','Use a grenade to blow the door down','Try to open the door','tell the boss that you quit the job','scene5','scene6','scene7');
newTile('6','You try to open the door...','the door is locked, but luckily, you know how to pick a lock with a piece of wire (which you find on the floor). The door creaks open and you are free to go in.','shout "VICTORY"','walk into the door quietly','walk into the building','scene5','scene8','scene9');
newTile('9','So Close...','you were so close to picking the second choice (unless this is your second or third pick).<br>You walk into the very dark building with your gun ready to fire. You hear a clicking sound, a whirring noise, and a bullet whizzes past your ear. What do you do?','say "Hello? anyone there?"','fire back at where the bullet came from','use your laser scope to scan the area','scene10','scene11','scene12');
newTile('11','','There is a loud crash when your bullet strikes. A robot (with a big hole in it) tumbles down from what sounds like some stairs to where you are.','shoot it again to make sure it is dead','throw it against a wall to make sure it is dead.','move on with your mission. it\'s dead.','scene13','scene13','scene14');
newTile('13','The Robot Dies','The robot lights up, makes a powerdown sound, catches on fire, and dies. After you put it out, you toss it aside and continue on your mission. When going up the stairs, a step cracks and you fall into a trapdoor which leads to a secret room. Once in that room, there is only a door that is locked. The trapdoor has sealed and you can\'t climb up.','call the police','look around the room for a key','tell your boss that you are dead','scene15','scene16','scene17');
newTile('16','You look around the room...','When you are looking around the room, you can\'t find any keys, so you take out your metal detector (sorry, I forgot to tell you that you had one) and scan the room. A few minutes later, the metal detector picks up some metal under a rug and the type is brass. You look under the rug, and there is the key!','use the key','put the key in your mouth','put the key in the keyhole <strong>Right Side In</strong>, turn it, and open the door.','scene18','scene19','scene20');
newTile('20','The door clicks open...','The door clicks open and in front of you is a really dark hall. You hear some thudding on the floor. It doesn\'t seem too far away. There are no other options besides the hall except down what seems an endlessly deep hole.<br>what do you do?','walk into the hall','use your laser scope to scan the area','test your rocket launcher down the hole','scene21','scene22','scene23');
newTile('22','The Hall is crawling with robots...','...So you decide to fire either a rocket or throw a grenade into the hall','nah- there might already be some explosives in the hall. grenade!','Rocket. it <em>might</em> be better.','both','scene24','scene25','scene26');
newTile('25','Just Enough power!','All the robots you can see get blown up and annihilated. A confetti of burnt and crushed parts get thrown into the air.','laser scope the hall again','go in','shoot another missile into the hall.','scene27','scene28','scene29');
newTile('27','Good choice!','Just as you turn on you laser scope, a turret emerges from the wall, camoflaged inside the tunnel. It fires at you once. You dodge the bullet. What do you shoot it with?','A bullet','no- a grenade. more powerful','another rocket. the turret might be shielded.','scene30','scene29','scene29');
newTile('30','Close call!','Your bullet hits the turret right before it fires another bullet at you. Luckily, the turret\'s bullets are really slow and give you time to dodge. The turret isn\'t shielded and takes heavy damage.','shoot the turret down the barrel','fire at it\'s body','shoot the heavily guarded metal box on top of it!.','scene31','scene32','scene32');
newTile('32','The turret dies','The turret shuts down. As you learned from before, you shoot it again to make sure it is dead. Now you can walk down the hall. There is a passage that turns right at the end of the hall.','sure, walk down the hall.','keep your laser scope on and walk<br>down the hall, gun ready','shout "I FINISHED MY MISSION!"','scene33','scene34','scene33');
newTile('34','A Cyborg!','A cyborg comes out of the corner of the hall, and comes running towards you with a tazor and a huge machete. You aim you laser scope at his forehead, but he throws a ninja star at you. Quickly, you kick the star back at him with you karate skills. It penetrates his armor and flesh then he falls to his knees. He takes another and throws it at you. You hit it out of the air again and it cuts him across the wrist.','shoot him!','throw a grenade at him!','go over and give him a bash on the back of the head','scene35','scene36','scene37');
newTile('35','The Cyborg Falls to his knees...','He crumbles to the ground. You go over, disarm him, and handcuff him. You ask him where the suspect is, but he won\'t tell you. he only says he is in the nuclear factory, and that\'s all.','continue. down. the. hall. gun. ready.','continue down, the hall. gun; ready','Continue down the hall, gun ready','scene38','scene38','scene39');
newTile('39','Good. you are good at grammar, it seems.','A device on your belt beeps furiously. You turn around to see a huge mech looking down at you. Quickly, you jump out of the way as a huge plasma bullet falls into where you were just standing. There is no other way to defeat the mech except by shooting a rocket at it, risking blowing up the factory. As you load you rocket launcher and are about to pull the trigger, you see a small pebble fall straight through the mech. You look back at where you were and there is no burnt area where the plasma hit. it is a hollagram. Just to test, you fire a bullet at it, and just as expected, it shoots straight through it without a sound or break.','move on','move on','move on','scene40','scene40','scene40');
newTile('40','The mech is harmless!','The hollagram makes a motion to grab you, but its fingers pass straight through your body. You continue walking down the hall with you gun ready to shoot, and luckily for that, a robot comes out of another twist in the hall.','shoot it','throw a grenade at it','try the gamma ray thingy','scene41','scene23','scene42');
newTile('41','This robot has extra heavy armor!','So, you shoot it again. It brings out its blaster and aims it right at your forehead.','shoot the robot\'s blaster','shoot the robot\'s hand','shoot the robot in what seems like its eye','scene43','scene44','scene45');
newTile('43','The robot\'s blaster explodes in a small pink burst of plasma and fire...',' ...just leaving enough time for you to rain bullets on it. You shoot it a few more times to make sure it is dead and it is. You move down the hall and the nearest enemy you scan is more than 500 feet away from you, so you set to exploring the hall. The hall\'s walls are covered with doors. you try all of them and they all open and are just storage rooms with light bulbs, batteries, and debri in them. There is one more door with a codepad on the side of it. You try that one and it is locked. You put your ear to the door and there is some sort of humming sound in there.','shoot the codepad','pick the lock','kick the door down.','scene46','scene47','scene48');
newTile('46','The codepad breaks down...','...which allows you to enter the room which has no enemies in it. Just a big portal.','shoot a bullet through the portal','go in','gamma-ray it to see what\'s inside','scene49','scene50','scene51');
newTile('47','The door opens with a click...','...which allows you to enter the room which has no enemies in it. Just a big portal.','shoot a bullet through the portal','go in','gamma-ray it to see what\'s inside','scene49','scene50','scene51');
newTile('48','The door crashes down','...which allows you to enter the room which has no enemies in it. Just a big portal.','shoot a bullet through the portal','go in','gamma-ray it to see what\'s inside','scene49','scene50','scene51');
newTile('51','You gamma-ray the portal...','...and see the suspect inside of it. You check his identity and DNA with your spy-tech glasses and sure enough it is him. You shoot him on the leg and jump in. You handcuff him and bring him back to your boss. You later find out that he was trying to blow up The White House with all of the abandoned uranium left there.<hr> Congrats! You Won!!!!!!!! stay tuned for part 2!<br>later, notify me if you want to know if part 2 is coming out or if you want to use my game engine at <code>connerow1115@gmail.com</code>. Hope you liked it!','You','Won!','Congrats!','scene52','scene52','scene52');
}
//failures
{
  
fail('49','You end up shooting the suspect...','you hear a groan and a thud from inside the portal and then walk in. You shot the suspect in the head by accident. You failed','restart','retry','last choice','scene1','scene1','scene43');
fail('38','Well, well, well...','Bad grammar leads to death. You failed.','don\'t try again','<a href = "https://www.khanacademy.org/humanities/grammar" target = "_blank">take a grammar lesson</a>','die','scene35','','scene35');
fail('18','','Unfortunately, you used it the WRONG way. You failed','retry','last choice','restart','scene1','scene16','scene1')
fail('3','Failure','"Sorry," says the boss, "You didn\'t pick the right answer and can\'t be a spy. I\'ll just give someone else the job".','retry','last choice','restart','scene1','scene1','scene1');
fail('4','Failure!','"Sick?" I\'m sorry, you\'re fired','retry','last choice','restart','scene1','scene1','scene1');
fail('7','','You quit the game - You really are a bad spy!','don\'t restart','second-to-last choice','don\'t retry','scene1','scene1','scene1');
fail('8','Ha! trick question!','you actually walked into the <em>DOOR</em>. you were supposed to walk into the <em>BUILDING</em>. <b>bumps head into door</b>. the boss comes over. "You just failed".','restart','last choice','retry','scene1','scene6','scene1');
fail('15','You Call The Police...','your boss comes over and says that you failed as a spy. "try againg some other time, but YOU ARE FIRED!!"','retry','last choice','restart','scene1','scene13','scene1');
fail('17','you tell the boss you are dead...','The boss comes into the building with all his best secret agents. He comes over to you and says, "Yeah, you\'re dead--and fired."<br>You have officially failed.','retry','last choice','restart','scene1','scene13','scene1')
}
//deaths
{
fail('50','The suspect shoots you','Bam! A straight shot through the eye kills you before you even knew you were in there.','retry','restart','last choice','scene1','scene1','scene43');
fail('45','That was a false eye!','That, my friend (or enemy) was a light. The real sensor was on the body. It pulls the trigger, blasting the bullet through your head.','restart','retry','random checkpoint','scene1','scene1','scene41');
fail('44','The bullet bounces off the robot\'s hand and it pulls the trigger. You died (with a huge hole in your head).','try again','restart','last choice','scene1','scene1','scene41');
fail('42','The robot looks as though it is melting...','...and it slowly drips to the floor. Just before its legs completely melt, it shoots you straight through the neck, killing you.','try again','last choice','restart','scene1','scene40','scene1');
fail('37','You died!','you apparently didn\'t read properly! the cyborg gets out a tazor and zaps you dead.','retry','last choice','revive','scene1','scene30','scene1');
fail('36','Too much explosive power!','This place is an abandoned nuclear factory-- as you might have forgotten... The cyborg dies, the whole place crashes under the grenade\'s power, you die, and trillions of pounds of uranium get ignited. The resulting explosion is devastating.','try again','last choice','restart','scene1','scene34','scene1');
fail('33','You Died!','A guy, or what seems like a cyborg, comes out of the corner when he hears you. He zaps you with a tazor and you faint. You wake up and are in a room blindfolded and tied to a chair. He comes over, takes the blindfold off you and blasts you out of the universe with his gun.','try again!','restart','last choice','scene1','scene1','scene32');
fail('31','CAUTION : EXPLODING TURRET!','The turret explodes when you shoot it down the barrel and blasts the whole place apart. You fall into the endlessly deep pit and get blown up by millions of pounds of uranium!','do not try again','don\'t retry','never restart','scene30','scene30','scene30');
fail('29','Too much explosive power',' Sadly, this place is an abandoned nuclear factory, which is not the stablest thing in the world... so... the place cracks under the explosive power and you fall into the hole and get blown up by millions of pounds of uranium.','retry','last choice','restart','scene1','scene25','scene1');
fail('28','Beware of turret!','A turret, camoflaged, emerges from the wall and blasts the life out of you with a single hit.','retry','last choice','restart','scene1','scene25','scene1');
fail('26','Too much explosive power!','First you fire the rocket into the hall, killing all the enemies that you see, then you throw the grenade. Sadly, this place is an abandoned nuclear factory, which is not the stablest thing in the world... so... the place cracks under the explosive power and you fall into the hole and get blown up by millions of pounds of uranium.','retry','restart','last choice','scene1','scene1','scene22')
fail('24','Not enough power!','The grenade blows up a few robots, but not all. A few thousand laser bullets cut through you. You died','retry','last choice','restart','scene1','scene22','scene1')
fail('23','Boooom!','Unfortunately, you forgot that this was an abandoned nuclear factory. You ignite a few hundred thousand tons of uranium and the whole place explodes.','restart','last choice','retry','scene1','scene20','scene1');
fail('21','you died!','You walk carelessly into the hall, and what seems like a million bullets fly through you.','restart','retry','last choice','scene1','scene1','scene20');
fail('19','You Choked and died!','The key gets caught in your throat and you choke on it.','retry','take the lunatic brain test','restart','scene1','scene1','scene1');
fail('5','You Died!','The Criminal comes to the door with a machine gun and kills you.','retry','revive','restart','scene1','scene1','scene1');
fail('10','You Died!','A robot holds up a plasma blaster and shoots you.','retry','restart','revive','scene1','scene1','scene1');
fail('12','You Died!','A good choice for accuracy, but, unfortunately, you were too slow :(','retry','last choice','revive','scene1','scene9','scene1');
fail('14','You Just Died!','the robot gets up, grabs you by the neck, and shoots you.','retry','last choice','restart','scene1','scene13','scene1')
}

              
            
!
999px

Console