It is currently Tue Jul 22, 2025 12:29 pm



Reply to topic  [ 19 posts ]  Go to page 1, 2  Next
javascript game 
Author Message
Felix Rex
User avatar

Joined: Fri Mar 28, 2003 6:01 pm
Posts: 16701
Location: On a slope
Reply with quote
Post 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/


Thu Jul 09, 2009 4:43 pm
Profile WWW
Minor Diety
User avatar

Joined: Mon Mar 31, 2003 1:43 am
Posts: 4332
Reply with quote
Post 
Works very nicely, the backgrounds are offputting though!

_________________
Image


Fri Jul 10, 2009 12:56 am
Profile WWW
Minor Diety
User avatar

Joined: Mon Mar 31, 2003 7:23 am
Posts: 14892
Location: behind a good glass of Duvel
Reply with quote
Post 
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

_________________
"I find a Burger Tank in this place? I'm-a be a one-man cheeseburger apocalypse."

- Coach


Fri Jul 10, 2009 3:23 am
Profile
Minor Diety
User avatar

Joined: Fri Apr 11, 2003 2:17 pm
Posts: 7737
Location: Centre of the sun
Reply with quote
Post 
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?

_________________
"Well a very, very hevate, ah, heavy duh burtation tonight. We had a very derrist derrison, bite, let's go ahead and terrist teysond those fullabit who have the pit." - Serene Branson


Fri Jul 10, 2009 5:28 am
Profile
Felix Rex
User avatar

Joined: Fri Mar 28, 2003 6:01 pm
Posts: 16701
Location: On a slope
Reply with quote
Post 
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.


Fri Jul 10, 2009 2:38 pm
Profile WWW
Minor Diety
User avatar

Joined: Fri Apr 11, 2003 2:17 pm
Posts: 7737
Location: Centre of the sun
Reply with quote
Post 
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

_________________
"Well a very, very hevate, ah, heavy duh burtation tonight. We had a very derrist derrison, bite, let's go ahead and terrist teysond those fullabit who have the pit." - Serene Branson


Fri Jul 10, 2009 6:27 pm
Profile
Minor Diety
User avatar

Joined: Mon Mar 31, 2003 7:23 am
Posts: 14892
Location: behind a good glass of Duvel
Reply with quote
Post 
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

_________________
"I find a Burger Tank in this place? I'm-a be a one-man cheeseburger apocalypse."

- Coach


Sun Jul 12, 2009 4:14 am
Profile
Felix Rex
User avatar

Joined: Fri Mar 28, 2003 6:01 pm
Posts: 16701
Location: On a slope
Reply with quote
Post 
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.


Tue Jul 14, 2009 1:45 pm
Profile WWW
Minor Diety
User avatar

Joined: Fri Apr 11, 2003 2:17 pm
Posts: 7737
Location: Centre of the sun
Reply with quote
Post 
haha even better! I got to about level 5, but the skyblue background threw me completely. fun fun fun

_________________
"Well a very, very hevate, ah, heavy duh burtation tonight. We had a very derrist derrison, bite, let's go ahead and terrist teysond those fullabit who have the pit." - Serene Branson


Tue Jul 14, 2009 1:58 pm
Profile
Minor Diety
User avatar

Joined: Mon Mar 31, 2003 1:43 am
Posts: 4332
Reply with quote
Post 
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 ;))

_________________
Image


Tue Jul 14, 2009 2:12 pm
Profile WWW
Felix Rex
User avatar

Joined: Fri Mar 28, 2003 6:01 pm
Posts: 16701
Location: On a slope
Reply with quote
Post 
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.


Tue Jul 14, 2009 5:35 pm
Profile WWW
Minor Diety
User avatar

Joined: Fri Apr 11, 2003 2:17 pm
Posts: 7737
Location: Centre of the sun
Reply with quote
Post 
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

_________________
"Well a very, very hevate, ah, heavy duh burtation tonight. We had a very derrist derrison, bite, let's go ahead and terrist teysond those fullabit who have the pit." - Serene Branson


Tue Jul 14, 2009 7:27 pm
Profile
Felix Rex
User avatar

Joined: Fri Mar 28, 2003 6:01 pm
Posts: 16701
Location: On a slope
Reply with quote
Post 
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:


You do not have the required permissions to view the files attached to this post.


Wed Jul 15, 2009 6:20 am
Profile WWW
Minor Diety
User avatar

Joined: Fri Apr 11, 2003 2:17 pm
Posts: 7737
Location: Centre of the sun
Reply with quote
Post 
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

_________________
"Well a very, very hevate, ah, heavy duh burtation tonight. We had a very derrist derrison, bite, let's go ahead and terrist teysond those fullabit who have the pit." - Serene Branson


Wed Jul 15, 2009 6:30 am
Profile
Felix Rex
User avatar

Joined: Fri Mar 28, 2003 6:01 pm
Posts: 16701
Location: On a slope
Reply with quote
Post 
this is what that ended up as. BTW, I admire your ability to miss the occasional comma, causing code compile errors. :roll:


You do not have the required permissions to view the files attached to this post.


Wed Jul 15, 2009 12:15 pm
Profile WWW
Display posts from previous:  Sort by  
Reply to topic   [ 19 posts ]  Go to page 1, 2  Next

Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware.