Skip to content

HelixGuardi/Stranger-Strings-lost-into-the-DOM

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Stranger Strings: Lost into the DOM

Play the Game!

Game Logo

Description

Step into the Upside Down in this thrilling 2D platformer inspired by the epic finale of Stranger Things! In Stranger Strings: lost into the DOM, your mission is to protect the legendary Eddie Munson as he sreds Master Of Puppets on his guitar, unleashing chaos and metal against the demonic hordes.

The stake are high: survive until the timer runs out and witness an unforgettable finale. Along the way, collect hidden cassette tapes scattered to unlock a special power that can turn the tide in your favor. But be warned, the enemies won't make it easy, and only the bravest will keep Eddie rocking to the very end!

Main Functionalities


  • 🎮 2D Platformer Action: Fast-paced gameplay that will test your reflexes and strategy.
  • 🛡️ Defend and Survive: Protect Eddie while he plays his iconic solo.
  • 🎵 Epic Soundtrack: Rock out to the vibe of Master of Puppets as you play.
  • 🎁 Collect and Power-Up: Grab cassette tapes to activate game-changing abilities.
  • 🔥 Stranger Things Vibes: Immerse yourself in the dark, nostalgic world of the Upside Down.

Are you ready to take on the challenge, defend Eddie, and make it to the grand finale?
Metal up your game and let’s shred! 🤘

Backlog Functionalities


The journey to the Upside Down doesn’t stop here! In future updates, I’m planning to bring even more exciting features to make Stranger Strings an unforgettable experience:

  • 🎬 Multiple Epic Endings: Unlock different finales that will add even more layers of suspense and reward depending on your performance. Every choice could lead to a new ending!

  • More Special Abilities: Discover new cassette tapes with powerful abilities that will change how you play. Think bigger, bolder, and more metal!

  • 😈 New Enemies: Face off against terrifying new creatures from the Upside Down, each with unique challenges to test your skills.

  • 🎨 Skins for Characters: Customize Eddie and other characters with unlockable skins that bring variety and personal style to your gameplay.

  • 🗺️ New Maps: Explore brand-new areas, each with its own atmosphere, challenges, and surprises to keep the gameplay fresh and exciting.

  • 🎥 Enhanced Animations: Enjoy smoother, more dynamic character animations that bring Eddie, the enemies, and the entire game world to life like never before.


Stay tuned for these updates as Defend Eddie continues to grow. The Upside Down is evolving… and the best is yet to come! 🔥

Technologies used

Stranger Strings: Lost into the DOM was built using modern and versatile web technologies to bring this 2D rock-and-roll adventure to life:

  • HTML: The backbone of the game, structuring the content and elements that bring the world of Eddie to your screen.
  • CSS: Carefully styled to create an immersive visual experience, from the eerie atmosphere of the Upside Down to the glowing energy of the Epic Finale.
  • JavaScript: The brain behind the game mechanics, powering the movement, interactions, and game logic.
  • DOM Manipulation: Crafting dynamic changes in real time, ensuring smooth transitions, animations, and updates as you play.

This combination of technologies ensures the game delivers a seamless and engaging experience for all players. 🎮✨

States


In Stranger Strings: Lost into the DOM, every screen is carefully designed to immerse you in this epic journey. Here’s a breakdown of the different game states:

1. Start Screen

Welcome to the Upside Down! From here, you can kickstart the most rockin’ battle of the universe. Explore the menu, set your strategy, and get ready to defend Eddie.

2. Instructions Screen

New to the game? Don’t worry! This screen will guide you through everything you need to know: how to move, collect cassettes, and unleash special abilities in perfect sync with the music. 🎸

3. Game Over Screen

Didn’t manage to protect Eddie? 😢 This is where you’ll face the consequences. But don’t lose hope — you can always try again and save the day!

4. Epic Finale Screen

If you survive until the timer hits zero, get ready for a soul-shaking reward. Eddie’s epic finale is a show you’ll never forget, reserved only for the best players. 🔥


Every screen is crafted to keep you fully immersed in this perfect mix of rock and 2D action. The adventure awaits!

Proyect Structure

The project is organized into several folders and files to keep everything well-structured and maintainable. Here's an overview of the project structure:

Root Directory

  • index.html: The main HTML structure of the game. It includes the basic layout and links to the external styles and scripts.

Folders

1. Resources

This folder contains all the assets used in the game, including audio files, fonts, images, animations, and elements used for instructions, characters, and more.

  • audio/: Contains sound files used in the game, including background music and sound effects.
  • fonts/: Custom fonts used for the game interface and styling.
  • images/: Visual assets, including characters, backgrounds, icons, etc.
  • animations/: Files for any animated resources used in the game.
  • instructions/: Elements like images or text used to explain how the game works.

2. Scripts

The main folder where all the JavaScript files reside. It includes the logic for different parts of the game, structured by classes and functionality.

  • index.js: The main JavaScript file that runs the core logic of the game. It connects all other components and manages the flow of the game.
  • atack.js: Handles the attack mechanics of the game, including character actions and interactions with enemies.
  • casetItem.js: Controls the random appearance and behavior of collectible items that activate special abilities.
  • eddie.js: Manages the character "Eddie," including his movements, animations, and interactions.
  • enemy.js: Handles the creation and behavior of enemies, including movement, collisions, and interactions with Eddie.
  • epicVideo.js: Manages the epic video or cutscene that plays at key moments in the game (like the final epic scene).
  • hero.js: Defines the hero (player character) logic, including movement and actions.
  • thunder.js: Deals with thunder and related effects, which might interact with the player and environment during gameplay.

3. Sketch

This folder contains initial sketches and concept art for the project. It includes early designs and visual ideas that helped shape the game.

  • sketches/: Raw sketches of characters, environments, and other visual elements that were later refined.

4. Styles

This folder contains all CSS files for styling the game interface.

  • style.css: The main stylesheet that handles the visual appearance of the game, including layout, typography, and color schemes.

Summary

This project is structured to keep the HTML, CSS, and JavaScript components modular and organized. The script folder contains all the game logic and functionality, while the Resources folder manages all the media files. The sketch folder holds early design concepts, and the styles folder ensures the game looks visually appealing.

Extra Links

Sketch

Link

Trello

Link

Slides

Link

Deploy

Link

About

Proyecto final del modulo 1 del ironhack Bootcamp

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published