Building a Game with Javascript - Project Setup

TL;DR

The video demonstrates a beginner's approach to setting up an HTML5 game project using Parcel and JavaScript.

Transcript

hey everyone in this video I'm gonna be showing you my project setup for building out a simple html5 game building games isn't something that I'm very experienced in so feel free to critique my project setup and give me better suggestions I did dabble in building games a while back like in high school in college but I kind of phased out of it when ... Read More

Key Insights

• 😒 The use of Parcel as a bundler enables efficient management of web assets, making it suitable for game development.
• 💱 Automatic reloading after file changes enhances productivity, allowing developers to see changes in real time.
• 👾 The centralized state pattern facilitates better tracking and management of game state, valuable in interactive environments.
• 👾 A simple initial setup, like a moving box, is essential for understanding game mechanics before progressing to more complex features.
• 👾 Refactoring code into modular components promotes better organization and maintainability of the game project.
• 👨‍💻 The creator invites community feedback, highlighting the collaborative nature of coding through shared experiences and suggestions.
• 👨‍💻 All project code will be available on GitHub under an MIT license, encouraging public access and modification.

Questions & Answers

Q: What is the primary tool used in this game project setup?

The primary tool used for this game project is Parcel. Parcel is a web application bundler that compiles JavaScript, HTML, and CSS files into a single file, making it easier to manage and deploy the code. It also offers features like hot reloading, which automatically updates changes in the browser without a full refresh, thus streamlining the development process.

Q: Why did the creator choose to use a centralized state for the game?

The creator opted for a centralized state approach due to its advantages in managing the game state over time. Centralized state management facilitates easier debugging and tracking of changes across the game, especially when dealing with multiple game objects and interactions. This method is commonly associated with frameworks like React and Redux, and while the creator prefers a more functional programming approach, the centralized state pattern helps simplify the logic in their HTML5 game.

Q: What does the creator plan to do with the compiled game code after development?

The creator plans to explore using Electron to bundle the compiled game code into a desktop application. By leveraging Electron, they hope to provide users with a downloadable version of their game that runs independently of a web browser, thereby enhancing accessibility and user experience. They also express intent to share their game code on GitHub, allowing others to learn from or contribute to their project.

Q: How does Parcel improve the game development process?

Parcel enhances the game development process by offering automatic file bundling, which compiles multiple JavaScript, HTML, and CSS files into a single output. This streamlining significantly improves load times and deployment ease. Additionally, its hot reloading feature updates the browser view whenever the code is saved, enabling rapid iterations and immediate feedback, which is essential for game development.

Summary & Key Takeaways

• The creator shares their initial project setup for a simple HTML5 game, aiming to return to game development after a hiatus. They utilize Parcel for bundling their JavaScript, HTML, and CSS files.

• Key features of the setup include an auto-reload function when files are saved, simplifying iterative development. The creator operates within a centralized state approach for managing the game's state, drawing a moving box on the game screen.

• The video encourages viewer feedback on the setup and outlines the intention to publish the project's code on GitHub for public access and collaboration.