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 &#106avascript 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]

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 &#106avascript 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 &#106avascript, but I usually always add it to be clear).<br><br>It's also not HTML5 unless you have a <pre>&lt;!doctype html&gt;</pre> 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).<br><br>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.<br><br><!--EDIT--><span class=editedby><!--/EDIT-->[Edited by - yadango on September 2, 2010 6:03:40 AM]<!--EDIT--></span><!--/EDIT-->

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.

Nice game friend! Good work...
I do not know much about &#106avascript but I liked the game...<br><br>I'm also creating a game.<br>Will upload it.

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 &#106avascript 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 &#106avascript, but I usually always add it to be clear).<br>...<br><br>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.<!--QUOTE--></td></tr></table></BLOCKQUOTE><!--/QUOTE--><!--ENDQUOTE--><br><br><br>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 &#111;n. 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.<br><br>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.

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.

Quote:Original post by Shashwat
Nice game friend! Good work...
I do not know much about &#106avascript but I liked the game...<br><br>I'm also creating a game.<br>Will upload it.<!--QUOTE--></td></tr></table></BLOCKQUOTE><!--/QUOTE--><!--ENDQUOTE--><br><br>Thanks for the props I appreciate it a lot. &#106avascript 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.<br>

There's a lot of good libraries to make it easier. Some good inheritance plugins and such out there, and other OO stuff.

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 &#106avascript 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 &#106avascript validation, my students die with it since if even &#111;ne thing is wrong with your code, it pretty much all breaks down and everything stops working ha ha ha. &#106avascript (err... rather ECMAScript) is often considered &#111;ne of the worst languages ever invented you know ha ha ha ha ha :-D.<br><br>Now ditch tetris and make a mario clone! I was planning &#111;n porting my shitty little OpenGL <a href="http://www.calstatela.edu/faculty/semory/pikamario.zip">pikamaro</a> 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 &#111;ne). BTW, you should post a screenshot of your game :-).<br><br><img src="http://www.calstatela.edu/faculty/semory/pikamario.jpg"><br><br><!--EDIT--><span class=editedby><!--/EDIT-->[Edited by - yadango on September 3, 2010 9:49:13 AM]<!--EDIT--></span><!--/EDIT-->

Dont wanna take this thread too far in the direction, but &#106avascript 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).