Girls in Tech: The Game

Inspiration

As a leader and a member of our school's Girls Who Code club, we wanted to make a project that was both fun and informative, bringing to light the unique experience of being a girl in the tech industry. The stark gender gap in representation of women and men in tech(25% versus 75%) results in a myriad of both internal and external challenges for the minority. As a result, we created this website and game to bring awareness to the often-unspoken struggles faced by female programmers, both to validate their uphill battle, and to enforce the notion that they are extremely resilient, strong, and talented.

What it does

We built an interactive html webpage describing the context and impact of the game, with headers along the side that allow the user to navigate to different sections. On one tab, there’s a processing graphics-based game embedded that the user can play. The game itself employs use of the keyboard arrows to move and dodge obstacles falling from the top of the screen. There is a score counter, and the speed of the blocks increases as the count gets higher, and there is a replay option triggered by a keyCode function. The site itself brings awareness to the struggles faced by girls in tech, and acknowledges them.

How we built it

As Cordy had more experience with html, and Marissa had more experience with Processing, we combined our strengths by dividing and conquering. Individually Cordy built the website’s base and stylized it in html, while Marissa made the game’s foundation in Java Processing. Marissa then converted the game into p5.js so that Cordy could embed it on the website, and we tested it for bugs. Lastly, we worked together to research and write up the text for the sections of the website.

Challenges we ran into

We ran into a few difficulties as we created this project, both individually and when it came time to combine our two pieces. On the game end of creation, Marissa originally wrote the program for the game in Java, but then realized as she looked for a way to embed it, that she needed it to be in Javascript. Thus, she had to spend time figuring out how to translate the code into the new language, and ran into troubles when things did not map over directly. On creation of the website, Cordy struggled to get pictures into the webpage, but eventually figured it out. When it came time to embed the game, we weren’t sure how to resize it, but with help from the internet and some creative problem solving, we worked it out!

Accomplishments that we're proud of

As we mentioned before, it was difficult to combine our two aspects of the project, and it took a lot of work on both ends to figure it out. At one point, we almost considered just making the game a separate link, but in the end, we got it to work! Now, the game is directly embedded into the webpage, seamlessly and functionally, which is very cool. Neither of us had done anything like that before and so we were both excited to learn something new and make something that looks great and works well.

What we learned

We learned much from a strictly technological standpoint, Marissa learned how to translate code from one language to another, and she worked with Javascript for the first time during this hackathon. She learned the differences in syntax and functionality, and how to use online reference libraries when working with a new language. Additionally, Cordy learned how to embed iframes and images in html, and how to resize them to fit the screen. She employed use of online tutorials and tech websites to figure out how to do this and succeeded in embedding the game and multiple images. From a research standpoint, we also learned more about the struggles faced by girls in tech, as some of them we, as girls in tech, hadn’t known about before.

What's next for Girls in Tech: The Game

Once you play the game a lot of times, it gets a little boring, but overall, there are a lot of directions we could take to make the game more complex, fun, informative, and interesting. One way the game could be improved would be by not just focusing on dodging the negative struggles, but also focusing on collecting the positives. We would make a function that allows you to collect good squares that reference real-life benefits of being a girl in tech, while still avoiding the bad ones. We could also make a life-counter, that allows you to be hit a certain number of times before dying. Another route we could take would be to make the game have more levels based on obstacle and player speed, and we could include different types of obstacles to keep the players satisfied and engaged. The players would then have to learn different strategies to be at each level. We could also, at some point make it a two-player game so that it teaches group work, or add a timer by which the game must be completed within. If we wanted, we could even turn the whole project into a mobile app.