top of page

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">&nbsp;</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">&nbsp;</audio> <!-- Effect for act 1 -->
        <audio id="effectAct1DoorLocked" src="https://drive.google.com/uc?id=1DTWkzxdfcKWFFLwiyD_nNDdvSz3mNj7J">&nbsp;</audio> <!-- Effect for act 1 -->
        <audio id="effectAct1DoorUnlocked" src="https://drive.google.com/uc?id=1yWWVf61mNJ-fJkDryhouiR-WyhZPhgN3">&nbsp;</audio> <!-- Effect for act 2 -->
        <audio id="effectAct1TakeKey" src="https://drive.google.com/uc?id=1Hqy45e9UKsVL1FjISyRBkk-mniCiNh_5">&nbsp;</audio> <!-- Effect for act 2 -->
        <!-- Act 2 effects -->
        <audio id="effectAct2Scary" src="https://drive.google.com/uc?id=1fyrDemf6B2t1Gp4bdIuztRWbRZwnUHDA">&nbsp;</audio> <!-- Effect for act 2 -->

    <!-- Game music -->
        <!-- Title Screen Music -->
        <audio id="musicTitleScreen" src="https://drive.google.com/uc?id=1eoQiOtK0Y1Axkdj0G7LN-UZ5tuGMixyh">&nbsp;</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>&gt; ')) {
            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>&gt; ' + 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>&gt; ' + 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.');
});
}

bottom of page