<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script type="module" src="script.js"></script>
<title>Wild West Ghost Express</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<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" img>
<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 class="key">
<a href="#" onclick="showKey()">
<img src="key.jpg" alt="key" width="50" height="100">
</a>
</div>
<div class="hidden-text">
<p id="dialogue">You have found the key!
</p>
<div id="btn_next" class="btn_next">
<a href="#" onclick="nextScene()">Open door
</a><br>
</div>
</div>
</div>
<div id="scene_trainShooterGame" class="scene_trainShooterGame">
<p id="dialogue">
Can you hear that? The sound of the cackling demon? It must be near by. <br><br>
Use your pistol to shoot the demon and kill it! But shoot carefully: you only have 10 bullets!
<!-- shooter game code here! + fill down below in script section -->
<img src ="demon.png" id="demon" class="button_clear" onclick ="win()" style ="width:30px;height:30px" >
<p style = "text-align: center">
<span id ="display">
</span>
</p>
<!-- <button id="demon" class="button_clear" onClick="click(); alert('!');"> </button> -->
</div>
<div id="scene_gameEnd" class="scene_gameEnd">
<p id="dialogue">You have shot the demon and successfully
stopped the train! You're in the desert in the middle of nowhere.
You look ahead and see a ghost town. Hopefully history doesn't
repeat itself...</p>
</div>
<script type="module"></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";
changeMusic('western-film-intro-outro.mp3');
}
}
function changeMusic(music) {
document.getElementById("audio").pause();
document.getElementById("audio").setAttribute('src', music);
document.getElementById("audio").load();
document.getElementById("audio").play();
}
/////////////////////////////////////////////////////////
// for escape room
/////////////////////////////////////////////////////////
function showKey() {
document.querySelector(".key img").style.visibility = "visible";
document.querySelector(".hidden-text").style.visibility = "visible";
}
/////////////////////////////////////////////////////////
// for shooter game - js file
/////////////////////////////////////////////////////////
var click = 0;
var image = document.getElementById('scene_trainShooterGame');
var disp = document.getElementById('display');
var demon = document.getElementById('demon');
image.onclick = function() {
click++;
disp.innerHTML = click;
if(click > 10){
alert('Oh No! You shot the engine instead of the demon too many times. You have doomed yourself to a gruesome death!')
}
}
function win(){
if(click = 1){
alert('yay! you killed the demon')
nextScene();
}
}
</script>
<audio id="audio" src="bm_splash.mp3" autoplay loop></audio>
</body>
</html>