Post

Hop It & Profit

A grid based game where the player must reach the goal while avoiding obstacles.

Hop It & Profit

Overview

While working at House of How, I contributed to a goal style game developed for DraftKings called Hop It & Profit. My role focused on front-end development, specifically responding to real-time game state changes provided through server responses.

A grid based game where the player makes a wager, and then progresses towards the goal while avoiding obstacles. If the player hits an obstacle, they lose their wager; however each row they progress earns a multiplier on their wager. They can cash out at an time or continue for higher rewards.

Information

  • Client - DraftKings (via House of How)
  • Timeline - Oct. 2021 - Jan. 2022
  • Platform - Web Browser
  • Genre - Casino / Gambling
  • Tech Stack - TypeScript/JavaScript, Python

Demo

Contributions

My role focused on front-end development, specifically responding to real-time game state changes provided through server responses.

Demo video

The game had a two theme mechanic where the player could swap between two unique themes.

Demo video

Challenges

The first challenge… was creating a responsive layout that would work on both portrait & landscape orientations. Since the player could press on game tiles to move the character, the clickable areas had to resize in response to screen size changes.

The second challenge… had to do with the amount of animations needed to run at once, especially on mobile. The first approach I used was animating spritesheets via CSS, but lead to choppy animations and was eventually scrapped for Spine.

The third challenge… was integrating an input field over the game canvas. The input field was used to allow the player to enter any bet amount they wished. There were issues with how the field wouldn’t receive focus on some browsers or displayed odd behaviors on others. The solution was to create a custom input field that would receive focus and allow the player to enter their bet amount.

This post is licensed under CC BY 4.0 by the author.