8 ms·

Show HN: Garden Madness, a flowery HTML5 game

53 points by superted 15y ago

superted 15y ago
Hi, I threw this game together last weekend, and have struggled with the UI for the remainer of this week (clearly not my primary competency :) ). The game is 100% HTML/JS, where the only HTML5-feature used is really the "font-face" functionality. Technically it is entirely based on jquery and some of its plug-ins. Would love all kinds of comments!
- superted 15y ago
  And yes, the backdrop is updated according to the time-of-day :)
- joakin 15y ago
  Its nice, some sounds would be really cool, for instance a background music, a click sound and a boom sound for the chain combos :) Nice work!
  - superted 15y ago
    Thanks for the feedback! I will definitely add sounds in an upcoming version. You do now happen to know any good JS libraries for working with sounds?
    - joakin 15y ago
      SoundManager looks pretty good, I havent tried it yet. http://www.html5place.com/2011/01/how-to-use-audio-with-html5-games/ http://www.html5place.com/2011/01/how-to-use-audio-with-html...
      - superted 15y ago
        Thanks, will try it out in a couple of hours!
- chime 15y ago
  This game is awesome. I gave up on a similar HTML/JS game I was making because I could not think of the gameplay/goal/prize: https://zetabee.com/games/bee https://zetabee.com/games/bee - I love your 'find pattern' goal. I think with these kind of puzzle games, the hardest part is coming up with a good effort/reward system that makes gameplay fun instead of tedious and you did an awesome job with Garden Madness!
  - superted 15y ago
    Thanks Chime! Looking at "Bee in the garden" right now thinking it looks awesome! What have you used to build it?
    - chime 15y ago
      Mostly http://raphaeljs.com/ http://raphaeljs.com/ and jQuery.
qq66 15y ago
I like it! I got the highest scoring click of "all time" :)
- superted 15y ago
  Good job, even though all highscores are local, not global. :) Should probably mention that somewhere. Speaking of global highscores in a JavaScript/HTML context: Anyone knows how to create a set-up that prevents cheating? The only approach I've seen that seems viable is to register all events and verify the order and validity of these server-side, which of course is a bit cumbersome.
jupiter 15y ago
Once you found your way in, it's really addictive. However, if you could make the introduction a little easier to grasp, more people would give it a try.
- superted 15y ago
  Absolutely, thanks for the tip! Making things dead-on easy is my top priority at the moment, so I will definitly look into this
AlexC04 15y ago
I see the brick/block popper game a lot (I have a games portal and I check out the 'new stock' pretty much every day). On thing that I notice that the better brick-block-popper games do is that they start with far fewer colors. Maybe just three or four types of flowers (you might run in to layout problems on that one). As the levels advance in difficulty, you add more flowers. That really lets players get the hang of the game mechanic. Anyways, big fan of the html5 stuff... my current project is (WARNING CPU killer http://chesser.ca/jsSprite/12-glorious.php http://chesser.ca/jsSprite/12-glorious.php) it's all up on github if anyone wants to look at the code https://github.com/AlexChesser/jsSprite https://github.com/AlexChesser/jsSprite
- superted 15y ago
  Excellent suggestion! I have actually struggled with finding the number of different types of unique flower that makes the game just about hard enough to play and still fun and intuitive. Adding more types of flowers as you go along is actually a great way of inducing difficulty for players that are getting the hang of it. Hehe, your project almost sent my computer into oblivion :) Looks great though.
- simonsarris 15y ago
  Oh hey! Glad to run into your progress. Hope the game does go well.
  - AlexC04 15y ago
    Thanks Simon! (to anyone onlooking, Simon has answered every one of the questions I posted on Stack Overflow with respect to getting this rolling)
