Forums » Games » My First Game: Rebound

Hey, so finally my first game is live. Using Impact it was super easy to build. It's called Rebound. It's a simple point and click puzzle game. The object is to gather as many points as possible by rebounding the ball off walls. I like to play "chill out" games and this is sort of an attempt at one. I would love to create an html5 version of Osmos.

But for Rebound, just point and click in the direction you want the ball to go.
The further away from the ball you click, the faster it will travel.

Check it out at http://rebound.tapjs.com

Please let me know your feedback. Are the boards too easy? Too hard? What would make it more fun? Let me know.

awesome interface Ken! Love it

i think the balls should be allowed to bounce more (instead of using friction). So, if you set it as a rule:

Ball can only bounce max X times ( depends on the level )

the player will be forced to think, and visually picture the balls bouncing and hitting the points.

you can make tons of levels based on this rule alone. this can even go viral! I see an iphone app coming

awesome work Ken, you're the man

also, you got to allow the player to advance the level even if he/she does not get all the points.

try awarding stars instead:

100 pts: 1 star
300 pts: 2 star
all points: 3 stars

and not to forget, the sound of the ball bouncing , and hitting the points.

i'm so worked up by the game, love it!

@fugufish Awesome ideas. I like the idea about limiting the number of bounces. I'll build that as a mode of play where you as the player can choose if you want to do the turn based or bounce based play.

As for not getting all the points, I don't know how far you played, but only the first couple of boards where there is a fairly simple path to collect all the points are they required to collect them all. After board 5, you get two shots to collect a portion of the total. I think it might be a design flaw that made sense in my head, my wife also did not like how the first couple of boards you only get one shot but later on you get 2. I'll have to address that.

For the sound. I did try putting sound on bouncing off walls and collecting points, but no matter what I did, it could not keep up, the sound would sometimes be delayed or missed all together. I tried both the built in Impact sound api and also tried SoundManager2 http://www.schillmania.com/projects/soundmanager2/ but nothing seemed to work. I also looked at other impact games and html5 games in general and if you really push the sound it can't keep up. This does not seem to matter in things like Biolab where you have a ton of action all around, you don't seem to notice unless you look closely, but with Rebound because that is the only action, it seems to take away from the game. I'm going to keep trying diff ways. For the mobile version, I'm just going to tie into Appmobi's sound api.

Thanks for all the feedback! That is so awesome that you are getting "worked up" by it. Made my day. :)

Very nice game. I love the idea! I don't think I've seen this anywhere before, even though it's so "simple". Great music too!

But you have a problem in Firefox 4: after the pre-loader it just goes to a blank screen and there's an error in ig.Font - I think you're trying to draw a character that isn't present in the font bitmap!? I will add a check to ig.Font in the next version to prevent this error for invalid chars.

Thanks Dominic! I'm glad to hear you have not seen it anywhere. Well you've seen it here first, built using ImpactJS! :) Thanks for the bug report too. I will get that fixed.

Hmm ... I downloaded and installed Firefox 4 on Windows and it works fine I don't receive any errors. I also checked and the font bitmap has all the characters I am using. I built it using the creator posted in the Font Docs. Are you running FF on a Mac? If anyone with a Mac and FF4 would be so kind as to copy and paste the error I would really appreciate it.

Mh, that's strange that it doesn't work for me. I'm on Windows 7

An invalid or illegal string was specified" code: "12
var scale=ig.system.scale;var charX=th...f(px.data[index]!=0){currentWidth++;}
game.min.js (Line 55)

I think the An invalid or illegal string was specified error is produced when you try to pass something other than a number to canvas' ctx.drawImage(). Hold on, I'll look into it.

This strikes me as the kind of game you could play for hours on a plane across the US for example. I've done that with paper based sudoku. Of course you would need a lot more levels.

Here's an idea (though not sure how time consuming it would be?). Create a level generating algorithm that follows some basic rules to ensure that the ball would be able to bounce around effectively. Then you could make sure it works and place the score numbers in the right places. Maybe you could generate a few hundred levels that way so that you don't have to "hand construct" them.

Or how about this (again more work in the short term) a way for fans to generate their own maps and try them out or send them to friends, etc.

Ok... I looked into the font problem and it's quite esoteric to say the least. I just filed a bug report for Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=652222

In short: when drawing the last row of pixels of a large font image onto a canvas to analyze them, the line get's slightly interpolated. Transparent pixels aren't fully transparent anymore and font characters are analyzed wider as they actually are. This only happens for large font images (>2048px). Testcase, screenshot - some pink lines for the second yellow row are missing.

This may very well be a problem with hardware acceleration, because it only fails in Firefox 4 and IE9 - the only two browsers that currently have full hw accel for the 2d canvas.


Here's a workaround: instead of drawing just the last row of pixels of the font image to a canvas to analyze it, draw the whole font image. In lib/impact/font.js, _loadMetrics line 86 replace this:

var canvas = ig.$new('canvas');
canvas.width = image.width;
canvas.height = 1;
var ctx = canvas.getContext('2d');
ctx.drawImage( image, 0, image.height-1, image.width, 1, 0, 0, image.width, 1 );
var px = ctx.getImageData(0, 0,image.width, 1);

with this:

var canvas = ig.$new('canvas');
canvas.width = image.width;
canvas.height = image.height;
var ctx = canvas.getContext('2d');
ctx.drawImage( image, 0, 0 );
var px = ctx.getImageData(0, image.height-1, image.width, 1);

I also pushed this fix into the git repo. I can't be the only one who's having this problem with his graphics card :)

@Dominic - Wow, thanks for looking into that and coming up with a fix so quickly. Fringe case indeed. Amazing.

@MikeL - Interesting idea on the auto generated levels. Now to figure out the code that could make that happen. Interesting problem to solve. Probably will be the next thing after Rebound XT (version 2, extended game play) is complete. Although the community create levels does sound a lot easier, so maybe that will be first :)