Sign in to follow this  

Try my 1st game!

This topic is 2656 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

I have finished the 1st version of my 1st game and would love feedback. I haven't managed to get to the last level, who will be first?



Get the open source HTML5 game here (click Download Source, choose zip or tar, unpack, open the html file in Chrome, or Safari):
http://github.com/johnnyscott/Johnny-Scott-s-HTML5-Tetrominoes

The game is a Tetris clone modeled after the classic Gameboy version.

What I would really like feedback on is the code itself. As far as the game play and graphics - they are simple and limited by design. The awesome video game remix artist/musician Chthonic from ocremix.org was kind enough to let me use one of his Tetris remixes for music.

What I would LOVE to see is somebody modify the code and expand on it. It's straight up javascript with no fancy game api's other than good old html5 canvas and audio.

I am so excited to get feedback so THANKS IN ADVANCE!

NOTES
* I realize that making everything timed by keyframes with the framerate locked at 30 fps is not the right approach (I should use timers instead of setInterval)
* I realize that redrawing the playing field on every frame is unnecessary and the game could be sped up significantly with just a few lines of code to only redraw when needed.

[Edited by - johnnyscott on September 3, 2010 9:33:33 PM]

Share this post


Link to post
Share on other sites
Nice. Cool stuff. I would love to cover canvas with my web students but I tried it once and they just died ha ha ha. I really do think HTML5 + canvas for 2D and 3D is the future and it's good to see other people messing with it too.

Your javascript coding is a little sloppy. Lots of unused variables, duplicate variables, etc. SCRIPT and style don't specify the TYPE attribute, which I normally do (I know, it defaults to CSS and javascript, but I usually always add it to be clear).

It's also not HTML5 unless you have a
<!doctype html>
at the top of the document he he he. Also, the HEAD of an HTML5 document must contain a TITLE element unless it's an IFRAME. I also wouldn't mix XHTML syntax and HTML5 syntax either (I've stopped doing the self-closing tag thing long ago).

Other than that, way to go muchacho. Also, worked just fine in Firefox for me. You have to toggle a config switch to get it to use its HTML5 parser.

[Edited by - yadango on September 2, 2010 6:03:40 AM]

Share this post


Link to post
Share on other sites
Actually, so long as you pretty much have a dtd, you can use HTML5. That said, it technically wouldn't be a valid document. You can still use self closing tags, or not. It's pretty open to the developer, much like HTML4 was, either will work in the browser. Single quotes, no quotes for attributes, all your choice. I'm generally sticking to xhtml conventions, just to keep the code clean.


Fun game there johnny scott. I haven't looked at your code in depth, but do be sure to clean up unused variables and such, just to make it as light as possible. Also, I haven't done this much with images, but is it possible to only show part of an image? I wonder if one could create a sprite sheet, and have an image map.

Share this post


Link to post
Share on other sites
Quote:
Original post by yadango
Nice. Cool stuff. I would love to cover canvas with my web students but I tried it once and they just died ha ha ha. I really do think HTML5 + canvas for 2D and 3D is the future and it's good to see other people messing with it too.


I definitely agree it's the future - probably even the future of pc gaming in general if directx/opengl hardware accelerated canvas becomes ubiquitous. Why did they just die? Was it too much?

Quote:
Original post by yadango
Your javascript coding is a little sloppy. Lots of unused variables, duplicate variables, etc. SCRIPT and style don't specify the TYPE attribute, which I normally do (I know, it defaults to CSS and javascript, but I usually always add it to be clear).
...

Other than that, way to go muchacho. Also, worked just fine in Firefox for me. You have to toggle a config switch to get it to use its HTML5 parser.



Yeah I'm generally pretty sloppy about cleaning stuff up when I'm done - I usually figure, "If it works I don't care?" The game logic and drawing logic is what I would really appreciate feedback on. Regarding it not being HTML5, the document may not be HTML5 due to syntax and wrong doctype etc however canvas and audio are most definitely HTML5.

Thanks for the encouragement man. Did the music play for you in firefox? I couldn't get it to even though I went to all the trouble of having an ogg format soundtrack just for firefox. I figure it's got to be a bug inside firefox regarding local files as the same file plays fine in firefox when served over the web.

Share this post


Link to post
Share on other sites
Quote:
Original post by agm_ultimatex
Actually, so long as you pretty much have a dtd, you can use HTML5. That said, it technically wouldn't be a valid document. You can still use self closing tags, or not. It's pretty open to the developer, much like HTML4 was, either will work in the browser. Single quotes, no quotes for attributes, all your choice. I'm generally sticking to xhtml conventions, just to keep the code clean.


Fun game there johnny scott. I haven't looked at your code in depth, but do be sure to clean up unused variables and such, just to make it as light as possible. Also, I haven't done this much with images, but is it possible to only show part of an image? I wonder if one could create a sprite sheet, and have an image map.



It's totally possible to have a single image and use masking with canvas to use different portions of the image for different sprites. I would like to build a light weight game engine to manage a lot of the craziness I needed in my code and especially to automate generic sprite stuff like keyframed animations and timing.

Share this post


Link to post
Share on other sites
Quote:
Original post by Shashwat
Nice game friend! Good work...
I do not know much about javascript but I liked the game...

I'm also creating a game.
Will upload it.


Thanks for the props I appreciate it a lot. javascript is so easy to code in and you don't need a fancy ide or deep api to get started. I'd love to see your game.

Share this post


Link to post
Share on other sites
Yes, it worked great for me. Did you make sure to go into about.config and toggle the HTML5 parser in Firefox? I believe canvas was there in Firefox even before HTML5 came along in like Firefox 2.0 since canvas has had a long history with Apple. So even if you don't have a HTML5 parser your code should still work, albeit the audio won't. Also remember the W3C has an HTML5 validator :-).

