Blog
I wish I could say I worked on this, but I just wanted to comment on how amazing it looks - I hope there's a lot of motion capture, otherwise my head may explode from the amount of awesomeness if I discover it's all key framed. Make sure you watch the 720p version and in full screen. ;)
The trailers for the previous games are also equally impressive, getting better with each year - here's the one for Brotherhood:
Assassin's Creed 2, and the original Assassin's Creed trailers. All brilliant! So easy to forget they're CG at times.
The idea is that you move the ball through the gates before the screen closes in on you. Been done many times before, but I wanted to see if I could do it using JavaScript rather than the usual way of creating web browser based games - by using Flash.
Because there's no 'on collision' event that I'm aware of (although I have just discovered gameQuery, which may have helped me, but I haven't looked into it yet), I had to simulate collisions. Each row is the same height and the random row lengths pre-processed by the server and therefore accessible by the JavaScript. This meant that I could calculate an x and a y coordinate of the holes - and so if the ball's current position matches a hole, it starts the drop animation to the next level, and moves on to the next hole.
For motion, it's mostly performed using the animate() jQuery command. To be able to apply separate vertical and horizontal motion to the ball, the image for the ball was placed inside a 'playerX' div, which in turn was placed inside a 'playerY' div. This meant that I could apply a drop animation without losing the horizontal momentum already gathered. Initially, it didn't play well as it stopped its horizontal motion on a fall, which wasn't very smooth.
A detection function to test if the ball is on top of a hole runs every 50 milliseconds, so producing a frame rate of 20fps depending on browser (although the game scroll and player motion should be smoother than this as they're not tied to the hole detection function). Within this function however, I added a jQueryRotate plugin, which was very useful. Depending on whether the ball is moving left or right, it updates the rotation value every 50 milliseconds.
Finally, a scoring system was added along with the ability to post high scores. There are many ways of cheating to log an impossible score, but I wasn't overly concerned about this as it wasn't the main principle of the task.
Anyway, have a play.
I've been working on this extension to my website for the last few days, and it's ready to be viewed and played around with. It's an online version of Blackjack, created with PHP, Javascript and MySQL, and can be played as single or multiplayer - to test out the multiplayer, just open another browser window and be another player. The aim is to get a hand as close to 21 without going over, and to beat the dealer (not the other players - each individual player just plays against the dealer).
Aces count as one or eleven, whichever is better for you - this is taken account of in the game and adds the higher value as long as it won't make you go over 21. A 2 is worth 2, 3 worth 3, etc, and face cards are worth ten.
It requires cookies and obviously Javascript to be enabled. The Javascript is the main workings of the game, calling a PHP function to check the SQL database when updates have been made, then refreshing section of the screen in an Ajax style way, allowing other sections (such as the chat) to continue independently without interruption. An auto kick function is added, so that if any player leaves without clicking the leave button, the game doesn't just cripple to an indefinite halt - players can then return when they're back.
One of the most difficult challenges was working out how to accommodate new players, and also those that leave without destroying the game. I decided to add a value to the database when a new player joins, and have them wait until the next deal, then update them into the game. A player leaving caused more problems, but I resolved this by first adding the timer so they have to leave if they don't actually click the leave button, then if they do click to leave, it takes the player's cards with them. Initially, it meant that a leaving player transferred their cards onto the next player, which would be a bit harsh if they were a bad hand. So this player is still 'in' the game even after leaving, even though their cards and score aren't visible, a message is noted that a player has left, and they are then removed at the next round.
I then added a chat function, since the server was already calling a PHP script every couple of seconds, it may as well check the file size of the saved chat, then update if it's larger. A javascript function to then force the div to automatically scroll to the bottom (and so the updated messages) is also called when loading new data. The line required, for anyone that may find this useful (it took me quite a bit of Googling, hopefully you'll fare better), was:
Where chat_div is your div ID.
It doesn't include all of the rules of Blackjack just yet - but enough to form a functioning game. Features such as splitting a hand, betting and keeping track of high scores will come in the future.
Try it out, and let me know what you think, and if you find any errors. I'm aware of quite a few ways to cheat, but I left some of the ways I thought of in there as they were handy debuggers - I'll remove them when I come to finish everything off.
www.adamgleeson.co.uk/blackjack
Tags
- web development orange reel jquery mysql css motorsports xml animation silverstone 2011 site fall !webapps php jQuery web !animation soldier Interface stuff july 2011 amazing canada sentinel website looks like the guy from the crystal maze mask work in progress demo matrix the box game unnecessarily extravagant f1 lip sync javascript !animation 11 second club jump !character fight rss june 2011 character PHP feedreader dragon development Mobile development design webapps wtf chat tasks cycle fota trailer update balls portfolio run bounce MySQL idiot mental case calendar maps climb highlights ott evil mclaren superhero physics dance head explode robot 3D assassins creed webapp XML
Archive
- April 2012 [1]
- March 2012 [2]
- September 2011 [6]
- July 2011 [6]
- June 2011 [5]
- May 2011 [4]
- April 2011 [7]
- March 2011 [1]
- January 2011 [7]
- December 2010 [2]
- November 2010 [4]
- October 2010 [12]
- September 2010 [7]
- August 2010 [1]
- July 2010 [5]
- June 2010 [4]
- May 2010 [3]
- April 2010 [6]
- March 2010 [6]
- February 2010 [5]
- January 2010 [1]
- October 2009 [2]
- September 2009 [5]
- August 2009 [4]
- July 2009 [6]
- June 2009 [4]
- May 2009 [2]
- April 2009 [6]
- March 2009 [3]
- February 2009 [4]
- January 2009 [4]
- December 2008 [4]
- November 2008 [1]
- October 2008 [5]
- September 2008 [2]
- July 2008 [1]
