<!DOCTYPE html>
<html>
<head>
<title>Wild West Ghost Express</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- start scene -->
<div id="scene_intro" class="scene_intro">
<h1>Wild West Ghost Express</h1>
<p id="dialogue" class="splash_intro">Ghost trains are strange services which often run just once a week and in one direction. Of course, there aren't any ghosts...
<br><br>
<a href="#" onclick="nextScene()">ALL ABOARD?</a>
</p>
</div>
<!-- game train lighted scene -->
<div id="scene_trainLighted" class="scene_trainLighted">
<p id="dialogue">
As far as you can tell, you're the only person who boarded the train. Guess that means you'll have one whole caboose for yourself! And for a train that runs once in a blue moon, this actually feels pretty comfy.<br><br>
What would you like to do?<br><br>
<a href="#" onclick="nextScene()">Explore the train</a><br>
<a href="#" onclick="nextScene()">Take a bathroom break</a><br>
<a href="#" onclick="nextScene()">Stay seated and enjoy the view</a>
</p>
</div>
<div id="scene_trainSpooky" class="scene_trainSpooky">
<p id="dialogue">
Whoa! Why did the lights turn off? <br><br>
Is this possibly the work of wild bandits overtaking the train and trying to send passengers careening towards a watery grave?<br><br>
Well, good thing you're a sheriff and always have fully loaded pistols on hand to get you out of any situation. You don't know how much time you have left before the train flies off the tracks, so you hurry towards the conductor's cabin to ask if everything's under control.<br><br>
<a href="#" onclick="nextScene()">Go light a shuck</a><br>
</p>
</div>
<div id="scene_trainPreEscape" class="scene_trainPreEscape">
<p id="dialogue">
You arrive at the conductor's cabin, but no one is here. <br><br>
Guess it's okay to rummage through belonging to find a key to the engine room, right? After all, if the train is going to head into the water, you may as well stop the train. Who's driving this train anyway?<br><br>
<a href="#" onclick="nextScene()">Find the key</a><br>
</p>
</div>
<div id="scene_trainEscape" class="scene_trainEscape">
<!-- escape room code here! + fill down below in script section -->
<div id="btn_next" class="btn_next">
<a href="#" onclick="nextScene()">Out the Door!</a><br>
</div>
</div>
<div id="scene_trainShooterGame" class="scene_trainShooterGame">
<!-- shooter game code here! + fill down below in script section -->
</div>
<script type="module" src="game.js"></script>
<script>
/////////////////////////////////////////////////////////
// for audio + changing scenes
/////////////////////////////////////////////////////////
var sceneNum = 0;
var audio = document.getElementById('audio');
audio.volume = .05;
function nextScene(){
sceneNum++;
console.log(sceneNum);
var audio=document.getElementById('audio');
if (sceneNum == 1) {
// scene 2 - riding on train lighted
document.getElementById("scene_intro").style.visibility = "hidden";
document.getElementById("scene_trainLighted").style.visibility = "visible";
changeMusic('bm_train_happy.mp3');
} else if (sceneNum == 2) {
// scene 2 - riding on train dark and spooky
document.getElementById("scene_trainLighted").style.visibility = "hidden";
document.getElementById("scene_trainSpooky").style.visibility = "visible";
changeMusic('bm_train_spooky.mp3');
} else if (sceneNum == 3) {
// scene 2 - riding on train dark and spooky
document.getElementById("scene_trainSpooky").style.visibility = "hidden";
document.getElementById("scene_trainPreEscape").style.visibility = "visible";
} else if (sceneNum == 4) {
// scene 2 - riding on train dark and spooky
document.getElementById("scene_trainPreEscape").style.visibility = "hidden";
document.getElementById("scene_trainEscape").style.visibility = "visible";
} else if (sceneNum == 5) {
// scene 2 - riding on train dark and spooky
document.getElementById("scene_trainEscape").style.visibility = "hidden";
document.getElementById("scene_trainShooterGame").style.visibility = "visible";
} else if (sceneNum == 6) {
// scene 2 - riding on train dark and spooky
document.getElementById("scene_trainShooterGame").style.visibility = "hidden";
document.getElementById("scene_gameEnd").style.visibility = "visible";
}
}
function changeMusic(music) {
document.getElementById("audio").pause();
document.getElementById("audio").setAttribute('src', music);
document.getElementById("audio").load();
document.getElementById("audio").play();
}
/////////////////////////////////////////////////////////
// for escape room
/////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////
// for shooter game
/////////////////////////////////////////////////////////
</script>
<audio id="audio" src="bm_splash.mp3" autoplay loop></audio>
</body>
</html>