Project Details | Pirate Island Puzzle Game

Implementation of an online pirate puzzle game with Oracle Spatial

| Project Date -- 2018

| Skills Used -- python | webprogramming | object-oriented programming | sql | oracle spatial | spatial databases | svg |

| Link to Project --

| Repository --

Project Overview | Pirate Island


We created this fun pirate puzzle game within 4 weeks for a spatial database course.

Developers: Martin Ewart, Livia Jakob, Marco Pizzo, Callum Crawford

Project Summary: The primary objective of this project was to implement a database in Oracle Spatial to store spatial data, and execute spatial queries and computations. This was achieved by building a game platform. This project contains a number of spatial operations and data structures, allowing us to improve our knowledge of Oracle Spatial, while creating something fun and interactive.

My resposibility within the group: I developed the whole game flow and user interaction using JavaScript, AJAX and Python3. I programmed web page animations, the interactions between the web page, Python and the database when submitting moves or retrieving new levels.


The code can be found in this GitHub repository:

Check out if you can beat the highscores and play the game here (and don't forget to turn the music on!).


1 Game Description

Pirate Island is an interactive website that tasks the player to move a pirate ship to the treasure in the quickest time possible while a timer counts down. This can be done through the player typing the moves into an input box or by entering moves into a form. Islands, octopi and other frightening devils of the sea await however, with the weather ever-changing this is no easy task. On completion the player will collect the remaining seconds as points, which accumulate as they pass through the levels. Having completed all five levels (Figures 1 and 2) they will be prompted to add their pirate name to the leader board. Talented pirates are displayed on the leader board and their notoriety on the rough seas secured in the abysses of the database.


2 Architecture

2.1 Architecture Overview

An Oracle Spatial database stores levels and obstacles. A Python object model sits on top of the database that loads and creates dynamic content such as the level SVG which is then inserted into a Jinja2 template. JavaScript handles the user interaction and the game flow. After the player submits moves the requested path is passed through AJAX to a Python script. Spatial queries such as intersection and distance with Oracle Spatial determine whether the player successfully navigates the ship to the treasure. The validated path and information on whether the ship sinks, crashes or arrives at the treasure are handed back in JSON format. The use of AJAX enables the animation of the ship movement without refreshing the page. Adding a name and score to the leader board in the database follows a similar logic as the move submission described above.


2.2 Technologies

  • SVG -- Graphics of the games and website.
  • Python3 -- Used to manage all interactions with the database. It generates the HTML code that forms the website and is acting as the translator between the user interface and the database.
  • Nose -- Used to unit test the Python code
  • Jinja2 -- Adds the SVG game field and other dynamic HTML content generated by Python to a HTML template.
  • JavaScript -- Responsible for the whole user interaction, handling of the game flow and dynamic game display such as animations.
  • Bootstrap -- Used to ensure that the website content is adaptive to different screen sizes.
  • HTML5 -- Displays the website content.
  • CSS -- Styles the website and SVG elements.
  • Oracle Spatial -- Stores level data and spatial objects with views sitting on top of the tables.
  • AJAX (jQuery) -- Passes the players moves to a Python script, which communicates with the database. In the opposite direction, it receives then the evaluated path from the database through Python without the need for refreshing the page.
  • JSON -- Data format to send and receive data with AJAX.
  • GitHub -- Used for collaborative work and version control.


2.3 Data Driven and Multi-User

The system has been designed so that all components are generic. Once added in the database, a level can be loaded, rendered and played without any code changes. The Python, JavaScript, AJAX and HTML code are completely data driven.

This allows the following features:

  • Flexible start/end points
  • Grid adaptability
  • Multiple objects per level
  • Variable object size and types
  • Objects can have different patterns and new patterns can be added
  • Simple database entry changes or creates new levels without changing any code

Furthermore, the system allows multiple users to play the game at the same time.


4 Summary

Within a short time frame, Pirate Island has been developed and released for beta testing. A generic framework has been created allowing configurable levels which can easily be extended. Furthermore, the game demonstrates storing spatial objects and performing spatial operations based on user inputs. In particular, an iterative spatial method was built that determines where a route intersects with a polygon. In addition, a fully interactive user interface that animates and moves spatial objects defined by the database has been built. Some limitations were found during the beta testing phase, however these can easily be addressed in future versions. Overall, a fun game with a flexible framework demonstrating a range of spatial database operations has been created.


5 Screenshots