Ashley Kim

SHAKE2BREAK

Shake2Break is a quick competitive phone shaking game that could be used to solve a minor dispute by deciding the rank/order of people.


(2 players required to play)


Duration: 2 weeks (Oct 14 - Oct 26, 2020)
Tools: p5.js

[ app | code ]


telematic art 'shake to break' cover image


GamePlay

Starting the Game

Two players are required for this game to begin. Until the second player arrives, the first player would be placed in a waiting room.

Each shake is counted only when the player shook the phone “hard enough” (i.e. the acceleration in the z-axis is greater than 70). The circle’s radius is drawn in the intention of helping the player visualize the acceleration of the phone.

There are 10 rounds of 10 counts to fulfill (hence total of 100 shakes), and the progress of the player is both numerically and visually (filling up the square) represented.

As a player, you could see both your progress (indicated as “ME” on the top left corner) and opponent’s progress.


Mid-Game : Game in Progress

Shake as fast as you could!

( Fun Fact: I was playing against myself to record this -- Definitely got both of my arms worked out! )

Ending the Game

Once the player reaches 100 shakes, the rank is assigned and shown based on who has reached 100 counts first.

As you could see in the moving image, the progress also is shown visually (in addition to the number on the top right corner) via the square filling up. 



Demo Video




Reflection:

This project was a nice opportunity for me to learn how to implement client data / server data in server.js, as well as how to utilize sensor data from a mobile device. Although I was initially intimidated by the idea of using server.js and mobile sensor data (as I’ve never used nor seen a code for either of them before), I found implementing server.js and manipulating mobile sensor data very interesting and fun to play with. Since it’s my first time using those, I wanted to begin with a project that is simple yet to the point: an active synchronous shaking game. The server requires two players synchronously present to begin the game. Once there are two players, the competition begins, where each player can shake their mobile device back and forth to engage with the accelerometer inside the device, specifically the accelerometer data along the z-axis.

(ง˙∇˙)ว © 2021 Ashley Kim (ว˙∇˙)ง
Built from scratch with Gatsby & React!