Friday, December 12th, 2008
Category: Fun
, Games
Steve Mattison let us know about a new AJAX game has been released by the makers of that old popular PHP-based village building game Travian. This one is more like Sims meets Cultures, and it is called Travians:
“Travians is a browser game in which you rise to the challenge of
everyday life as a villager. This means more than just specializing in
your occupation, building your own home or deciding whether you enjoy
games more than fighting: The most important thing is communication
within the huge village community. This is the only way to get fun
clubs and strong guilds. Become a Travian and experience a whole new
online world!
Friday, November 21st, 2008
Category: Canvas, Fun, Games
Fun news for a Friday. From Jacob Seidelin–the dude behind JavaScript Super Mario Brothers–comes Digg Attack, an original JavaScript game using <g;canvas> for visuals (and Flash for music).
As an added twist, the game uses Digg to provide a sort of unique twist; enemies in the game are based on stories in the Digg API feed and their ratings.
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.
Friday, October 3rd, 2008
Category: Canvas, Games
Kyle McGregor took a look at the JavaScript games for Life out there and decided to write a Canvas version that ends up being a lot snappier. The entire game is pretty small:
JAVASCRIPT:
-
-
var counterface = 0;
-
var oInstance;
-
var Game = Class.create();
-
-
Game.prototype = {
-
'working': false,
-
'map': '',
-
'interval_id': '',
-
'initialize': function()
-
{
-
-
//generate map
-
var startmap = [];
-
-
for(var y = 0; y <90; y++)
-
{
-
var row = [];
-
-
for(var x = 0; x <90; x++)
-
{
-
var state = Math.random();
-
state = (state> 0.8)? 1:0;
-
row[x] = state;
-
}
-
-
startmap[y] = row;
-
}
-
-
this.map = startmap;
-
-
oInstance=this;
-
this.interval_id = setInterval(function(){oInstance.loop()}, 100);
-
},
-
'loop': function()
-
{
-
if (document.getElementById('frame').getContext)
-
{
-
// drawing code here
-
if(this.working == false)
-
{
-
this.working = true;
-
this.draw();
-
this.step();
-
this.working = false;
-
}
-
}
-
else
-
{
-
// canvas-unsupported code here
-
alert('Your Browser does not support the canvas tag. try again in firefox 1.5+ or Opera 9+');
-
}
-
},
-
'draw': function()
-
{
-
var ctx = document.getElementById('frame').getContext('2d');
-
ctx.save();
-
ctx.clearRect(0,0,450,450);
-
ctx.fillStyle = "rgb(0,0,0)";
-
-
for(var y = 0; y <90; y++)
-
{
-
for(var x = 0; x <90; x++)
-
{
-
if(this.map[y][x] == 1)
-
{
-
ctx.fillRect (x*5, y*5, 5, 5);
-
}
-
}
-
}
-
-
ctx.restore();
-
ctx.fill();
-
},
-
'step': function()
-
{
-
var output = '';
-
supercount = 0;
-
-
var tempmap = [];
-
-
for(var y = 0; y <90; y++)//work around for arrays passing by reference.
-
{
-
var row = [];
-
-
for(var x = 0; x <90; x++)
-
{
-
row[x] = this.map[y][x];
-
}
-
-
tempmap[y] = row;
-
}
-
-
for(var y = 0; y <90; y++)
-
{
-
for(var x = 0; x <90; x++)
-
{
-
var countme = this.getNeighborCount(y,x);
-
-
if ( this.map[y][x] == 0 ) // dead cell
-
{
-
if ( countme == 3 )
-
{
-
tempmap[y][x] = 1;
-
}
-
}
-
else
-
{
-
if ( ( countme == 2 ) || ( countme == 3) )
-
{
-
tempmap[y][x] = 1;
-
}
-
else
-
{
-
tempmap[y][x] = 0 ;
-
}
-
}
-
}
-
}
-
counterface++;
-
this.map = tempmap;
-
},
-
'getNeighborCount': function(starty,startx)
-
{
-
var count = 0;
-
-
for(var y = starty-1; y <= starty+1; y++)
-
{
-
for(var x = startx-1; x <= startx+1; x++)
-
{
-
if(y>= 0 && y <90 && x>= 0 && x <90)
-
{
-
if(startx != x || starty != y)
-
{
-
if(this.map[y][x] == 1)
-
{
-
count++;
-
}
-
}
-
}
-
}
-
}
-
-
return count;
-
}
-
}
-
Tuesday, September 23rd, 2008
Category: Games, JavaScript
As a follow-up to our recent posting of a JavaScript Pac-Man clone, we bring you a JavaScript Space Invaders clone: Invaders from Mars. Only this time, in addition to a link to the game itself, we've got a link to the author's blog (one Mark Wilcox) in which he goes into detail on the various design issues he faced whilst creating his game and discusses the lower-level framework he created to drive his game.
Invaders from Mars does it old-school, as did the Pac-Man clone: divs and images, baby. Performance is pretty good, but I can't wait to see people realize that if they go with <canvas>, they can really do some interesting stuff. What do you think on the Canvas vs. DOM rendering model for games, etc.?