- tmountain 15y ago
  Just out of curiosity, what games portal are you using?
  - AlexC04 15y ago
    I wrote the stuff behind http://fstr.net http://fstr.net so it's my own personal games portal. The games come in from a few different XML feeds 'mochigames' being the big one. There are some crons that run a few times a day to update the list of available games. So I hop on my portal every day and check out a few of the games on the "newest tab" anything I "vote up" (while FB logged in) also gets shown on the "featured" page. Some of the neat things I've done (IMO) include the live search, infinite scrolling and "zoom button" on the games page (which is actually slightly deprecated at the moment, but it was a great idea when used in a different layout). While I was actively promoting it, I managed to get it to somewhere within the top 300K websites worldwide, but the marketing model of 'spamming reddit' isn't really rewarding so I'm looking at trying to find a model that actually adds more value to the web-gaming experience. A forum for example - currently just one guy talking to himself. Or maybe the ability to "turn off" all adsense advertising (with facebook login). In terms of marketing, I've been testing out the impact of having a better, more keyword rich domain - copies have gone up on http://1fungame.com http://1fungame.com and http://games-to-play.co http://games-to-play.co - so far I'm finding that the users that come in to the keyword domain bounce a hell of a lot less and stay for a lot longer ... I'm still not convinced I should 301 (HTML code for moved permanently). I was really excited about it when it first launched because it made $1 in adsense within a few hours of launching ... then it got really exciting and paid for the registration fee of the domain name. Nowadays it doesn't quite cover hosting fees but if we did everything for the money we wouldn't be hackers right? :) Anyways... that's a really long answer to a very short question. My games portal is http://fstr.net http://fstr.net
youngtaff 15y ago
Really nice - wonder how it converts / runs as a phone app
- superted 15y ago
  Excellent question, I have not had the time to test it on my iPod Touch yet, so I am basically keeping my fingers crossed that it still runs ok. Has anyone tried loading this up on Android/IOS?
  - acro 15y ago
    Seems to work quite nicely on HTC Desire with Android 2.2.
  - AndyJPartridge 15y ago
    You might want to look at a project such as PhoneGap. I've been using them for a work related app on iOS, and it's incredibly useful and easy to use.
    - superted 15y ago
      Excellent suggestion, will do!
duck 15y ago
I'm not much of a game player these days, but I have to say that I played this for a while. You did a great job with everything. I would say the instructions need to be a little more clear to make it easier to start and it would be cool to see scores for everyone.
- superted 15y ago
  Many thanks! I will definitely work hard on getting the instructions on-parm as it seems to be common sentiment that the game is lacking in this regard (and I do agree...) :) Global highscores are also high up on the todo list.
biot 15y ago
Very nice... a few suggestions: - When you click a constellation and win a chance, unless you match a group of 4+ on the same move that chance is used up immediately. Perhaps it would be more intuitive to have it as a free move? - For chances remaining, when it shows 1 and you use it up it's game over. I was expecting that when you use your last one up, you have 0 chances remaining after which missing a group of 4+ is game over. - As others have mentioned, sound effects would do wonders... increasing in pitch as the chain number increases, just like Beflowered, er... Bejeweled does it. :) - Consider adding a timed mode to increase the pace and excitement. Again, great work. It looks and plays incredibly well!
- superted 15y ago
  Hey, thanks alot for your feedback and your kind words! - Did not consider that, but when you mention it, it sounds more intuitive the way you propose it. Will be a part of the next version. - You are correct, and I will add this as well. - Sound effects coming right up! - Additional game modes are high up on my todo list.
cubtastic71 15y ago
Very cool, nice to see a game that is both HTML5 and fun to play. :)
watchandwait 15y ago
More broadly, dealing with HTML5, how do you protect your source code/ intellectual property? Seems like it is all there in the javascript. I know flash can be cracked but it does seem like there is a defense layer.
- superted 15y ago
  There is not protection at all, it is all open source, literally. You can add fancy stuff on the server side, which of course will be a well kept secret, but currently it is all client side and out in the open. I am not that worried though, this game is not rocket science if you were to re-create it ...
superted 15y ago
UPDATE: Garden Madness now comes with sound! (which you of course can turn off if it gets on you nerve :) )
jason_slack 15y ago
I tried and I liked the UI and the game seems responsive... However - I am really lost as to how to play. I tried finding 4 of the same color more, I had none on the board. I clicked to re-arrange and stuff happened, but I did not follow what was doing as flowers flashed away in front of me.... Maybe a better explanation or tutorial... Or maybe I am just dense...
- superted 15y ago
  Hi, I will surely work on making the game more self-explainatory, and I will add better "in-your-face" descriptions. As it stands, I do agree that things might be confusing for first-time players. Thanks for the feedback!

