ClanKiller.com
https://forums.plasmasky.com/

javascript game
https://forums.plasmasky.com/viewtopic.php?f=1&t=3198		 Page 1 of 2
Author:  Satis [ Thu Jul 09, 2009 4:43 pm ]
Post subject:  javascript game
so, I wrote my first game in like forever... it's a breakout clone built entirely in javascript. It's not done (by far), but it works. It's only functional in FF3.5 that I know of... IE7 and IE8 don't work for sure. Not sure about other browsers.

Currently only stage 1 and stage 2 exist. If you try to continue to stage 3 the game just breaks. :D I'll post here as I update it.

There's still some debugging stuff hanging around, so don't be alarmed.

http://clankiller.com/stuff/jsBreakout/
Author:  pevil [ Fri Jul 10, 2009 12:56 am ]
Post subject: 
Works very nicely, the backgrounds are offputting though!
Author:  Rinox [ Fri Jul 10, 2009 3:23 am ]
Post subject: 
Yeah, works well, though it seems a little heavy for a browser-based game. And to echo Pev, the images in the back fucked me up. :P
Author:  derf [ Fri Jul 10, 2009 5:28 am ]
Post subject: 
hehe very neat. i got to the 3rd stage in the end! yipeeeeee!

the backgrounds mess with my mind :lol:

was it for school work?
Author:  Satis [ Fri Jul 10, 2009 2:38 pm ]
Post subject: 
no, I just did it for fun. Partially to learn object oriented programming in javascript, partially because I wanted to see if I could do it. :P I'm thinking I'll change the background to something static so it doesn't screw with people so bad. I may set up a second timer loop and just use a large image and move it around some so it's not quite so jarring, but not entirely static. I dunno yet.
Author:  derf [ Fri Jul 10, 2009 6:27 pm ]
Post subject: 
I would replace the background with a transition of red, green and blue as quickly as possible. I would also increase the ball speed by about 3 times. Then you can rename the game to "Free Brain Damage" :D
Author:  Rinox [ Sun Jul 12, 2009 4:14 am ]
Post subject: 
I can not do anything but second Derf's remarks. :)

At one point I was getting convinced that you'd implemented some subliminal messages in that freaky stuff. So I kept looking away while playing. :P
Author:  Satis [ Tue Jul 14, 2009 1:45 pm ]
Post subject: 
There's a newer version out there, same link.

http://clankiller.com/stuff/jsBreakout

