Spooktacular Stories is a javascript based interactive story built by team #Zombie Hackers for the Code Institute Halloween Hackathon, PhantomForge.
- Interactive story with user selected options to control the story
- Multiple images per scene with a random one being selected each time
- Sounds playing on each scence, hand selected to match the theme
- Responsive on all devices
- Replayable due to different web of stories based on selections
- Spooky favicon
Use image generation API to generate a new image each time the story loads. A spike was done on this with 3 different AI and working locally, unfortunately the cost was too high to be feesable for this project. Maybe in the future when costs or down or a completely free one is found, it could be added back in.
Start Screen
Storyboard
Story Selection
Header & Footer
End Screen
A new story can be added by creating a new json file with the story name under the assets/js/stories folder. It must keep the same structure as the stories already present. Replace details in each section with your own story information.
Inside the assets/js/script.js file, add the story to the storyFiles array at the top of the file:
const storyFiles = [
"desert-island",
"haunted-forest",
"haunted-hotel",
"haunted-mansion",
"pirate-ship",
];
Providing the correct structure of the JSON file, the story will automatically be loaded into the story selection screen and work with only these updates. Custom images will need to be added into the image folder and those links updated in the json, else the default image will be loaded if none are provided.
Sounds for the story can be found in assets/sounds folder. Should new ones be required, they can be uploaded here.
The live site has been tested, all links seem to work, stories run through to the end, sounds and effects working, rules modal working, home and logo work to take back to the home page.
The following commands were used to get the code from local machine to github:
git add <filename> - Add the file to the queue
git commit -m "message" - Sets the message for the commit
git push - Push all code to safety of github
The site was deployed to Github pages by the following steps:
- Open the project repository
- Navigate to the settings tab
- Select 'Pages' from the left menu
- Select a branch 'main'
- Click 'Save'
Live Link: https://dee-mcg.github.io/Hackathon-Project/
To clone the project for local use, open your IDE of choice and type the following into the terminal followed by the enter key:
git clone https://github.com/Dee-McG/Hackathon-Project.git
Deep AI - Used to generate most of the images for the story
chatGPT - Used to generate some of the story lines