53 points by superted 15y ago

Hi, I threw this game together last weekend, and have struggled with the UI for the remainer of this week (clearly not my primary competency :) ). The game is 100% HTML/JS, where the only HTML5-feature used is really the "font-face" functionality. Technically it is entirely based on jquery and some of its plug-ins. Would love all kinds of comments!

superted 15y ago
And yes, the backdrop is updated according to the time-of-day :)
joakin 15y ago
Its nice, some sounds would be really cool, for instance a background music, a click sound and a boom sound for the chain combos :) Nice work!
- superted 15y ago
  Thanks for the feedback! I will definitely add sounds in an upcoming version. You do now happen to know any good JS libraries for working with sounds?
  - joakin 15y ago
    SoundManager looks pretty good, I havent tried it yet. http://www.html5place.com/2011/01/how-to-use-audio-with-html5-games/ http://www.html5place.com/2011/01/how-to-use-audio-with-html...
    - superted 15y ago
      Thanks, will try it out in a couple of hours!
chime 15y ago
This game is awesome. I gave up on a similar HTML/JS game I was making because I could not think of the gameplay/goal/prize: https://zetabee.com/games/bee https://zetabee.com/games/bee - I love your 'find pattern' goal. I think with these kind of puzzle games, the hardest part is coming up with a good effort/reward system that makes gameplay fun instead of tedious and you did an awesome job with Garden Madness!
- superted 15y ago
  Thanks Chime! Looking at "Bee in the garden" right now thinking it looks awesome! What have you used to build it?
  - chime 15y ago
    Mostly http://raphaeljs.com/ http://raphaeljs.com/ and jQuery.

qq66 15y ago

I like it! I got the highest scoring click of "all time" :)

superted 15y ago
Good job, even though all highscores are local, not global. :) Should probably mention that somewhere. Speaking of global highscores in a JavaScript/HTML context: Anyone knows how to create a set-up that prevents cheating? The only approach I've seen that seems viable is to register all events and verify the order and validity of these server-side, which of course is a bit cumbersome.

jupiter 15y ago

Once you found your way in, it's really addictive. However, if you could make the introduction a little easier to grasp, more people would give it a try.

superted 15y ago
Absolutely, thanks for the tip! Making things dead-on easy is my top priority at the moment, so I will definitly look into this

AlexC04 15y ago

I see the brick/block popper game a lot (I have a games portal and I check out the 'new stock' pretty much every day). On thing that I notice that the better brick-block-popper games do is that they start with far fewer colors. Maybe just three or four types of flowers (you might run in to layout problems on that one). As the levels advance in difficulty, you add more flowers. That really lets players get the hang of the game mechanic. Anyways, big fan of the html5 stuff... my current project is (WARNING CPU killer http://chesser.ca/jsSprite/12-glorious.php http://chesser.ca/jsSprite/12-glorious.php) it's all up on github if anyone wants to look at the code https://github.com/AlexChesser/jsSprite https://github.com/AlexChesser/jsSprite

superted 15y ago
Excellent suggestion! I have actually struggled with finding the number of different types of unique flower that makes the game just about hard enough to play and still fun and intuitive. Adding more types of flowers as you go along is actually a great way of inducing difficulty for players that are getting the hang of it. Hehe, your project almost sent my computer into oblivion :) Looks great though.
simonsarris 15y ago
Oh hey! Glad to run into your progress. Hope the game does go well.
- AlexC04 15y ago
  Thanks Simon! (to anyone onlooking, Simon has answered every one of the questions I posted on Stack Overflow with respect to getting this rolling)
