When I was young, I remember cringing when I saw Tetra transform into Princess Zelda; the change was framed as an "upgrade" from an unremarkable brown pirate to a pale princess worth Herculean effort to save. Playing video games often meant I have to leave my identity at the door. Video games only knows one kind of Latina, and it's one mired in negative stereotypes. That's why I want to change this misconception that permeates in Latin culture and the misogynistic society we live in.

Now in 2022 more women play video games than men yet women make up only 24% of game developers. As aspiring game developers, when we see women create video games, there's more of a focus on the storytelling, vibrant and welcoming graphics, and maybe even an altruistic goal. Our vision is that saving the world starts with kindness, empathy, openness, and intentionality with words - not with weapons. And sometimes that starts locally.

What it does

As a team of two strong women pursuing STEM majors looking to bring more women into the field, represent, and practice what we preach, we created a game, Problama Llama, which teaches code in fun, easy, interactive way. First, we highlight a Latina woman as the protagonist helping her neighbor find and bring home a mischievous llama. We then immerse the player into Peruvian culture - often not explored in video games beyond gangsters, violence, and corruption. Players see phrases in Spanish, listen to cultural music, and learn more about domesticated llamas and daily life in South America.

All the while, we showcase the power of the basic HTML, CSS, JavaScript to not only aid the storyline by visualizing what code can do, but we also give a glimpse of how the code is not as daunting when we break everything down to its most basic HTML component.

How we built it

We built this using HTML, CSS, and JavaScript. Instead of creating multiple HTML pages, we challenged ourselves to use JavaScript to manipulate the DOM and keep everything on one page.

Challenges we ran into

Without good architecture to ensure that components aren't layered on top of one another, it was difficult to manage the dialogue via DOM using innerHTML. The dialogue wouldn't show when we designated it to, and it showed up only after the end of the game. That's why we had to create workarounds. Good architecture would've led us to create template layouts where going to the next scene would not be a hassle.

We initially had another teammate at the beginning of the hackathon. After learning how excited we were about the potential of creating a game with llamas, said hacker with male name said that something suddenly came up. While there may have been a legitimate reason, the quick apology and exit felt more like a rejection of the idea and team. Instead of letting this event deter us from going this route, we decided to go all in with creating a game from a female perspective.

Accomplishments that we're proud of

As novice game developers and front end developers (one of us majors in industrial engineering, not computer science) — we created a dazzlingly gorgeous graphics and clean interface. We created a game that's definitely off the beaten path.

This was a hack for joy!

What we learned

We learned about CSS layouts, the DOM, and interchanging content using JavaScript.

What's next for Problama Llama

More storyline and challenges that Problama Llama encounters before reaching home!

Built With

Share this project: