C the Magic Wizard Bakery

Learn C++ basics through simple tutorials and engaging gameplay! C the Magic is cute, accessible, and fun, teaching kids the magic of code and building the next generation of coding wizards.

Comment

Inspiration

The idea was mainly born from the desire to both create a video game and simultaneously learn JavaScript. One of our members enjoyed learning CSS Flexbox through a game posted on GitHub where the user was only allowed to progress unless they correctly inputted code. Two of our members loved Scratch when they were little, and we yearned to create a similar educational experience that taught real-world programming instead of drag-and-drop code. For that reason, we want to get kids excited about programming! We ended up creating a project from scratch, all while being completely self-taught and gaining very valuable experience from the event.

What it does

C the Magic Wizard Bakery is an educational game meant to teach kids C++ basics. Players type code to fulfill orders for magical customers. In our current proof of concept, our wizard teaches kids about #include, namespace, main functions, and cout in an example of our first tutorial. Players type their code into an input field, receiving immediate feedback on their performance and their next instructions from the wizard.

How we built it

We utilized JavaScript, CSS, and HTML code in VS Code using a combination of documentation, blogs, and videos to help us learn the basics of these languages. We created a simple webpage with a centered canvas element. Text was displayed on the canvas using JavaScript and other elements were positioned in a div that wrapped the canvas.

Challenges we ran into

From the very beginning, we faced a large challenge: We knew we wanted to build a web game in JavaScript. . . and none of us had ever used it. We began diligently researching, watching tutorial videos, reading documentation, and looking at Stack Overflow. We soon learned that many web games use the canvas element; however, our text rendered blurry on the canvas no matter what we did. At 4:00 am, we pivoted to displaying most of our text as paragraph elements.

Accomplishments that we're proud of

From building a web page to researching animation to drawing our own character, we are proud of accomplishing so much. All four of us were working with languages we knew little to nothing about, and yet still had a working program.

What we learned

Our team learned how to build a project utilizing CSS, HTML, and JavaScript. This meant, for example, learning how to time images, how to display elements sequentially, and what the process of game development entails. We were excited that, for the first time, we were able to create interactive graphics.

What's next for C the Magic Wizard Bakery

We are very passionate about this project and proud of the progress we were able to make with so little experience in such a short time. However, we did have an extended project in mind, including a map along additional levels for the children to progress through. In the future, we would love to continue to develop C the Magic with various levels of gameplay in which a player must type code to fulfill customer orders. Each level will begin with a lesson to introduce a new concept within C++ for beginners. After mastering the lesson, there will be an interactive game to help students practice their skills while having fun!

Built With

Share this project:

Updates