In this class we covered basic programming elements such as variables, loops, conditions and classic algorithms. As well we covered complexity, prioritization and framing which is especially important in a creative and innovative context. To give first semester students space to learn the basic elements of coding, UI-Design is not the focus of this class, however students can customize the UI-Design as a bonus feature.
The Task
The final project of this course was to develope our own version of the rock paper scissors game by using HTML, CSS and JavaScript.
Before we started we received great advice, motivation and inspirational examples from game developer Kathrin who works at Spellgarden Games.
The minimum requirements were the must have features which included:
a working game logic “rock paper scissors”
one player mode against the computer
basic interface in html, css
game is working without bugs
We could get extra credits for design (e. g. customised buttons, backgrounds, characters etc.) and also for additional logic in our code (e.g. a table of results, a restart button or even add a fourth character).
Design process
I started my research online to find inspiration and also to figure out what kind of features I would like to have in my game and what I would actually be able to do being a total beginner. Then it was time to start coding.
I watched several tutorials to understand the logic and how to add or change something in my code.
For my design I wanted to have cute characters and candylike colors, so that it will bring people joy while playing and looking at the game. I started off by drawing the characters by hand, then edited them in Figma and gave them all names. I also found the cutest font which fit in well with my design.
The characters represent the buttons the player can click on and there is an effect in form of a background color change of the buttons while hovering over them.
Low-fi drawingMid-fi drawing
Challenges
The biggest challenge for me was certainly the coding part.
As a beginner I wasn’t sure at first wether I would be able to implement any additional features in my game or not. But I was determined to give it a hard try!
End result
After hours of rewriting and debugging my code, I could finally present my final project to my tutor and class mates and I am very happy with the result!
Hi-fi version
Check out my very own designed and most importantly working rock paper scissors game, click on “Play Game”!