tmountain 15y ago
Just out of curiosity, what games portal are you using?
- AlexC04 15y ago
  I wrote the stuff behind http://fstr.net http://fstr.net so it's my own personal games portal. The games come in from a few different XML feeds 'mochigames' being the big one. There are some crons that run a few times a day to update the list of available games. So I hop on my portal every day and check out a few of the games on the "newest tab" anything I "vote up" (while FB logged in) also gets shown on the "featured" page. Some of the neat things I've done (IMO) include the live search, infinite scrolling and "zoom button" on the games page (which is actually slightly deprecated at the moment, but it was a great idea when used in a different layout). While I was actively promoting it, I managed to get it to somewhere within the top 300K websites worldwide, but the marketing model of 'spamming reddit' isn't really rewarding so I'm looking at trying to find a model that actually adds more value to the web-gaming experience. A forum for example - currently just one guy talking to himself. Or maybe the ability to "turn off" all adsense advertising (with facebook login). In terms of marketing, I've been testing out the impact of having a better, more keyword rich domain - copies have gone up on http://1fungame.com http://1fungame.com and http://games-to-play.co http://games-to-play.co - so far I'm finding that the users that come in to the keyword domain bounce a hell of a lot less and stay for a lot longer ... I'm still not convinced I should 301 (HTML code for moved permanently). I was really excited about it when it first launched because it made $1 in adsense within a few hours of launching ... then it got really exciting and paid for the registration fee of the domain name. Nowadays it doesn't quite cover hosting fees but if we did everything for the money we wouldn't be hackers right? :) Anyways... that's a really long answer to a very short question. My games portal is http://fstr.net http://fstr.net

youngtaff 15y ago

Really nice - wonder how it converts / runs as a phone app

superted 15y ago
Excellent question, I have not had the time to test it on my iPod Touch yet, so I am basically keeping my fingers crossed that it still runs ok. Has anyone tried loading this up on Android/IOS?
- acro 15y ago
  Seems to work quite nicely on HTC Desire with Android 2.2.
- AndyJPartridge 15y ago
  You might want to look at a project such as PhoneGap. I've been using them for a work related app on iOS, and it's incredibly useful and easy to use.
  - superted 15y ago
    Excellent suggestion, will do!

duck 15y ago

I'm not much of a game player these days, but I have to say that I played this for a while. You did a great job with everything. I would say the instructions need to be a little more clear to make it easier to start and it would be cool to see scores for everyone.

superted 15y ago
Many thanks! I will definitely work hard on getting the instructions on-parm as it seems to be common sentiment that the game is lacking in this regard (and I do agree...) :) Global highscores are also high up on the todo list.

biot 15y ago

Very nice... a few suggestions: - When you click a constellation and win a chance, unless you match a group of 4+ on the same move that chance is used up immediately. Perhaps it would be more intuitive to have it as a free move? - For chances remaining, when it shows 1 and you use it up it's game over. I was expecting that when you use your last one up, you have 0 chances remaining after which missing a group of 4+ is game over. - As others have mentioned, sound effects would do wonders... increasing in pitch as the chain number increases, just like Beflowered, er... Bejeweled does it. :) - Consider adding a timed mode to increase the pace and excitement. Again, great work. It looks and plays incredibly well!

superted 15y ago
Hey, thanks alot for your feedback and your kind words! - Did not consider that, but when you mention it, it sounds more intuitive the way you propose it. Will be a part of the next version. - You are correct, and I will add this as well. - Sound effects coming right up! - Additional game modes are high up on my todo list.

cubtastic71 15y ago

Very cool, nice to see a game that is both HTML5 and fun to play. :)

watchandwait 15y ago

More broadly, dealing with HTML5, how do you protect your source code/ intellectual property? Seems like it is all there in the javascript. I know flash can be cracked but it does seem like there is a defense layer.

superted 15y ago
There is not protection at all, it is all open source, literally. You can add fancy stuff on the server side, which of course will be a well kept secret, but currently it is all client side and out in the open. I am not that worried though, this game is not rocket science if you were to re-create it ...

superted 15y ago

UPDATE: Garden Madness now comes with sound! (which you of course can turn off if it gets on you nerve :) )

jason_slack 15y ago

I tried and I liked the UI and the game seems responsive... However - I am really lost as to how to play. I tried finding 4 of the same color more, I had none on the board. I clicked to re-arrange and stuff happened, but I did not follow what was doing as flowers flashed away in front of me.... Maybe a better explanation or tutorial... Or maybe I am just dense...

superted 15y ago
Hi, I will surely work on making the game more self-explainatory, and I will add better "in-your-face" descriptions. As it stands, I do agree that things might be confusing for first-time players. Thanks for the feedback!