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.?
Friday, September 19th, 2008
Category: Fun, Games
I got to play an old school, sit down, Pacman at Google Developer Day, London, so it only seems appropriate to keep playing it thanks to Harry Guillermo and his new Pacman port to JavaScript.
Friday, September 5th, 2008
Category: Games
Selim Arsever wants to make it easier to great JavaScript games, so he created gameQuery, based on jQuery.
gameQuery allows you to declare animations, which are made of one image with a succession of frames just like in a css sprite. An animation in itself doesn't exist until it's associated with a sprite.
JAVASCRIPT:
-
-
var myAnimation = new Animation({ imageURL: "./myAnimation.png", numberOfFrame: 10, delta: 60, rate: 90, type: Animation.VERTICAL | Animation.ONCE});
-
Friday, August 22nd, 2008
Category: Games, MooTools
Munteanu Gabriel has created today's Friday JavaScript game. It is an old favourite.... Bomberman.
Munteanu has released the code as an open source project, and you can get going to bomb away now
Friday, August 8th, 2008
Category: Adobe, Games, Gears
Alx Dark has created The Tombs of Asciiroth a fully functional roguelike-meets-puzzle-arcade game.
Asciiroth is a a complete, functional, open source game, written using GWT, and distributed either as an Adobe AIR application, or as a game you can play over the web. In the latter case, it uses Gears to provide saved game support. (So bottom line is you can play it using AIR or Firefox... IE is too slow, Opera/Safari aren't supported by Gears.) It also has a map editor that is distributed as an Adobe AIR application.
It is very cool to see applications written using Ajax, and then using both Gears for in-browser functionality, and AIR for desktop deployment.
Thursday, July 17th, 2008
Category: Canvas, Games
Mathieu Henri saw Scott Schiller's generated favicons VU meter and wanted to "push the concept of generated favicons further and pack a thrilling retro shooter in 16×16 pixels using JavaScript, canvas and data: URIs."
Wow. He went and did it. The entire game runs in the favicon!
DEFENDER of the favicon was done in 3 nights, from start to finish. Each frame of the game is generated on the fly in JavaScript into a 16×16 canvas element, then converted to a 32bits PNG image and used in place of the favicon. The core of the game act as a state machine. Notice a few details such as the pause when this window is not focused, and the resuming and game over transitions.
Obviously since this little game makes use of canvas and the toDataURL method, it does not work in Internet Explorer, and Safari does not seem to support PNG favicons. Prefer Opera or FireFox, although FireFox 3 suffers from garbage collection hick ups when playing in the favicon.
The game logic isn't really complex but remains true to the original Defender and provides enough action for 16×16 pixels. The original game mechanics would make Defender of the favicon insanely difficult. Therefore a few adjustments were done : none of the enemies fire at you, your Defender got upgraded with a shield, and finally the Landers do not mutate into unstoppable war machines after abducting a humanoid but wander in your general direction.
Tuesday, July 8th, 2008
Category: Games
Fellow Yahoo Matt Hackett took a leaf out of Jacob Seidelin's book and started converting old school arcade games to JavaScript. Instead of using Canvas his only "non JavaScript" solution is playing the music with Scott Schiller's Sound Manager (which, as we know, uses Flash under the hood).
You can come down with 8 bit shoot-em-up fever by clicking the screenshot.
Matt also shows you what the score is and give some more game info on his blog.
Friday, June 6th, 2008
Category: Fun, Games
Andrew Wooldridge created CanvasQuest with the idea of creating a simple roguelike game. It has some interesting features like map loading, and uses graphics to render the text via sprites.
Friday, May 30th, 2008
Category: Games