It goes through level 7 and isn't quite so crazy on the eyes. The only problem I'm having is with hit detection, as you may notice if you play it. I dunno, I may have an epiphany and figure out how to do it better.
Author:  derf [ Tue Jul 14, 2009 1:58 pm ]
Post subject: 
haha even better! I got to about level 5, but the skyblue background threw me completely. fun fun fun
Author:  pevil [ Tue Jul 14, 2009 2:12 pm ]
Post subject: 
Love it, also got to lvl 5 then lost (but I messed up twice before that). Definatley noticed the hit detection; most of the time it's fine though level 4 I noticed one of the orange ones that turned yellow, at one point the ball went straight through the middle. And on some of the earlier levels the blocks seemed to have borders around them that counted as hits but other than these minor issues it's coming along very nicely (I'm a huge breakout fan ;))
Author:  Satis [ Tue Jul 14, 2009 5:35 pm ]
Post subject: 
hehe...thanks. I'll post when I get more. If you guys are interested, you can create levels too... it's fairly easy (just a matrix of values). I'll post a quick example in case anyone interested

Code:
         [0,    0,    50,    10,    brick.yellow],
         [2,    0,    50,    10,    brick.yellow],
         [-2,    0,    50,    10,    brick.yellow],
         [4,    0,    25,    10,    brick.blue],
         [-4,    0,    25,    10,    brick.blue],
         [-1,   2,   50,      10,      brick.yellow],
         [1,      2,   50,      10,      brick.yellow],
         [-3,   2,   25,      10,      brick.blue],
         [3,      2,   25,      10,      brick.blue],
         [-5,   2,   50,      10,      brick.yellow],
         [5,      2,   50,      10,      brick.yellow]

this is level 1. sorry if the alignment is off. Basically every line is a brick.

The first number is the horizontal offset. This is in 'positions'. A position is somewhere around 30 pixels or so.
The second number is the row. The top row is row 0. Row 1 is like 8 pixels down or so. Row 2 is the next row down, etc.
The next is the width of the brick in pixels.
Next is the height in pixels.
last is the type of brick... so far there're brick.yellow, brick.blue, brick.orange and brick.black. Black is unbreakable and doesn't count toward number of bricks left to break.

So anyway, if anyone wants to build a level, I'll gladly add it. :)

Also, if anyone wants to see if they can come up with better hit detection routines I'd love to hear it. If there's seriously someone interested, I'll post my hit detection code.
Author:  derf [ Tue Jul 14, 2009 7:27 pm ]
Post subject: 
Code:
[0,    0,    20,    10,    brick.blue],
[0,    2,    20,    20,    brick.orange],
[1,    2,    20,    20,    brick.orange],
[-1,    2,    20,    20,    brick.orange],
[-5,    2,    20,    20,    brick.orange],
[-4,    2,    20,    20,    brick.orange],
[-3    2,    20,    20,    brick.orange],
[3,    2,    20,    20,    brick.orange],
[4,    2,    20,    20,    brick.orange],
[5,    2,    20,    20,    brick.orange],
[0,    3,    20,    20,    brick.orange],
[1,    3,    20,    20,    brick.orange],
[-1,    3,    20,    20,    brick.orange],
[-5,    3,    20,    20,    brick.orange],
[-4,    3,    20,    20,    brick.orange],
[-3    3,    20,    20,    brick.orange],
[3,    3,    20,    20,    brick.orange],
[4,    3,    20,    20,    brick.orange],
[5,    3,    20,    20,    brick.orange],
[0,    4,    20,    20,    brick.orange],
[1,    4,    20,    20,    brick.orange],
[-1,    4,    20,    20,    brick.orange],
[-5,    4,    20,    20,    brick.orange],
[-4,    4,    20,    20,    brick.orange],
[-3    4,    20,    20,    brick.orange],
[3,    4,    20,    20,    brick.orange],
[4,    4,    20,    20,    brick.orange],
[5,    4,    20,    20,    brick.orange],
[7,    0,    10,    20,    brick.blue],
[8,    0,    10,    20,    brick.blue],
[7,    3,    10,    20,    brick.blue],
[8,    3,    10,    20,    brick.blue],
[0,    5,    50,    10,    brick.yellow],
[2,    5,    50,    10,    brick.yellow],
[-2,    5,    50,    10,    brick.yellow],
[-4,    5,    50,    10,    brick.yellow],
[4,    5,    50,    10,    brick.yellow],


what does that look like? Muaha, i hope it comes out right. But I bet it's going to be completely off. :D
Author:  Satis [ Wed Jul 15, 2009 6:20 am ]
Post subject: 
you've got some overlapping of your bricks. I have a funny feeling I know what you're trying to build. :roll:

Feel free to adjust it if you'd like. I'm afraid I lack the motivation to build what you want there. :roll:
Author:  derf [ Wed Jul 15, 2009 6:30 am ]
Post subject: 
haha, dont worry, i have time to tinker.

Right, i changed it. How about this?

Code:
[0,    0,    20,    10,    brick.blue], // general
[0,    2,    20,    20,    brick.orange], // legio rear
[1,    2,    20,    20,    brick.orange],
[-1,    2,    20,    20,    brick.orange],
[-5,    2,    20,    20,    brick.orange],
[-4,    2,    20,    20,    brick.orange],
[-3    2,    20,    20,    brick.orange],
[3,    2,    20,    20,    brick.orange],
[4,    2,    20,    20,    brick.orange],
[5,    2,    20,    20,    brick.orange],
[0,    4,    20,    20,    brick.orange], // legio middle
[1,    4,    20,    20,    brick.orange],
[-1,    4,    20,    20,    brick.orange],
[-5,    4,    20,    20,    brick.orange],
[-4,    4,    20,    20,    brick.orange],
[-3    4,    20,    20,    brick.orange],
[3,    4,    20,    20,    brick.orange],
[4,    4,    20,    20,    brick.orange],
[5,    4,    20,    20,    brick.orange],
[0,    6,    20,    20,    brick.orange], // legio front
[1,    6,    20,    20,    brick.orange],
[-1,    6,    20,    20,    brick.orange],
[-5,    6,    20,    20,    brick.orange],
[-4,    6,    20,    20,    brick.orange],
[-3    6,    20,    20,    brick.orange],
[3,    6,    20,    20,    brick.orange],
[4,    6,    20,    20,    brick.orange],
[5,    6,    20,    20,    brick.orange],
[7,    0,    10,    20,    brick.blue], // cav auxilia rear
[8,    0,    10,    20,    brick.blue],
[7,    3,    10,    20,    brick.blue], // cav auxilia front
[8,    3,    10,    20,    brick.blue],
[0,    8,    50,    10,    brick.yellow], // peltast
[2,    8,    50,    10,    brick.yellow],
[-2,    8,    50,    10,    brick.yellow],
[-4,    8,    50,    10,    brick.yellow],
[4,    8,    50,    10,    brick.yellow],
[7,    0,    40,    10,    brick.yellow], // mercs front
[7,    2,    40,    10,    brick.yellow], // mercs rear
Author:  Satis [ Wed Jul 15, 2009 12:15 pm ]
Post subject: 
this is what that ended up as. BTW, I admire your ability to miss the occasional comma, causing code compile errors. :roll:
Page 1 of 2 All times are UTC - 6 hours
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/