onGameStart 2012

The most important thing in the life adventure is to remember when and how did it start. First impressions, inspirations and simple steps shape the future.
My gaming experience started in mid '90 on my XT with Hercules graphic card and amber screen. I was too young (and I lived on the other side of the iron curtain) to remember Apple II or Commodore computers before. One of the first games I remember from my early childhood was 'Prince of Persia' made by Jordan Mechner. I played it for almost 12 years before I was able to finish it without cheating (I can still remember 'prince megahit' password that enables cheat mode). I'm sure that a lot of you had similar experience.

What does this have to do with onGameStart?

Earlier this year I tweeted that HTML5 gamedevs are the new generation of game makers, and like every other 'new generation' we reinvent the same patterns or techniques our older friends implemented 30 years ago. There is no better way to learn, than listen to the real experts. That's why Jordan Mechner, creator of Prince of Persia, will share his experience during this year's Main onGameStart Keynote.

During two days of the conference it will be also possible to listen to presentations of the biggest, most talented and most respected HTML5 game developers from all over the world. And differently from last year, we will focus on real HTML5 games, tools that could help you write your own game, and wide variety of services for distribution, payments, statistics, and everything you will need to create great game. No more tech demos or examples - we all know that HTML5 has become mature enough, and players don't care about the technology - they want games. And we need those players and those games to prove that Open Web Technologies can compete with any other technology used in game development.

First part of confirmed speakers list for this year's edition of the first HTML5 game conference:
Seb Lee-Delisle, trainer on CreativeJS workshops
Jerome Etienne, creator of learningthreejs.com and tQuery
Jon Howard, responsible for games for kids in BBC
Andres Pagella, creator of Tracy and author of "Making Isometric Social Real-Time Games with HTML5, CSS3, and JavaScript"
Szymon Pilkowski, former senior JS developer in Crytek & Bigpoint
Robert Podgorski, boss of Black Moon Dev, one of the best pixel artists ever
Jonas Wagner, author of great WebGL demos
And of course last but not least,
Jordan Mechner, creator of Prince of Persia

So about 30 seconds ago we have launched our site, onGameStart.com. And because it's all about gaming, we've simply created a game with outstanding graphics by Robert. Control little astronaut with arrow keys, use space to talk to the speakers (close the window with 'z'), avoid lasers and spikes, and use keycards to open the door. If you don't want to explore our oGS spaceship, you can simply click on the head of the speaker in the top menu, and you will be teleported to the given speaker - you can still talk with him using space. game was created using Dominic's ImpactJS so it should work in most of the browsers. If you happen to find a bug, typo etc, feel free to tweet me about that (@michalbe). Enjoy, and stay tuned (Lanyrd, Facebook & Twitter)! We will announce more speakers and surprises soon.

GG Workshop

