TAYLOR JORDAN
The Courtyard Text Adventure Game Progect Directory
The Courtyard by Taylor Jordan/
├── thecourtyard.html
├── style.css
├── main.js
├── utils.js
├── act1.js
├── act2.js
thecourtyard.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css"> <!-- Link to external CSS file -->
<script src="https://code.responsivevoice.org/responsivevoice.js"></script>
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css"> <!-- Link to external CSS file -->
<script src="https://code.responsivevoice.org/responsivevoice.js"></script>
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
</head>
<body>
<div id="output"> </div> <!-- Output area for game messages -->
<p>
<input autofocus="" id="input" type="text" autocomplete="off"> <!-- Input area for player commands -->
</p>
<div id="info1">Enter commands to interact with the game.</div> <!-- Information message for players -->
<div id="info2">Type "help" for a list of commands.</div> <!-- Information message for players -->
<br>
<div id="tj">Taylor Jordan's </div> <!-- Additional information -->
<div id="title1">THE</div> <!-- Game title "The" -->
<div id="title2">COURTYARD</div> <!-- Game title "COURTYARD" -->
<div id="website"><a href="https://www.taylorjordanmusic.com" target="_blank">MORE GAMES</a></div> <!-- Website Link -->
<!-- Link to the new external JavaScript files -->
<script src="utils.js"></script>
<script src="act1.js"></script>
<script src="act2.js"></script>
<script src="main.js"></script>
<!-- Game images -->
<div id="image">
<img alt="Title Screen Image" height="667" id="imageTitleScreen" src="https://drive.google.com/uc?id=166YAEmEYyJ0Q79xI79JGaDYA5-Vv6nPC" width="1000" />
<!-- Act 1 images -->
<img alt="Act 1 Look Image" height="667" id="imageAct1Look" src="https://drive.google.com/uc?id=1PBzoQJklI0mR94szXT75Vf--x3wFvHJX" style="display:none" width="1000" />
<img alt="Act 1 Clock Image" height="667" id="imageAct1Clock" src="https://drive.google.com/uc?id=1KSO3ULcnokhOWCbVl2UOLZpaCZuhv3rn" style="display:none" width="1000" />
<img alt="Act 1 Window Image" height="667" id="imageAct1Window" src="https://drive.google.com/uc?id=1CaYhBGnr6HoaNputyw0Oj7ZQhELw-c-l" style="display:none" width="1000" />
<img alt="Act 1 Key Image" height="667" id="imageAct1Key" src="https://drive.google.com/uc?id=1Qaz2eJC2Mzt86Ph_Y4TVQ42hGhtjC4GQ" style="display:none" width="1000" />
<img alt="Act 1 Key Take Image" height="667" id="imageAct1KeyTake" src="https://drive.google.com/uc?id=1Yg314RSR2ms_LFSf2g9JJuK2PEI8T4G6" style="display:none" width="1000" />
<img alt="Act 1 Door Image" height="667" id="imageAct1Door" src="https://drive.google.com/uc?id=1ic-UH_9EA6oGR9-OuLXEjEUtp4CTQc8H" style="display:none" width="1000" />
<!-- Act 2 images -->
<img alt="Act 2 Image" height="667" id="imageAct2Hallway" src="https://drive.google.com/uc?id=1IXdCF0u_kaS7_C8fqRef1jgiMvsvfmY8" style="display:none" width="1000" />
</div>
<!-- Game effects -->
<!-- Act 1 effects -->
<audio id="effectAct1Ambience" loop="" src="https://drive.google.com/uc?id=1nlyRg5kpj0MTk95TmER862TOdK7JRB9r"> </audio> <!-- Effect for act 1 -->
<audio id="effectAct1DoorLocked" src="https://drive.google.com/uc?id=1DTWkzxdfcKWFFLwiyD_nNDdvSz3mNj7J"> </audio> <!-- Effect for act 1 -->
<audio id="effectAct1DoorUnlocked" src="https://drive.google.com/uc?id=1yWWVf61mNJ-fJkDryhouiR-WyhZPhgN3"> </audio> <!-- Effect for act 2 -->
<audio id="effectAct1TakeKey" src="https://drive.google.com/uc?id=1Hqy45e9UKsVL1FjISyRBkk-mniCiNh_5"> </audio> <!-- Effect for act 2 -->
<!-- Act 2 effects -->
<audio id="effectAct2Scary" src="https://drive.google.com/uc?id=1fyrDemf6B2t1Gp4bdIuztRWbRZwnUHDA"> </audio> <!-- Effect for act 2 -->
<!-- Game music -->
<!-- Title Screen Music -->
<audio id="musicTitleScreen" src="https://drive.google.com/uc?id=1eoQiOtK0Y1Axkdj0G7LN-UZ5tuGMixyh"> </audio> <!-- Music for title screen -->
<!-- Act 1 music -->
<audio id="musicAct1" src="https://drive.google.com/uc?id=1VVlKbgoATIV0FVd9R3DZON-_lAxKgX77"></audio> <!-- Music for act 1 -->
<script>
document.addEventListener("DOMContentLoaded", function() {
var musicTitleScreen = document.getElementById('musicTitleScreen');
musicTitleScreen.play();
});
</script>
<div class="scanlines"></div>
</body>
</html>
style.css
body {
background-color: #000000;
color: #00FF00;
font-family: 'VT323', monospace;
font-size: 25px;
line-height: 1.5;
letter-spacing: 1px;
margin: 0;
padding: 20px;
position: relative;
}
#title1 {
margin-top: 60px;
margin-left: 1150px;
font-size: 40px;
text-transform: uppercase;
letter-spacing: 10px;
color: #00FF00;
text-shadow: 3px 3px #FF0000;
position: absolute;
font-family: 'Courier New', monospace;
}
#title2 {
margin-top: 60px;
margin-left: 1270px;
font-size: 40px;
text-transform: uppercase;
letter-spacing: 10px;
color: #00FF00;
text-shadow: 3px 3px #FF0000;
position: absolute;
font-family: 'Courier New', monospace;
}
#image {
order: 1;
width: 1000px;
height: 667px;
overflow: hidden;
position: absolute;
top: 67px; /* Adjust this value as needed */
left: 120px; /* Adjust this value as needed */
}
#output {
order: 2;
width: 590px;
height: 400px;
background-color: #000000;
border: 1px dotted #00FF00;
padding: 10px;
overflow: auto;
margin-top: 50px;
margin-left: 1150px;
scrollbar-width: thin;
scrollbar-color: #00FF00 #000000;
}
#output::-webkit-scrollbar {
width: 8px;
}
#output::-webkit-scrollbar-thumb {
background-color: #00FF00;
}
#output::-webkit-scrollbar-track {
background-color: #000000;
}
#input {
order: 3;
width: 600px;
height: 30px;
padding: 5px;
margin-top: 10px;
margin-left: 1150px;
background-color: #000000;
border: 1px dotted #00FF00;
color: #00FF00;
font-family: 'VT323', monospace;
font-size: 25px;
}
input:focus {
outline: none;
border: 2px dashed #00FF00;
}
#info1 {
margin-top: -5px;
margin-left: 1150px;
position: absolute;
white-space: nowrap;
}
#info2 {
margin-top: 35px;
margin-left: 1150px;
position: absolute;
white-space: nowrap;
}
#tj {
margin-top: 40px;
margin-left: 1150px;
position: absolute;
white-space: nowrap;
}
#website {
margin-top: 75px;
margin-left: 1650px;
position: absolute;
white-space: nowrap;
}
a {
color: #FF0000;
}
a:visited {
color: #00FF00;
}
.scanlines {
background-image: repeating-linear-gradient(
to bottom,
transparent,
transparent 2px,
black 2px,
black 3px
);
background-color: rgba(0, 0, 0, 0.2);
position: absolute;
top: 64px;
left: 0;
width: 100%;
height: 120%;
pointer-events: none; /* Allow clicks through the scanlines */
}
main.js
document.addEventListener("DOMContentLoaded", function() {
var output = document.getElementById('output');
var input = document.getElementById('input');
var effectAct1Ambience = document.getElementById('effectAct1Ambience');
var musicTitleScreen = document.getElementById('musicTitleScreen');
setTimeout(function() {
playmusicTitleScreen();
}, 2000);
var musicAct1 = document.getElementById('musicAct1');
var currentAct = 1;
var inventory = [];
var looseFloorboard = false;
var doorLocked = true;
var act1Complete = false;
var volume = 0.8;
function print(text) {
output.innerHTML += '<p>' + text + '</p>';
output.scrollTop = output.scrollHeight;
if (!text.includes('<strong>> ')) {
responsiveVoice.speak(text, 'UK English Male', {
pitch: 0.5,
rate: 1,
});
}
}
function clearInput() {
input.value = '';
}
function stopEffectAct1Ambience() {
if (effectAct1Ambience && typeof effectAct1Ambience.pause === 'function') {
effectAct1Ambience.pause();
effectAct1Ambience.currentTime = 0;
}
}
function playmusicTitleScreen() {
if (musicTitleScreen && typeof musicTitleScreen.play === 'function') {
musicTitleScreen.volume = 0.25;
musicTitleScreen.play();
}
}
function stopMusicTitleScreen() {
if (musicTitleScreen && typeof musicTitleScreen.volume === 'number') {
var fadeOutInterval = setInterval(function() {
if (musicTitleScreen.volume > 0.05) {
musicTitleScreen.volume -= 0.05;
} else {
musicTitleScreen.pause();
musicTitleScreen.currentTime = 0;
clearInterval(fadeOutInterval);
}
}, 1000);
}
}
function stopMusicAct1() {
if (musicAct1 && typeof musicAct1.volume === 'number') {
var fadeOutInterval = setInterval(function() {
if (musicAct1.volume > 0.01) {
musicAct1.volume -= 0.01;
} else {
musicAct1.pause();
musicAct1.currentTime = 0;
clearInterval(fadeOutInterval);
}
}, 70);
}
}
function playEffectAct1DoorLocked() {
if (effectAct1DoorLocked && typeof effectAct1DoorLocked.play === 'function') {
effectAct1DoorLocked.volume = volume;
effectAct1DoorLocked.play();
}
}
function playEffectAct2Scary() {
if (effectAct2Scary && typeof effectAct2Scary.play === 'function') {
effectAct2Scary.volume = volume;
effectAct2Scary.play();
}
}
function startGame() {
if (musicTitleScreen && typeof musicTitleScreen.play === 'function') {
musicTitleScreen.play();
musicTitleScreen.loop = true;
}
}
function processInput() {
var command = input.value.toLowerCase();
if (command === 'quit') {
print('The Courtyard awaits your return...');
stopEffectAct1Ambience();
playmusicTitleScreen();
startGame();
resetGame();
clearInput();
return;
}
if (currentAct === 1) {
handleAct1(command);
} else if (currentAct === 2) {
handleAct2(command);
}
clearInput();
}
// Event listener for input submission
input.addEventListener('keydown', function(e) {
if (e.key === 'Enter' && input.value) {
print('<strong>> ' + input.value + '</strong>');
processInput();
}
});
// Start the game with a welcome message
print('The Courtyard awaits... Enter "start" to begin.');
// Additional initialization logic
document.addEventListener('click', function handleClick() {
startGame();
document.removeEventListener('click', handleClick);
});
function resetGame() {
currentAct = 1;
inventory = [];
looseFloorboard = false;
doorLocked = true;
act1Complete = false;
stopEffectAct1Ambience();
document.getElementById('imageTitleScreen').style.display = 'block';
document.getElementById('imageAct1Look').style.display = 'none';
}
});
utils.js
function print(message) {
var output = document.getElementById('output');
output.innerHTML += '<p>' + message + '</p>';
}
function clearInput() {
var input = document.getElementById('input');
input.value = '';
}
act1.js
let looseFloorboard = false;
let doorLocked = true;
function processAct1(command, inventory, isAct1Complete) {
if (isAct1Complete) {
return true;
}
switch (command) {
case 'start':
document.getElementById('imageTitleScreen').style.display = 'none';
setTimeout(function () {
document.getElementById('imageAct1Look').style.display = 'block';
}, 2000);
if (effectAct1Ambience && typeof effectAct1Ambience.play === 'function') {
effectAct1Ambience.volume = volume || 1;
effectAct1Ambience.play();
}
setTimeout(function () {
if (typeof stopMusicTitleScreen === 'function') {
stopMusicTitleScreen();
}
}, 1000);
setTimeout(function () {
if (musicAct1 && typeof musicAct1.play === 'function') {
musicAct1.play();
musicAct1.loop = true;
}
}, 6000);
setTimeout(function () {
if (typeof print === 'function') {
print('You wake up in a strange room with no memory of how you got here. The walls are cold and metallic. There is a door to the north, a faint glow to the west, and a small window to the east.');
}
}, 5000);
break;
case 'go west':
case 'west':
case 'west wall':
case 'glow':
document.getElementById('imageAct1Look').style.display = 'none'; // Hide the look image
document.getElementById('imageAct1Window').style.display = 'none'; // Hide the window image
document.getElementById('imageAct1Key').style.display = 'none'; // Hide the key image
document.getElementById('imageAct1KeyTake').style.display = 'none'; // Hide the key take image
document.getElementById('imageAct1Clock').style.display = 'block'; // Show the clock image
document.getElementById('imageAct1Door').style.display = 'none'; // Hide the door image
print('The wall is shrouded in darkness, but you notice a faint green glow. You walk closer to the wall and see a dimly lit LCD clock hanging silent. Its green digits glow ominously, casting an unsettling aura. Strangely, you find it difficult to discern the time displayed.');
break;
case 'look':
case 'l':
case 'floor':
case 'floorboard':
case 'loose floorboard':
case 'look at floorboard':
if (looseFloorboard) {
document.getElementById('imageAct1Look').style.display = 'none'; // Hide the look image
document.getElementById('imageAct1Window').style.display = 'none'; // Hide the window image
document.getElementById('imageAct1Key').style.display = 'block'; // Show the key image
document.getElementById('imageAct1KeyTake').style.display = 'none'; // Hide the key take image
document.getElementById('imageAct1Clock').style.display = 'none'; // Hide the clock image
document.getElementById('imageAct1Door').style.display = 'none'; // Hide the door image
print('You notice a small rusted key hidden under the loose floorboard.');
} else if (inventory.includes('key')) {
document.getElementById('imageAct1Look').style.display = 'block'; // Show the look image
document.getElementById('imageAct1Window').style.display = 'none'; // Hide the window image
document.getElementById('imageAct1Key').style.display = 'none'; // Hide the key image
document.getElementById('imageAct1KeyTake').style.display = 'none'; // Hide the key take image
document.getElementById('imageAct1Clock').style.display = 'none'; // Hide the clock image
document.getElementById('imageAct1Door').style.display = 'none'; // Hide the door image
print('The walls are cold and metallic. There is a door to the north, a faint glow to the west, and a small window to the east.');
} else {
document.getElementById('imageAct1Look').style.display = 'block'; // Show the look image
document.getElementById('imageAct1Window').style.display = 'none'; // Hide the window image
document.getElementById('imageAct1Key').style.display = 'none'; // Hide the key image
document.getElementById('imageAct1KeyTake').style.display = 'none'; // Hide the key take image
document.getElementById('imageAct1Clock').style.display = 'none'; // Hide the clock image
document.getElementById('imageAct1Door').style.display = 'none'; // Hide the door image
print('The walls are cold and metallic. There is a door to the north, a faint glow to the west, and a small window to the east..');
}
break;
case 'go north':
case 'north':
case 'door':
case 'go to door':
case 'exit door':
case 'exit room':
case 'exit':
case 'leave':
case 'leave room':
if (doorLocked) {
document.getElementById('imageAct1Look').style.display = 'none'; // Hide the look image
document.getElementById('imageAct1Window').style.display = 'none'; // Hide the window image
document.getElementById('imageAct1Key').style.display = 'none'; // Hide the key image
document.getElementById('imageAct1KeyTake').style.display = 'none'; // Hide the key take image
document.getElementById('imageAct1Clock').style.display = 'none'; // Hide the clock image
document.getElementById('imageAct1Door').style.display = 'block'; // Show the door image
print('You approach the door and turn the handle.');
setTimeout(function () {
effectAct1DoorLocked.play(); // Play the game effectAct1Ambience
}, 2000); // Delay sound by 2 seconds
setTimeout(function () {
print('It is locked.');
}, 4000); // Delay print by 4 seconds
} else {
print('With the door unlocked, you step through and find yourself in a dimly lit hallway. The wooden floor creaks under your weight. As you look around your eyes slowly begin to adjust to the waking darkness.');
act1Complete = true; // Set Act 1 as completed
stopEffectAct1Ambience(); // Stop the effectAct1Ambience for Act 1
stopMusicAct1(); // Stop the MusicAct1 for Act 1
effectAct1DoorUnlocked.pause();
setTimeout(function () {
effectAct2Scary.play(); // Play scary effect for act 2
}, 2600); // Delay the execution of effectAct2Scary by 2.6 seconds
document.getElementById('imageAct1Look').style.display = 'none'; // Hide the look image
document.getElementById('imageAct1Window').style.display = 'none'; // Hide the window image
document.getElementById('imageAct1Key').style.display = 'none'; // Hide the key image
document.getElementById('imageAct1KeyTake').style.display = 'none'; // Hide the key take image
document.getElementById('imageAct1Clock').style.display = 'none'; // Hide the clock image
document.getElementById('imageAct1Door').style.display = 'none'; // Hide the door image
document.getElementById('imageAct2Hallway').style.display = 'block'; // Show the Act 2 image
}
break;
case 'go east':
case 'east':
case 'window':
case 'go to window':
document.getElementById('imageAct1Look').style.display = 'none'; // Hide the look image
document.getElementById('imageAct1Window').style.display = 'block'; // Show the window image
document.getElementById('imageAct1Key').style.display = 'none'; // Hide the key image
document.getElementById('imageAct1KeyTake').style.display = 'none'; // Hide the key take image
document.getElementById('imageAct1Clock').style.display = 'none'; // Hide the clock image
document.getElementById('imageAct1Door').style.display = 'none'; // Hide the door image
if (looseFloorboard) {
print('You grab the window sill and pull yourself up to look through the small window. You see a courtyard bathed in moonlight. It seems peaceful, but you cannot reach it from here.');
} else {
print('You grab the window sill and pull yourself up to look through the small window. You see a courtyard bathed in moonlight. It seems peaceful, but you cannot reach it from here. As you drop back down, you land on a loose floorboard.');
looseFloorboard = true; // Set the floorboard as loose
}
break;
case 'take key':
case 'take':
case 'pick up':
case 'pick up key':
document.getElementById('imageAct1Look').style.display = 'none'; // Hide the look image
document.getElementById('imageAct1Window').style.display = 'none'; // Hide the window image
document.getElementById('imageAct1Key').style.display = 'none'; // Hide the key image
document.getElementById('imageAct1KeyTake').style.display = 'block'; // Show the key take image
document.getElementById('imageAct1Clock').style.display = 'none'; // Hide the clock image
document.getElementById('imageAct1Door').style.display = 'none'; // Hide the door image
if (looseFloorboard) {
looseFloorboard = false; // Add this line to set looseFloorboard to false
effectAct1TakeKey.play(); // Play the sound effect
setTimeout(function () {
print('You pick up the key and put it in your pocket.');
}, 1000); // Delay the execution of effectAct2Scary by 1 second
inventory.push('key');
} else {
print('There is nothing to take.');
}
break;
case 'use key':
if (inventory.includes('key') && doorLocked) {
doorLocked = false; // Unlock the door
document.getElementById('imageAct1Look').style.display = 'none'; // Hide the look image
document.getElementById('imageAct1Window').style.display = 'none'; // Hide the window image
document.getElementById('imageAct1Key').style.display = 'none'; // Hide the key image
document.getElementById('imageAct1KeyTake').style.display = 'none'; // Hide the key take image
document.getElementById('imageAct1Clock').style.display = 'none'; // Hide the clock image
document.getElementById('imageAct1Door').style.display = 'block'; // Show the door image
print('You use the key to unlock the door.');
setTimeout(function () {
effectAct1DoorUnlocked.play(); // Play the sound effect
}, 2000); // Delay the execution of effectAct2Scary by 2 second
} else if (!doorLocked) {
document.getElementById('imageAct1Look').style.display = 'none'; // Hide the look image
document.getElementById('imageAct1Window').style.display = 'none'; // Hide the window image
document.getElementById('imageAct1Key').style.display = 'none'; // Hide the key image
document.getElementById('imageAct1KeyTake').style.display = 'none'; // Hide the key take image
document.getElementById('imageAct1Clock').style.display = 'none'; // Hide the clock image
document.getElementById('imageAct1Door').style.display = 'block'; // Show the door image
print('The door is already unlocked.');
} else {
print('You do not have a key.');
}
break;
case 'inventory':
case 'i':
if (inventory.length > 0) {
print('You have the following items in your inventory: ' + inventory.join(', '));
} else {
print('Your inventory is empty.');
}
break;
case 'help':
case 'h':
print('Available commands: start, look, go [direction/location], take [item], use [item], inventory, help, quit');
break;
default:
print('Invalid command. Type "help" for a list of commands.');
break;
}
return isAct1Complete;
}
act2.js
function processAct2(command, inventory) {
// Place all the Act 2 logic here from your original code
} else {
// Act 2 logic
switch (command) {
case 'look':
case 'l':
print("You are in a dimly lit hallway with faded wallpaper and old, dusty paintings on the walls. There are several doors along the corridor. There is a door to the south and further down the hall, a door to the north.");
break;
case 'go south':
case 'south':
case 'door':
case 'go to door':
print('You approach the door to the south, but it is locked.');
break;
case 'go north':
case 'north':
case 'door':
case 'go to door':
print('You approach the door to the north and turn the handle. It opens, revealing a staircase leading downward. You descend into the unknown...');
// Add Act 2 logic here
break;
case 'inventory':
case 'i':
if (inventory.length > 0) {
print('You have the following items in your inventory: ' + inventory.join(', '));
} else {
print('Your inventory is empty.');
}
break;
case 'help':
case 'h':
print('Available commands: look, go [direction/location], inventory, help, quit');
break;
default:
print('Invalid command. Type "help" for a list of commands.');
break;
}
}
print('<strong>> ' + command.toUpperCase() + '</strong>');
clearInput();
}
// Event listeners
input.addEventListener('keydown', function (event) {
if (event.key === 'Enter') {
processInput();
event.preventDefault();
}
});
// Start the game with a welcome message
print('The Courtyard awaits... Enter "start" to begin.');
});
}