ajax farmville-style functionality

Cerrado Publicado Apr 19, 2011 Pagado a la entrega
Cerrado Pagado a la entrega

I'm a php programmer building a site that needs a bit of ajax functionality. What I need is just a small script that will provide this functionality and I will then modify it to use on my website. So, you do not need to create an entire web application or an entire program, just one script.

Here's what I need:

Imagine a web page with an image of a 100 pixel square on it. Below that, there is a green div rectangle of 500 x 400 pixels.

If a person clicks on the square, their cursor changes to an image cursor instead (for example an image of a tool), when they move their cursor to the rectangle below, an additional square appears below their cursor (as if they were dragging it), they can then place it anywhere in that rectangle with a snap to grid functionality by clicking down. Once they place it with a click, a copy of the square stays in place within the rectangle wherever they clicked down. A new square appears below their cursor and they can again (with a snap to grid functionality) place the new square easily next to the existing one (or anywhere else they want within the rectangle). They can keep doing this as long as they want. When their cursor leaves the rectangle the square that was attached to their cursor disappears. When they click on any other button, the cursor changes back to a regular cursor.

This sounds complex, but basically what I need is similar to what you do in farmville when you click on the picture of a hoe. Your cursor changes to a small hoe and an outline of a square appears under your cursor in any area where you can place the square (in my version that's only within the rectangle). You can then move your cursor around (and the square moves with you) and click down anywhere to place it. A new square appears and you can place that next to or below your existing one (this is where the snap to grid is important to make it easy to position squares next to each other) or anywhere else you want.

If you've ever played farmville you know what I mean. In farmville it's done with flash, and I need it done with javascript instead. It is for a gardening design tool, that's why the functionality is similar to farmville. Again, I only need one html page with javascript that gives me the functions I need to do the above things. I'll then build my tool around it and customize it to my needs. I already know how to turn a cursor into a custom image, the main thing I don't know how to do is make the square appear when you're in the rectangle, to make it snap to a grid when you place it, and to make another copy of the square appear as soon as you've placed it. You can use whatever images you want, just make some blank ones. It doesn't matter since I'll change it to whatever images I need.

I tried doing this myself using the drag and drop functionality that comes with jquery (which has a nice snap to grid function), but it doesn't allow you to drag and drop without holding down the left button. I need it to work without having to hold down the left button.

Here's a link to my sample page for this:
http://sunburstweb.com/Garden/
I'm also attaching the files for this page.

Please let me know if I need to clarify something about the project.

AJAX JavaScript

Nº del proyecto: #1030083

Sobre el proyecto

2 propuestas Proyecto remoto Activo May 24, 2011

2 freelancers están ofertando un promedio de $175 por este trabajo

YashpalSingh123

ajax/php experienced

$250 USD en 3 días
(9 comentarios)
4.2
topscripter

Hello I am highly interested in ur project. Please check PMB.

$100 USD en 3 días
(3 comentarios)
2.5