Yesterday I ran Javascript workshop about creating Apps & Games in Social Networks. Fourteen great developers in eight hours tried to create multiplayer checkers (draughts? what's the difference?) game and adapt it to two social network APIs (Facebook & GG.pl). I published source code of the final result on my Github, just as Maciej Konieczny, one of the participants. Here are also my slides and couple of photos:

GG WORKSHOP GAMES & APPS IN JAVASCRIPT

View more presentations from michalbu

I would like to thanks everyone for the presence and I hope we will meet on frontend meetings in near future (like those organized by Google Poland). If you will find some free time feel free to rate my workshop on SpeakerRate.

JavaScript from command line - standard input & output

As you could already know from Mr. C's lectures from YUI Theater or FrontTrends - standard I/O is the worst thing programming languages could ever implement. Fortunately - Javascript has no input at all. And in most cases it doesn't need any - it was designed as script language for web pages. But nowadays we use Javascript in any other aspects of our programming life - we can build for desktops using XUL, server-side tools like node.js (for example with announced last week JSPP) or any other Server-side Javascript implemenation provide JS backend for the web, native mobile apps could be created using frameworks like Phonegap. So what about executing JS scripts from command line? And why do we need it?
The reason I've refreshed my experiences with JS scripts executing was Hacker Cup organized by Facebook - there are no language restrictions in there, your scripts just has to know how to analyze given input and write the answers on the standard output. It is quite unpopular way of using & writing Javascript, so I will show few tips of command line in here.

Engines
There is such a JavaScript engine called Rhino. It is completely written in Java, open source, and very easy to use. It is managed by Mozilla, so you can find a lot of docs and tutorials on Mozilla's page.
Rhino has few additional functions eg for working with files (readFile()) or serializing objects (serialize()), which makes it useful in solving algorithmic problems in competitions like FBHC. Full list of all shell function can be found on Mozilla's page.
Each time you run Javascript scripts from command line, all the arguments you provide will be stored in global variable called 'arguments'. Enriched with this knowledge we can begin with some examples. This is my implementation of binarySearch algorithm:

Array.prototype.binSearch = function(element) {
    var element = parseInt(element, 10), 
        left = 0,  
        right = this.length-1,
        middle = ~~((left+right)/2),
        lastMiddle;

    while (parseInt(this[middle], 10) !== element) {
    
        if (lastMiddle === middle) {
            return null; //nothing found, break
        }
        
        if (parseInt(this[middle], 10) < element)
            left = middle++;
        else 
            right = middle--;
        
        lastMiddle = middle;
        middle = Math.round((left+right)/2); 
    }        
    return middle; //index of found element 
}


var MainFunction = function(args) {

    var a = readFile(args).split("\n"),
        arrayElement = a[0].split(" "),
        result;
    
   
    print("Array: "+arrayElement);
    
    for (var i=1, j=a.length;i < j;i++) {
        result = arrayElement.binSearch(a[i]);
        if (result) 
            print("Element "+parseInt(a[i], 10)+" in on position nr "+result);
        else 
            print("Element "+parseInt(a[i], 10)+" cannot be found in the array");
    }

}(arguments)

As an input it takes filename with the elements of an array in first row and elements to find in that array in next rows, like this:

4 10 12 19 25 34 41 50 52 61 66 68 76 81 82 85 94 97 105 112 115 124 128 138 139 230 321 432 456 540 
61
82
94
2
10
4
24
432

Assuming that script file is called binSearch.js, data.txt is the file with input data, and both are in the same directory as Rhino, to run the script simply type

java -jar js.jar binSearch.js data.txt

Ideone You can simply achieve the same effect using online tools\, without installing anything on your computer. Ideone, online IDE & debugging tool allows you to run your scripts using Rhino or SpiderMonkey, another Mozilla's JS engine, this one written in C. You can edit your scripts in realtime and provide different inputs on every run. Good luck in FBHC!

Simple puzzle game

Internet is full of different programming frameworks. Nowadays you don't have to learn new language, you only need to know any friendly and easy to use framework and you can start your adventure with code.

I don't like that. I can't 'feel' the code when I use frameworks for everything. I got a feeling that it's no more mine - I just 'press a magic button' and some hard to understand and explain things happen. For sure - it's not serious to code huge project in pure code. But if it's your first contact with new programming language - try to explore it on your own. Try to understand what it's all about. And then feel free to use whatever you want - it's ok if you understand more or less what happens behind the scenes.

Today was my first serious attempt to create js game using something different than pure JavaScript. I choose jQuery because I made before a few projects using it. And here it is, a simple puzzle game like almost 10years old Clix. In few words, quoting www.javascriptgaming.com:

When you click a block (...) it and all neighbours that are the same color disappear. Gravity makes the blocks above fall down, creating new opportunities.

If a column is completely cleared, the remaining columns are moved closer together. When (...) the screen is all clear, the game is over. Points are awarded for clearing groups of blocks, the more blocks you remove in one click, the more points.

The only difference is that in my version there are new 'blocks' each 3 lvls. You have 11 levels of fun in FB version and unlimited in nonfacebook one (but there are only 5 types of 'mojito-blocks').


Try it on facebook (in Polish, click 'GRAJ' to play):
http://apps.facebook.com/modzajto/
or outside:
here.

Isometric Snake game for Facebook

During the weekend I went with my girlfriend to my countryside house. Anyway, I didn't want to waste my daily gamedeveloping time.
I created there simple snake game (days ago one of the most popular mobile game for Nokia cells) with isometric graphic. I modify sprites from one wikipedia graphic and use logic from my old Snake game.

Find VD SNAKE 3d on Facebook or simply try this link: http://apps.facebook.com/vd_snakeiso/. (My average result is 700points, what's yours:)?)
You can also become a fan of the game.