Find Jobs
Hire Freelancers

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.
Project ID: 2747659

About the project

1 proposal
Remote project
Active 12 yrs ago

Looking to make some money?

Benefits of bidding on Freelancer

Set your budget and timeframe
Get paid for your work
Outline your proposal
It's free to sign up and bid on jobs
Awarded to:
User Avatar
See private message.
$170 USD in 14 days
4.9 (25 reviews)
5.4
5.4

About the client

Flag of BRAZIL
Curitiba, Brazil
5.0
4
Member since Sep 1, 2011

Client Verification

Thanks! We’ve emailed you a link to claim your free credit.
Something went wrong while sending your email. Please try again.
Registered Users Total Jobs Posted
Freelancer ® is a registered Trademark of Freelancer Technology Pty Limited (ACN 142 189 759)
Copyright © 2024 Freelancer Technology Pty Limited (ACN 142 189 759)
Loading preview
Permission granted for Geolocation.
Your login session has expired and you have been logged out. Please log in again.