BattleGator

• 

  setup screen (one player)

• 

  player screen (two players)

Inspiration

We were inspired to try and make a fun game that could utilize Vultr's cloud servers for deployment and hold original pixel art in a cute way!! We decided on battleship due to the SASEHacks oceanic website theme and the idea of sinking the shark on a floatie.

What it does

Two laptops are able to connect with a Vultr link in a game of BattleGator (our battleship) and responses come in real-time as two players place their baby gators and try to sink the opponent's babygator. Players are able to see the opposing player's effects on their own gator!

How we built it

We used Java, css, node.js, express, socket.io, and HTML to code and build both the front and backend (game script, service). Aesprite was used to create all the gator sprites and the used .gif files for animation drawing and animating from scratch. There's a custom websocket event protocol for linking up games across cloud in real-time, and a server architecture that handles turn validation, win condition detection, and recovering from disconnects. We didn't use any frameworks or game engines while making it, just the DOM in Java. Then, we deployed it live on Vultr's cloud infrastructure.

Challenges we ran into

We ran into challenges adjusting our tile sizes on the website to be centered, images and gifs showing up, and adjusting the pixel art dimensions to fit. Our other main challenge was connecting our initial plan of hardware into inputs for the machine, but our system is functional without the use of any hardware.

Accomplishments that we're proud of

3 of our 4 team members had never coded anything before this hackathon, and so we're incredibly proud of the functionality of the game! We're also proud of how nice the graphics look for the game, and the enjoyable sound effects and animations while playing BattleGator. This was our first time facing java, css, and HTML.

What we learned

We learned how to begin coding in VSCode to create an interactive game with sprites and gifs, learning about Vultr, and learned how to collaboratively use GitHub while also assigning different roles and tasks throughout the hackathon to ensure efficiency!

What's next for BattleGator

BattleGator could be a full out game! Adding more tiles for the future along with a rotation button may be useful. We can also look in the future to implementing hardware as inputs for the game, expanding the grid, and expanding animations on the site outside of the playing grid!

Built With

• html
• java