Hello. Below you will find the completed game challenge. CLICK ON IT TO START THE GAME. Use left and right to move, and up to shoot. Press "Esc" or click anywhere outside the game to pause. Click the "RESTART" button to reset the game.
EDIT(2013/05/13):The Audio has been fixed. Code moved to my github account. Fire-Fox doesn't appear to automatically cache the tentacle drawing so I will still need to optimise that to increase frame-rate in Firefox. Chrome frame-rate is good.
So, I managed to achieve my goals in the allotted time, and I even managed to get it to run in a blogger page.
You might notice that the prototype post is gone. This is because I had to remove it. It wasn't written to play well with other game scripts on the same browser page (i.e. the default blog view when people visit.). It hijacked your arrow keys for the whole page, which is not acceptable web-app behaviour. This version behaves better, and pauses/mutes when you go away from it and only captures your keys after you click on it. It would be a good template for me to use to build future browser based games.*
Many features one might expect from a proper game are clearly lacking in this game. This mini-game does not provide a full-game experience, but rather is aimed as an interactive replacement for a web picture, since the whole game-code is just under 50kb non-obfuscated (not counting the libraries, of which jquery will be cached on most people's browsers, and kinetic.js which is about 40kb). All geometry and audio resources are created on-the-fly, i.e. no pictures or audio get loaded, they get temporarily generated on the client machine. It represents an experiment used to learn some new technologies, and is only the first in many (hopefully).
If you care to know some technical details and credits:I used kinetic.js library for canvas management and jquery.js library for event stuff. I ended up just using the vanilla Web Audio API implementation for Chrome build 10.0.912.77 and it gave me no hassles. In fact, I had such a blast with it I hope all browsers will have native implementations of the Web Audio API soon! If you don't have Chrome, you should just not hear any audio (sorry).
Thanks to html5canvastutorials.com.
Thanks for your interest, and please leave comments if you have questions or suggestions.
Thank you for uploading. This is a great demo! However, I'd like to see how it works and view source is very nasty on the page with all of this other stuff here. Could you upload another version which is just the raw game for all of us KineticJS-ers to peek at how you did things?
ReplyDeleteHi there... Thanks!
ReplyDeleteThe initial demo script was cut&pasted into the HTML view but now it relies on minimal initial HTML and a script tag referencing my script hosted at a shared-hosting-server. You could use a service like gitHub in a similar fashion.
You can go view the demo here :
http://zskilz.webfactional.com/demo/1
If you view the source there things should be simpler... you'll see the jQuery and KineticJS dependencies, all the "game code" in spaceThreat.js and the minimal HTML required for the script to work in the body. That script link is likely to change in future since my site is new and will change quite a bit over the next couple of months.
Just a warning... I used KineticJS version 3.4.6, and some of the script might be obsolete... Also, the code isn't well commented, sorry. Also note: The DrawShapes object is used as a collection of Shape callbacks, and the "this" keyword in its functions refers to the kineticJS Shape created with the function and not the DrawShapes object (This will be more clear once you see the script).
Also, this was my first project using/learning kineticJS, so I'm probably not a good source to learn from... I don't always follow good convention and I expect I made some fundamental mistakes, but since I'm still learning myself, I would not fully know ;)
Hey,
DeleteYour post inspired me to make my Squiggle demo into a plugin! (It was relatively easy to do) Also it encouraged me to post about it on Blogger which I've never done before.
Thanks for the direct link (and the warning)! That clarifies the example quite a lot. Ooh, 3.4.6 was so last week, get with the program! LOL, yeah, I updated my squiggle demo to v 3.8.1 and it wasn't complicated. It just involved putting this line in
drawFunc: function() {
and of course the closing bracket into http://quantumfractal.info/kineticjs/Squiggle-Demo.php
I'll dig deeper into your code later. Any interest in turning it into a plugin? What's your policy on reuse? I'd like to create my own little game. The collisions were really killer!
Here's a link to mine:
http://quantumfractal.blogspot.com/2012/02/quantum-squiggle-2-constructor.html
Keep it up. The script you can access as plain text is public domain, provided "as-is" with no guarantees (so, MIT-style) unless otherwise stated in the script. If you could reference me where you use script I haven't referenced already in my script, that would be nice, but not required.
DeleteFocusing on other projects right now so might not come back to this one for a while...
Cheers.
Alright, sounds good. I'll put your name in the script and reference this page. Once I get something worth showing I'll send a link your way.
DeleteIs this good?
2012 Jaco Pretorius
http://zskilz.blogspot.com/2012/02/game-challenge-complete.html
Just a link where you use my code is enough.
DeleteCheers.
great, found this from the kineticjs page. I've never heard of th Web Audio API until now. Very intriguing!! Thanks for making stuff
ReplyDeleteThis is so cute :) I love the play on the genre.
ReplyDeleteHaha, good to see some Alien Love, instead of Alien Violence.
ReplyDelete