Activate your free membership today | Log-in

Friday, May 1st, 2009

Deep Leap: Teasing John Resig

Category: Fun, Games, JavaScript

John has been working on a very fun scrabble typing game called Deep Leap and although he hasn’t finished it yet, people found it (John, time to learn about .htaccess ? ;)

Just to tease him a little more and get the word out before it is finished, check it out!

Posted by Dion Almaer at 4:33 pm
9 Comments

++---
2.7 rating from 45 votes

Sunday, April 19th, 2009

Sarien: Multiplayer Game Engine goes Open Source

Category: Games, Showcase

Ben loves to talk about old games such as Dark Castle. I personally love remembering old Sinclair ZX Spectrum games but also fondly remember Leisure Suit Larry.

Wouldn’t it be nice if you could play classic old games such as these easily online? Martin Kool thought so, and wanted to create an open source adventure game system, and just released Sarien.net “the portal for reliving the classic Sierra On-Line adventure games. With its focus on instant fun and a unique multiplayer experience, Sarien.net hopes to win new gamers’ hearts and promote the adventure game genre.”

Features

Completely browser based, runs in IE, FF, Opera, Safari, Chrome

  • Works on the iphone and Wii (both needs fixing at the moment I believe)
  • Games are completely playable using mouse or keyboard input. A lot of effort has been put into the user interface to make it work for the era that we’re in
  • Multiplayer! This was not in the original games, but what you can do now is; when you are playing your own game at your own pace, and are in game X room Y, you’ll see other players in that same game X room Y doing their things
  • You can talk to eachother and replay scenes together
  • All game areas are accessible directly through the address bar, and bookmarkable. Giving players the instant kick of replaying a certain scene
  • While playing, you encounter other npc’s. These add up to your own list of avatars that you can choose to be, not influincing the gameplay but it adds up to the fun (especially in multiplayer)
  • There’s even an extra Studio tool to let you view all game resources, similar to existing tools such as AGI Studio

Check out some of the games and then delve into the resource explorer studio and build your own stuff.

Thanks for doing this Martin! What games would you like to see / create? :)

Posted by Dion Almaer at 10:54 am
8 Comments

++++-
4.7 rating from 38 votes

Friday, April 3rd, 2009

Awesomium: Embed Web content in your 3d worlds and games

Category: Games

Awesomium lets you embed Chromium/WebKit into 3d worlds and games. Check out the video above and half fun looking at the transparent search results and the shadows from the content on the grass.

What could it be used for?

  • Powering an in-game GUI using HTML/JS/CSS
  • Rendering a live web-page to a 3D object and interacting with it
  • As a framework for an advanced, 3D web-browser
  • As an offscreen renderer for snapshots of web-pages
  • For the implementation of in-game advertisting.

Posted by Dion Almaer at 3:33 am
12 Comments

++++-
4.1 rating from 19 votes

Thursday, April 2nd, 2009

Q42 Multiplayer Game Engine Open Sourced

Category: Chat, Games

Martin Kool of Q42 let us know that his company decided to open source the Q42 multiplayer engine which is "a lightweight, generic multi-user solution, allowing developers to create their own browser-based application or game over port 80."

The engine is written in C# on the backend, and of course, JavaScript on the front end.

