Is anyone aware of any example photo hunt/hidden object games either in HTML and Javascript or flash if necessary? I am having trouble finding one, I may be using the wrong words to search.

Photo hunt being like the wheres wally/waldo books where you look for wally in a complex image until you find him. So if it were played on screen you would press the location of wally and it would either be correct or wrong, possibly timed. I am hoping to find one where you can just load in your own photos and specify some co-ordinates that match where the hidden object is.

A spot the difference example may be useful as a starting point but I haven't found an example of either that is web based yet.

  • \$\begingroup\$ not HTML5, but try this: facebook.com/GardensofTime \$\endgroup\$ – Tetrad Nov 3 '11 at 17:16
  • 4
    \$\begingroup\$ Why do you want to find one? Do you have a problem you're trying to solve? Why not ask that problem as a question? \$\endgroup\$ – Tetrad Nov 3 '11 at 17:16
  • 1
    \$\begingroup\$ With broswer-side only, you are open to cheaters. There should be mapped image coords on server side, on each click, event should be sent to server and checked for matches. If match, response should contain some overlay png picture (like Thomas suggests) URL or coords of object contour polyline, and make it as visual confirmation. \$\endgroup\$ – Deele Nov 11 '11 at 10:32
  • 1
    \$\begingroup\$ The bounty is not going to help you, see: meta.gamedev.stackexchange.com/questions/653/… If you want to create such a game then you should simply ask for help. I could definitely help you create such a game, but you have got to state your specific purpose and problems to get the question moving. \$\endgroup\$ – aaaaaaaaaaaa Nov 13 '11 at 14:39
  • \$\begingroup\$ It sounds to me like you are wanting to take a game somebody else made and just drop in your own photos, but you are asking a question that beats around the bush. If so, shame on you both for expecting someone else to make a game for you and for being evasive. \$\endgroup\$ – jhocking Jan 7 '12 at 12:24

Here we have two in Python: https://github.com/siberianluck/PhotoHunt https://github.com/paulcwatts/1hph

For a javascript one, you can use a library for the drag and drop, and rotate stuff to place your hidden objects and then you only need to define a decent format for exporting but I'd say something like this:

{ name: "The backyard",
  file_name: "backyard.png",
  items: [
    {name: "water hose", x: 120, y: 30, rotation: 20, file_name: 'water hose.png'},


If you put the code up the github, please let me know, a seven-year-old I sometimes babysit loves this kind of games but it's hard to find german ones :)

UPDATE Actually it's much easier: You have one background image and plenty other (png) images of the same size but with a lot of transparency. Then you just overlay them and whenever a mousedown event comes you check that position with the images by using canvas' getImageData

  • 1
    \$\begingroup\$ +1 for the update. Even though he didn't exactly ask for an explanation of how to do it, you gave a great explanation of how easy this is. That explanation is a lot more useful than his request for an example. \$\endgroup\$ – jhocking Jan 7 '12 at 12:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.