And if you think javascript is easy to code you should tell my students that they will kill you ha ha ha. Even with a free editor like Eclipse, that has HTML, HTML DOM, and javascript validation, my students die with it since if even one thing is wrong with your code, it pretty much all breaks down and everything stops working ha ha ha. javascript (err... rather ECMAScript) is often considered one of the worst languages ever invented you know ha ha ha ha ha :-D.

Now ditch tetris and make a mario clone! I was planning on porting my shitty little OpenGL pikamaro game (that I use with my database students) to HTML5 canvas, but I'm lazy ha ha ha. Game is in the bin/ directory (run the no database one). BTW, you should post a screenshot of your game :-).



[Edited by - yadango on September 3, 2010 9:49:13 AM]

Share this post


Link to post
Share on other sites
Dont wanna take this thread too far in the direction, but javascript definitely has a different way of doing things then languages such as java, c#, c++, etc. How you can wrap certain scopes, how namespaces are done, how classes are declared, etc. It's also very easy to write bad code that has memory leaks (think of when firefox gets heavy).

Share this post


Link to post
Share on other sites

Very cool work dude! Got me really excited about web development all over again. Was kind of getting bored with writing so many business oriented web apps that I forgot what got me into programming to begin with :P

It has a very old school "demo" feel to it (maybe its the music) which I like! The WSAD controls was a bit of a surprise but I welcome it.

Share this post


Link to post
Share on other sites
Quote:
Original post by agm_ultimatex
Dont wanna take this thread too far in the direction, but javascript definitely has a different way of doing things then languages such as java, c#, c++, etc. How you can wrap certain scopes, how namespaces are done, how classes are declared, etc. It's also very easy to write bad code that has memory leaks (think of when firefox gets heavy).


I'd love to learn how to fake some of that stuff (classes and namespaces) since AFAIK javascript doesn't support those features explicitly.

On memory leaks, I've let this bugger run for over an hour and the memory dips up and down by a delta of about 5 MB which indicates to me it is free of leaks. I assume there is some sort of garbage collection going on in the interpreter thus the dip back down.

Share this post


Link to post
Share on other sites
Quote:
Original post by tariqwalji

Very cool work dude! Got me really excited about web development all over again. Was kind of getting bored with writing so many business oriented web apps that I forgot what got me into programming to begin with :P

It has a very old school "demo" feel to it (maybe its the music) which I like! The WSAD controls was a bit of a surprise but I welcome it.


It makes me happy to read your post. I hear you about getting bored with business web apps, you've got to decide to do something in your free time to have fun with that is your own. I just decided enough was enough and I was going to learn game programming and picked an easy project to emulate.

I'm glad you like the music Chthonic does amazing work. Cool that it seems to have an old school "demo" feel to you (I don't really get exactly how but neat) also the WASD controls are so common and it feels awkward to me use the arrows so I went with WASD which is much more comfortable on my hand.

Share this post


Link to post
Share on other sites
Sign in to follow this