You can check out the sample chat client that leads you to the following code:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. /// <reference path="Multiplayer.js" />
  3. var ChatClient =
  4. {
  5.   users: {},
  6.   join: function() {   
  7.     ChatClient.name = document.getElementById("name").value;
  8.     document.getElementById("joinForm").style.display = "none";
  9.     document.getElementById("chat").style.display = "block";
  10.     Multiplayer.init("ping.aspx", 2000, ChatClient.handleEvent, { "name": true, "say": false });
  11.     var roomName = document.location.search.replace(/.*?room=(.*)/g, '$1');
  12.     roomName = (roomName == document.location.search) ? 0 : roomName;
  13.     Multiplayer.connect({ "name": ChatClient.name }, roomName);
  14.     ChatClient.writeLog("* " + ChatClient.name + " joined.");
  15.   },
  16.   handleEvent: function(userId, name, value) {
  17.     if (!ChatClient.users[userId]) ChatClient.users[userId] = {};
  18.     var user = ChatClient.users[userId];
  19.     user[name] = value;
  20.     if (name == "disconnect") ChatClient.writeLog("* " + user.name + " disconnected.");
  21.     if (name == "name") ChatClient.writeLog("* " + value + " joined.");
  22.     if (name == "say") ChatClient.writeLog((user.name ? user.name : userId) + ": " + value);
  23.   },
  24.   sendMessage: function() {
  25.     var text = document.getElementById("msg").value;
  26.     if (text.indexOf("room") == 0)
  27.       Multiplayer.send({ "room": text.substr(5) });
  28.     else
  29.       Multiplayer.send({ "say": text });
  30.     ChatClient.writeLog(ChatClient.name + ": " + text);
  31.     document.getElementById("msg").value = "";
  32.   },
  33.   writeLog: function(msg) {
  34.     document.getElementById("log").value += msg + "\n";
  35.     document.getElementById("log").scrollTop = document.getElementById("log").scrollHeight;
  36.   }
  37. };
  38.  

Each user asynchronously pings a url on the central server at a given interval, sending its changes and retrieving changes of other visitors. The retrieved changes are dispatched through the javascript library, so the clientside application may act upon it.

The client consists of a single 5k javascript file, and the server is a single C# class library that can be embedded as source, or as a dll.

Focus of the q42 multiplayer engine was to give developers full control and not come up with any restrictions to the type of application that is being developed.

Features

  • Easy customization and full control. Example project included
  • Easy grouping of users that can see eachother by means of virtual "rooms"
  • Automatic room upscaling when a certain amount of users is reached
  • Automatic cleanup of empty rooms and idle users
  • Persistent user properties (for example: name, x or y position)
  • Nonpersistent user events, such as chat messages
  • Full control over rooms, names, properties, events and its values
  • Moderating features can be implemented easily
  • Optionally allowing multiple users per session, so each browser-tab can represent a new user.

Posted by Dion Almaer at 5:33 am
1 Comment

+++--
3.5 rating from 33 votes

Monday, February 2nd, 2009

Writing a JavaScript Tetris; Lessons learned from a Ruby chap

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:

  1. Rationale
  2. Planning
  3. Infrastructure
  4. Graphics & Input
  5. The Life Of A Piece
  6. Lights, Action, Music!
  7. Gameplay
  8. Javascript Tetris Pt 8: Post Mortem & References

Posted by Dion Almaer at 8:18 am
Comment here

++++-
4 rating from 27 votes

Friday, December 12th, 2008

Travians: Sims meets Cultures, with Ajax

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!

Posted by Dion Almaer at 7:44 am
11 Comments

+++--
3.6 rating from 39 votes

Friday, November 21st, 2008

Digg Attack: A Canvas Game

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.

Posted by Ben Galbraith at 7:00 am
2 Comments

++++-
4.2 rating from 18 votes

Tuesday, October 28th, 2008

