Proof of concept project for an online memory game with HTML 5
$100-200 USD
Completed
Posted almost 12 years ago
$100-200 USD
Paid on delivery
I need a "proof of concept" project for an online game with HTML 5.
It's a memory game where 2 will be able to play together flipping the images from a grid.
You don't need to think about the game logic in this project (if the image was already flipped by the other user, how to match the image pairs, etc) or design, the purpose of this POC is to test the technology.
## Deliverables
What I want in this POC is to have the basic engine working in HTML 5 and PHP:
- Drawing the grid in a HTML 5 canvas
- Capture clicks in that canvas
- Send the click XY position to the server (which grid cell was clicked)
- Monitoring the "grid map" in background for changes
- Receive the changed cell pictures and display it in the correct grid cell
- Receive any new message and display it
- Store and retrieve information from the local storage: previous downloaded images, grid maps and messages
- The server will store and change the "grid map"
- Play a sound when a cell is clicked or when a new image is drawn
The technology you must use is:
- HTML 5
- JavaScript
- Canvas
- Web Storage
- Web Workers
- PHP
A sample run will do this:
- Two web browsers will open the same HTML 5 page
- Both will see an empty 6x6 grid with black cells (30x30 pixels for every cell), delimited by a thin (1px) grey line, a div bellow the canvas to show some messages and a reset button (don't mind about style sheets)
- If one user clicks in a cell, the server will receive the cell ID (XY position)
- A sound will be played when the click is done
- An already clicked/drawn cell cannot be clicked anymore
- The server will record this information in the grid map, that can be a file to keep it simple
- The grid map will be a 2 dimension array with 0 for an unclicked cell and 1 for a clicked cell, use Json to serialize for example
- The browser will pool the server and receive the updated grid map every second
- The browser will compare the new map with the previous (stored locally)
- If there are changes, the browser will download the clicked cell picture for the cells that are not painted yet, store it locally, and draw it in the right cell in the canvas and play a sound
- You can use hardcoded image URLs for this POC (like [login to view URL] for the cell 1x1, and so on)
- The browser will pool the server for messages, and if it receives one, it will store it locally and then append it to a DIV text contents
- To keep it simple, in the server side the messages can be retrieved from a local file that will be changed by hand during tests
- A button in the browser interface will reset the application (clear the local stored objects: images, messages and grid maps)
Attached is a image with a "mind map" of this POC, with a simple representation of these requirements.
Milestones:
Day 1: Project review, clear questions, review requirements
Day 2: PHP code returning a fixed grid map and message, client decoding these informations
Day 3: Web Worker retrieveing the grid map and message every 1 second from the web server
Day 4: Grid painting the 36 images from the grid map and DIV displaying the messages (fixed grid map until now)
Day 5: Grid responding to clicks, playing sounds, sending click info to the server
Day 6: Server updating the grid map from clicks and changing the local stored file
Day 7: Saving images and messages in the local Web Storage
Day 9: The reset button must clear the local storage to start over the client and server (reset grid map in the server too)
Day 10: Fully operational POC
25% bonus if the job is completed up to day 6.