Friday, April 30th, 2010
Category: Fun, Games
Nearly 4 years ago, Ben Joffe created a fun Tetris-like game called Torus that takes the classic and makes it cylindrical. He just updated the game now that browsers can power his canvas game sooo much better.
- Smooth falling motion
- Smooth left/right motion
- Row clear animation
- Slightly higher playing field
- Visual indication of death zone
- “Sparkling” blocks
- New points system
- New piece types (you’ll have to wait a while to see these appear).
Nice work Ben!
Monday, February 2nd, 2009
Category: Examples, Games, JavaScript, Tutorial
We often get games sent our way, and try to keep those posts for Fridays. This one is different though. Thomas Kjeldahl Nilsson didn’t just write another Tetris clone in JavaScript, he documented his experience. He posted a series of articles on the various steps, and not only do you learn how to build a nice Tetris game, but you get to see how to develop nice testable code. Thomas comes from the Ruby world and it shows.
Take some time to poke through his series on JavaScript Tetris:
- Rationale
- Planning
- Infrastructure
- Graphics & Input
- The Life Of A Piece
- Lights, Action, Music!
- Gameplay
- Javascript Tetris Pt 8: Post Mortem & References
Tuesday, October 28th, 2008
Category: Canvas, Games
Tommy Maintz has created a fun project called GameJS a 2d game development framework using JavaScript and Canvas.
The API
GameJS.framework.Game - This is the main game class you extend when creating the game. It has the following methods which you have to override: initialize, loadContent, update and draw. This is all very similar to the XNA framework. Tetris.js is an example of how to extend this class.
GameJS.content.ContentManager - This class handles the asynchronous loading of resources saving you some headaches. The following code loads a new texture which can be drawn in the games draw() method:
JAVASCRIPT:
loadContent: function() {
// set the screen rect
this.screenRect = new Rectangle(
0, 0,
this.screenWidth,
this.screenHeight
);
// Create the background texture. The third argument argument
// makes this texture is not redrawn every frame (gives
// performance boost since the background doesn't change)
this.backgroundTexture = new Texture(
this.graphics,
this.content.load('Textures/BackgroundTexture.png'),
false
);
GameJS.graphics.GraphicsDevice - This file sets up the main canvas. It also manages the Z-buffering, and has a method that creates a new resource context which individual textures can use. You can easily change its properties. A simple example:
JAVASCRIPT:
constructor: function() {
var ds = this.graphics.deviceSettings;
ds.screenWidth = this.screenWidth;
ds.screenHeight = this.screenHeight;
ds.target = document.getElementById('tetris-container');
ds.fullScreen = false;
ds.applyChanges();
GameJS.graphics.SpriteBatch - This class acts as a wrapper around the canvas element. It has a draw method which allows you to draw a texture to the graphicsDevice. You can pass it a destination and source rectangle. Code example:
JAVASCRIPT:
draw: function(gameTime) {
// clear the device
this.graphics.graphicsDevice.clear();
var spriteBatch = new GameJS.graphics.SpriteBatch(this.graphics);
spriteBatch.begin();
// Draw the background
spriteBatch.draw(this.backgroundTexture, this.screenRect);
// Draw the gamefield.
spriteBatch.draw(this.gameFieldTexture, this.gameFieldRect);
GameJS.input.Keyboard and GameJS.input.KeyboardState - These classes handle the keyboard input. Since JavaScript is an event based language and a game cycle is something continues, the framework takes care of storing the pressed keys. This looks something like the following:
JAVASCRIPT:
update: function(gameTime) {
// Get the current input state.
var keyboardState = this.keyboard.getState();
if(this.isGamePaused) {
if (keyboardState.isKeyPressed(Keys.ENTER)) {
this.isGamePaused = false;
}
}
You can't build a game frameworking without creating a game, and Tommy did the old favourite, creating Jetris as a clone of Tetris.
Monday, April 28th, 2008
Category: Games, Java, JavaScript
As John Resig reports, the Japanese Shibuja.JS user group managed to port (at least in parts) the Java Virtual Machine over to JavaScript. The project is called Orto and there is a Japanese PDF explaining the details (I guess) available on John's site.
Using this you can convert Java code into bytecode and embed it in the document.
JAVASCRIPT:
"java/lang/Thread 1316742099":function(){var orto333=orto245[0];
var orto336=orto350(orto333);
if(orto336.orto340!=orto310){orto223("java/lang/IllegalThreadStateException",null);
return ;
}
One of the examples shown is a pretty cool Tetris game:
As Orto simulates the multithreaded nature of Java with yields and timeouts this is of course hard-core simulation (read: hack), but the benefit are that you could Java Games on non-JS devices, like the iPhone.
Orto also seems to try to simulate the Java UI conventions, thus making it easy to convert existing applications (to a certain degree as there is no equivalent in HTML for the richness of Java UIs unless you build them yourself as libraries ike Dojo or Quoxdoo did).
More details are available on John Resig's Blog
Friday, May 18th, 2007
Category: Fun, Games
You can never have enough Tetris on a Friday.
Sergey Popov created this version. Play away.
Friday, May 19th, 2006
Category: Games, Showcase, Yahoo!
Dustin Diaz is at it again. This time he has created Tetris using the Yahoo! UI utilities.
The game uses a combination of:
It even looks nice :)
Play Tetris
NOTE: there is a SVG version of Tetris too
Tuesday, June 14th, 2005
Category: Browsers, Firefox
And while we're on the topic of SVG...
By way of svg.org, an SVG enthusiast demonstrates how to get the (Windows only) Adobe SVG Viewer 6.0 "pre-alpha" (not a beta, as he claims) to work along-side Deer Park's native SVG support.
The blog entry is unnecessarily critical of a *preview* release of Deer Park's unfinished SVG support, but given the relative completeness of Adobe's plug-in, developers looking to experiment with SVG ahead of the curve will appreciate this technique. Of course, Firefox 1.0.x users can install the Adobe plug-in as well.
We've enjoyed playing around with various SVG demos out there, notably a Tetris implementation over at Mozilla.org. Grab the Adobe plug-in before Macromedia makes 'em take it down ;-).
Google Maps is way cool, but I keep thinking about an SVG version... goodbye arbitrary zoom levels! And of course, UI design takes two leaps forward with DOM'able vector graphics. Very cool stuff.