GameJS: Canvas Game Library

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:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. loadContent: function() {
  3.     // set the screen rect
  4.     this.screenRect = new Rectangle(
  5.         0, 0,
  6.         this.screenWidth,
  7.         this.screenHeight
  8.     );
  9.  
  10.     // Create the background texture. The third argument argument
  11.     // makes this texture is not redrawn every frame (gives
  12.     // performance boost since the background doesn't change)
  13.     this.backgroundTexture = new Texture(
  14.         this.graphics,
  15.         this.content.load('Textures/BackgroundTexture.png'),
  16.         false
  17.     );
  18.  

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:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. constructor: function() {
  3.     var ds = this.graphics.deviceSettings;
  4.  
  5.     ds.screenWidth = this.screenWidth;
  6.     ds.screenHeight = this.screenHeight;
  7.     ds.target = document.getElementById('tetris-container');
  8.     ds.fullScreen = false;
  9.     ds.applyChanges();
  10.  

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:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. draw: function(gameTime) {
  3.     // clear the device
  4.     this.graphics.graphicsDevice.clear();
  5.  
  6.     var spriteBatch = new GameJS.graphics.SpriteBatch(this.graphics);
  7.     spriteBatch.begin();
  8.  
  9.     // Draw the background
  10.     spriteBatch.draw(this.backgroundTexture, this.screenRect);
  11.  
  12.     // Draw the gamefield.
  13.     spriteBatch.draw(this.gameFieldTexture, this.gameFieldRect);
  14.  

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:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. update: function(gameTime) {
  3.     // Get the current input state.
  4.     var keyboardState = this.keyboard.getState();
  5.     if(this.isGamePaused) {
  6.         if (keyboardState.isKeyPressed(Keys.ENTER)) {
  7.             this.isGamePaused = false;
  8.         }
  9.     }
  10.  

You can't build a game frameworking without creating a game, and Tommy did the old favourite, creating Jetris as a clone of Tetris.

Posted by Dion Almaer at 9:15 am
5 Comments

++++-
4.5 rating from 43 votes

Friday, October 3rd, 2008

Life: The game in Canvas

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:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. var counterface = 0;
  3. var oInstance;
  4. var Game = Class.create();
  5.  
  6. Game.prototype = {
  7.         'working': false,
  8.         'map': '',
  9.         'interval_id': '',
  10.     'initialize': function()
  11.     {
  12.  
  13.                 //generate map
  14.                 var startmap = [];
  15.                
  16.                 for(var y = 0; y <90; y++)
  17.                 {
  18.                         var row = [];
  19.                        
  20.                         for(var x = 0; x <90; x++)
  21.                         {
  22.                                 var state = Math.random();
  23.                                 state = (state> 0.8)? 1:0;
  24.                                 row[x] = state;
  25.                         }
  26.                        
  27.                         startmap[y] = row;
  28.                 }
  29.  
  30.                 this.map = startmap;
  31.                
  32.                 oInstance=this;
  33.                 this.interval_id = setInterval(function(){oInstance.loop()}, 100);
  34.     },
  35.     'loop': function()
  36.     {
  37.                 if (document.getElementById('frame').getContext)
  38.                 {
  39.                         // drawing code here
  40.                         if(this.working == false)
  41.                         {
  42.                                 this.working = true;
  43.                                 this.draw();
  44.                                 this.step();
  45.                                 this.working = false;
  46.                         }
  47.                 }
  48.                 else
  49.                 {
  50.                         // canvas-unsupported code here
  51.                         alert('Your Browser does not support the canvas tag. try again  in firefox 1.5+ or Opera 9+');
  52.                 }
  53.     },
  54.         'draw': function()
  55.         {
  56.                 var ctx = document.getElementById('frame').getContext('2d');
  57.                 ctx.save();
  58.                 ctx.clearRect(0,0,450,450);
  59.             ctx.fillStyle = "rgb(0,0,0)";
  60.  
  61.                 for(var y = 0; y <90; y++)
  62.                 {
  63.                         for(var x = 0; x <90; x++)
  64.                         {
  65.                                 if(this.map[y][x] == 1)
  66.                                 {
  67.                                         ctx.fillRect (x*5, y*5, 5, 5);
  68.                                 }
  69.                         }
  70.                 }
  71.  
  72.                 ctx.restore();
  73.                 ctx.fill();
  74.         },
  75.         'step': function()
  76.         {
  77.                 var output = '';
  78.                 supercount = 0;
  79.                
  80.                 var tempmap = [];
  81.  
  82.                 for(var y = 0; y <90; y++)//work around for arrays passing by reference.
  83.                 {
  84.                         var row = [];
  85.                        
  86.                         for(var x = 0; x <90; x++)
  87.                         {
  88.                                 row[x] = this.map[y][x];
  89.                         }
  90.                        
  91.                         tempmap[y] = row;
  92.                 }
  93.                                
  94.                 for(var y = 0; y <90; y++)
  95.                 {
  96.                         for(var x = 0; x <90; x++)
  97.                         {
  98.                                 var countme = this.getNeighborCount(y,x);
  99.                                
  100.                                 if ( this.map[y][x] == 0 ) // dead cell 
  101.                                 { 
  102.                                         if ( countme == 3 ) 
  103.                                         { 
  104.                                                 tempmap[y][x] = 1; 
  105.                                         } 
  106.                                 } 
  107.                                 else
  108.                                 { 
  109.                                         if ( ( countme == 2 ) || ( countme == 3) ) 
  110.                                         { 
  111.                                                 tempmap[y][x] = 1; 
  112.                                         } 
  113.                                         else 
  114.                                         { 
  115.                                                 tempmap[y][x] = 0 ; 
  116.                                         } 
  117.                                 } 
  118.                         }              
  119.                 }       
  120.                 counterface++;
  121.                 this.map = tempmap;
  122.         },
  123.         'getNeighborCount': function(starty,startx)
  124.         {
  125.                 var count = 0;
  126.                
  127.                 for(var y = starty-1; y <= starty+1; y++)
  128.                 {
  129.                         for(var x = startx-1; x <= startx+1; x++)
  130.                         {
  131.                                 if(y>= 0 && y <90 && x>= 0 && x <90)
  132.                                 {
  133.                                         if(startx != x || starty != y)
  134.                                         {
  135.                                                 if(this.map[y][x] == 1)
  136.                                                 {
  137.                                                         count++;
  138.                                                 }
  139.                                         }
  140.                                 }
  141.                         }
  142.                 }
  143.                
  144.                 return count;
  145.         }
  146. }
  147.  

Posted by Dion Almaer at 10:07 am
3 Comments

+++--
3.2 rating from 13 votes

Tuesday, September 23rd, 2008

Invaders from Mars: Building a JavaScript Game

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.?

Posted by Ben Galbraith at 7:00 am
10 Comments

+++--
3.6 rating from 22 votes

Friday, September 19th, 2008

Pacman bites back

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.

Posted by Dion Almaer at 5:19 am
5 Comments

++++-
4.5 rating from 36 votes

Friday, September 5th, 2008

gameQuery:

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.

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. var myAnimation = new Animation({ imageURL: "./myAnimation.png", numberOfFrame: 10, delta: 60, rate: 90, type: Animation.VERTICAL | Animation.ONCE});
  3.  

Posted by Dion Almaer at 2:36 am
2 Comments

+++--
3 rating from 16 votes

Friday, August 22nd, 2008

Bomberman in MooTools

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

Posted by Dion Almaer at 5:36 am
1 Comment

++++-
4 rating from 15 votes

Friday, August 8th, 2008

Tombs of Asciiroth: GWT, Gears, and AIR enabled RPG Game

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.

Posted by Dion Almaer at 6:22 am
1 Comment

++++-
4.2 rating from 17 votes

Thursday, July 17th, 2008

Defender of the Favicon

Category: Canvas, Games

Defender Favicon Logo

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.

Defender of the Favicon

Posted by Dion Almaer at 8:06 am
6 Comments

++++-
4.7 rating from 32 votes

Tuesday, July 8th, 2008

Spacius - Nintendo meets JavaScript - again!

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.

Spacius by Matt Hackett

Matt also shows you what the score is and give some more game info on his blog.

Posted by Chris Heilmann at 4:41 pm
10 Comments

+++--
3.7 rating from 28 votes

Next Page »