Inspiration
The inspiration behind FightToCode comes from the desire to make learning programming more interactive and fun. We wanted to create a game where players are actively challenged to answer coding-related questions in order to proceed through levels and fight enemies. By combining gaming with educational content, we aimed to make learning programming concepts engaging and memorable. Our inspiration also came from games like Dune, where backgrounds change as players progress, but with a focus on integrating tech challenges that make players think and learn.
What it does
FightToCode is an interactive educational game where players control a character that battles enemies by answering tech-related questions. To attack an enemy, the player must click the Attack button, which triggers a coding-related question. If the player answers the question correctly, the enemy’s health decreases by 25 points. After the player attacks, it's the enemy's turn to act. The enemy can choose to attack the player, and the player must decide whether to block the attack. If the player chooses to block, they must answer another question correctly; if correct, only 5 health points are lost. If the answer is wrong, the player loses 25 health points instead. The game continues, alternating between the player's and the enemy's turns, with both sides trying to reduce each other's health to zero. The first to defeat the other wins.
How we built it
Languages:
JavaScript
HTML5
CSS
Frameworks/Libraries:
HTML5 Canvas
jQuery
Platform:
VS Code
Version Control:
GitHub
We used JavaScript to handle the logic of the game, HTML5 and CSS for structuring and styling the game interface, and HTML5 Canvas for drawing game elements and characters. Our team worked collaboratively using GitHub for version control and VS Code as the primary code editor. We also integrated a simple question system, where players must answer coding questions before performing actions like attacking or blocking.
Challenges we ran into
ntegrating the Question System: We had to design a question bank that would dynamically trigger as the player interacts with the game. Ensuring the system works smoothly with real-time gameplay proved challenging at first.
Balancing Difficulty: As the game progresses, we wanted to make sure that the questions' difficulty increased appropriately and kept players engaged, which required significant testing and tweaking.
AI Development: Developing the enemy AI to simulate realistic behavior—whether to attack, block, or shield—while also maintaining fairness in gameplay was a major challenge.
Collaborative Workflow: As a small team, we had to coordinate effectively across different areas (game logic, front-end, question system) to ensure the game ran smoothly.
Optimization: Ensuring the game runs smoothly in browsers, especially with complex animations, was another challenge that required optimization of the game code.
Accomplishments that we're proud of
uccessfully Integrating Educational Content with Gameplay – We’ve managed to create a game that teaches coding concepts while still being fun and engaging for players.
Dynamic Game Mechanics – We developed interactive combat mechanics where players must answer coding-related questions to perform actions like attack or block, which adds a unique educational twist to traditional gaming.
Building a Solid Question System – We built a flexible question bank with coding topics of varying difficulty, ensuring that players are constantly exposed to new concepts as they progress.
Implementing Enemy AI – We successfully implemented an AI that can decide when to attack, block, or shield, making the game feel more interactive and challenging.
Efficient Team Collaboration – The team worked well together using GitHub for version control, allowing smooth coordination and code management across different components.
Creating a Fun Learning Experience – Our game not only helps players practice coding but also motivates them to keep learning with each victory, helping them reinforce what they've learned through gameplay.
What we learned
Team Collaboration: We learned how to collaborate effectively as a small team, ensuring that our tasks were well divided and the project progressed smoothly.
Game Development: We gained experience in game development, specifically using JavaScript and HTML5 Canvas for game mechanics and animations.
Educational Design: We learned how to balance fun with education, ensuring that the gameplay mechanics aligned with our educational goals of teaching coding concepts.
Problem Solving: We learned how to solve challenges related to AI development, dynamic question handling, and optimizing code for smoother gameplay.
Project Management: We learned how to manage a project using GitHub, ensuring that our code was well-organized and conflicts were resolved quickly.
What's next for Fight-To-Code
Adding New Levels – We plan to introduce additional levels with more complex questions and challenging enemies to keep the game engaging.
Enhancing Game Performance – Optimizing the code to make the game run more smoothly on different browsers and devices is a key focus moving forward.
Expanding the Question Bank – We will expand the question bank to include a broader range of programming topics and more challenging questions.
Developing an In-Game Teaching System – We aim to implement a feature where players can receive hints, tutorials, or explanations about the questions they answer wrong, providing an interactive way to learn.
Quiz Mode – We plan to add a separate Quiz Mode, where players can take coding quizzes to test their knowledge outside of the main gameplay.
Regular Updates – We’ll continue to refine the game, add new features, and update the gameplay experience based on player feedback and advancements in technology.
Log in or sign up for Devpost to join the conversation.