OVERVIEW
Role: Product Designer & Developer
Team: Katerina Durmanova, Collin Kavanar
Time Length: 2 months
Tools: HTML, CSS, JavaScript
Tags: Front-end development, Game Design
INTRODUCTION
The interaction between young people and recreational drugs is a complex behaviour. It is more than "I'm bored and want to have fun"; it is also an escapism, a defense mechanism against anxiety, depression, family issues... As the group leader of three students in my GBDA 301 class and a huge lover of choices and consequences games, I had an idea.
PROBLEM
How might we raise awareness of the risks of cannabis?
SOLUTION
"Choice", the web game utilizes all of the “RECIPE” gamification components: reflection, narrative, choice, information, play, and engagement. Gamification allows Canadian teens to easily digest information on cannabis instead of dry textbook teaching.
Play: players face the challenge of balancing different areas of life: mental health, physical health, growth (school, work, community, etc.), and finance. A choice may increase some areas while decreasing others, so users are challenged to keep the character alive. Through multiple playthroughs, players will learn from their failures and opt for better choices in game and in real life.
Engagement: good graphics, content, and challenge will keep the player engaged.
Narrative: choices and consequences will be the core of the gameplay. The contents of the narrative will be fun, concise, and touch on the topic of cannabis.
Information: there may be explanations to choices for the player to learn why this is good or bad and a chance for then to learn more on the issue.
Reflection: since the narrative mirror real life closely, after a game ends, players will have time to understand what was good or bad.
THE PITCH
Make your choices as a Canadian teen after Oct 2018, when recreational marijuana has been legalized.
There are four areas of life one must balance: mental health, physical health, study, and money. By answering (swiping) yes or no, the values may be decreased or increased. There will also be consequences associated with your choice. Try to stay in the game as long as you can!
CODING
I started with pseudocode and user story to plan the objects and the flow of the game.
Players will need to balance four aspects: mental health, physical health, study, and money. The values will change according to player input. As I write down the initial code to draw the canvas, I encountered my first problem: how do I show values changing?
The <canvas> element only has methods for drawing simple shapes, texts, and images. So I realized I had to create a top bar image with four symbols cut out so that I can draw four rectangles by code to indicate different values. It's important to note that the symbols must be the same height in order for the rectangles to correctly show values from 0 - 100.
Let's load all the Image(). My friend Katerina Durmanova wrote the narrative of the game while Collin Kavanar created the vector illustrations based on the characters. They include: cat, evil cat, child, friend, paramedic, parent, police, prof, dispensery worker, brain.
Play it here: https://cloris97.github.io/Choice/
Projects
