allegro.js tutorial

Getting started

allegro.js aims to be the easiest HTML5 thing around, but that doesn't mean you can get away without a bunch of tools to help you out. Firstly, you are going to need a text editor. Fancy new text editors support syntax highlighting, so that your code will look much prettier. For Windows I suggest Notepad++ as it's free and does the job. I don't know about Mac, but if you use Linux, you probably don't need a text editor suggestion. You will also need a browser, but you probably have that already. Most browsers have built-in developer tools under F12 button. Press F12 now to see if it works! Personally, I recommend Firefox browser with FireBug plugin for development.

Read on GitHub for cool syntax highlighting!

Setting up!

Making the magic happen

allegro.js draws stuff on a canvas, which is a html element like any other. Canvas is the white window that says 'Hello World!'. The yellowish box below that is our debug console. It is not needed for playing the games, but it helps a lot when making them. You can check if everything works correctly in real time thanks to that.

Now open game.js file in your editor. If you installed Notepad++, you can right-click it and select Edit with Notepad++ from the context menu.

var x = 100,y = 100;

function draw()
{
    textout(canvas,font,"Hello World!",x,y,24,makecol(0,0,0));
}

function update()
{

}

function main()
{
    enable_debug('debug');
    allegro_init_all("game_canvas", 640, 480);
    ready(function(){
        loop(function(){
            clear_to_color(canvas,makecol(255,255,255));
            update();
            draw();
        },BPS_TO_TIMER(60));
    });
    return 0;
}
END_OF_MAIN();

Adding an enemy

Killing the enemy

Weapon of mass splatting

Sounds of agony

Simple animation

Finishing touches

Finished product

After you are done, your code should look like this:

var buzz,splat,deaths,weapon,weapon2;
var miss,hit;
var x = 100,y = 100;

function draw()
{
    //textout(canvas,font,"Hello World!",x,y,24,makecol(0,0,0));
    simple_blit(deaths,canvas,0,0);
    draw_sprite(canvas,buzz,x,y);
    draw_sprite(canvas,(mouse_b ? weapon2 : weapon),mouse_x,mouse_y);
}

function update()
{
    x += rand()%5-2;
    y += rand()%5-2;
    if (mouse_pressed)
    {
        if (distance(x,y,mouse_x,mouse_y)<50)
        {
            rotate_sprite(deaths,splat,x,y,rand()%360);
            x = rand()%SCREEN_W;
            y = rand()%SCREEN_H;
            play_sample(hit);
        } else {
            play_sample(miss);
        }
    }
}

function main()
{
    enable_debug('debug');
    allegro_init_all("game_canvas", 640, 480);
    buzz = load_bmp('buzz.png');
    splat = load_bmp('splat.png');
    weapon  = load_bmp('weapon.png');
    weapon2  = load_bmp('weapon2.png');
    miss = load_sample("miss.mp3");
    hit = load_sample("hit.mp3");
    deaths = load_bmp("window.png");
    hide_mouse();
    ready(function(){
        loop(function(){
            clear_to_color(canvas,makecol(255,255,255));
            update();
            draw();
        },BPS_TO_TIMER(60));
    });
    return 0;
}
END_OF_MAIN();

The game

Read on the website to play the ready game!