2011 January | theburningmonk.com

Creating a sticky note app with HTML5, CSS3 and Javascript

I saw this tutorial the other day, it’s cool but I fancied taking it a step further and make it useful as an app rather than just a fancy way to show some structured data on the screen. Here’s a list of the features which I wanted to add:

being able to edit the title and content of the notes
being able to save all your notes
being able to add new notes
being able to delete notes you no longer want
randomize the colour of the notes more

HTML and CSS changes

I initially considered using the new contenteditable attribute in HTML5 to make the title and content editable, but settled on using textarea instead as it offers better support for multiple line text and you can easily add placeholder text as well as set a limit on the length of the title.

I added two images as buttons to add a new note and save the state of all the notes and put a a border around the notes to make them stand out a little more.

Here’s the updated HTML:

   1: <body>

   2:     <div id="controls">

   3:         <img id="btnNew" src="images/newnote.png"/>

   4:         <img id="btnSave" src="images/save.png"/>

   5:     </div>

6:

   7:     <ul id="notes">

   8:     </ul>

   9: </body>

And the CSS to go along with it:

* {
    maring: 0;
    padding: 0;
}

.hide {
    display: none;
}

body {
    font-size: 100%;
    margin: 15px;
    background: #666;
    color: #fff;
}

#controls img {
    width: 28px;
    height: 30px;
    background: rgba(0, 0, 0, 0);
}

#controls img:hover, #controls img:focus {
    -webkit-transform: scale(1.2);
      -moz-transform: scale(1.2);
      -o-transform: scale(1.2);
      position:relative;
}

ul, li {
    list-style: none;
}

ul {
    overflow: hidden;
    padding: 15px;
}

ul li {
    margin: 15px;
    float: left;
    position: relative;
}

ul li div {
    text-decoration: none;
    color: #000;
    background: #ffc;
    display: block;
    height: 150px;
    width: 150px;
    padding: 10px;
    -moz-box-shadow: 5px 5px 7px rgba(33, 33, 33, 1);
    -webkit-box-shadow: 5px 5px 7px  rgba(33, 33, 33, .7);
    box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
    -moz-transition: -moz-transform .15s linear;
    -o-transition: -o-transform .15s linear;
    -webkit-transition: -webkit-transform .15s linear;
    border-style: solid;
}

ul li div img {
    padding: 1px 3px;
    margin: 10px;
    position: absolute;
    top: 0;
    right: 0;
}

ul li textarea {
    font-family: 'Chewy', arial, sans-serif;
    background: rgba(0, 0, 0, 0); /* transparent background */
    resize: none;
    padding: 3px;
    border-style: none;
}

.note-title {
    font-size: 140%;
    font-weight: bold;
    height: 30px;
    width: 70%;
}

.note-content {
    font-size:120%;
    height: 100px;
    width: 95%;
}

ul li:nth-child(even) div {
  -o-transform:rotate(4deg);
  -webkit-transform:rotate(4deg);
  -moz-transform:rotate(4deg);
  position:relative;
  top:5px;
}

ul li:nth-child(3n) div {
  -o-transform:rotate(-3deg);
  -webkit-transform:rotate(-3deg);
  -moz-transform:rotate(-3deg);
  position:relative;
  top:-5px;
}

ul li:nth-child(5n) div {
  -o-transform:rotate(5deg);
  -webkit-transform:rotate(5deg);
  -moz-transform:rotate(5deg);
  position:relative;
  top:-10px;
}

ul li div:hover, ul li div:focus {
  -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
  box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
  position:relative;
  z-index:5;
}

/* define 3 different colours for the notes */
ul li div.colour1 {
    background: #ffc;
}
ul li div.colour2 {
    background: #cfc;
}
ul li div.colour3 {
    background: #ccf;
}

There’s a couple of things to note here:

the textarea element has a transparent background
the textarea element is not resizable
the textarea element has a placeholder text

Here’s what the page looks like now:

Adding interactions with Javascript

Adding a new note

In the CSS above, you can see that I had defined three CSS class:

   1: /* define 3 different colours for the notes */

   2: ul li div.colour1 {

   3:     background: #ffc;

   4: }

   5: ul li div.colour2 {

   6:     background: #cfc;

   7: }

   8: ul li div.colour3 {

   9:     background: #ccf;

  10: }

when we create a new note, all we need to do to randomize its colour is to add one of these classes to the element randomly.

Here’s the event handler for the ‘new’ image button:

$(document).ready(function() {
    notes = $("#notes"); // get references to the 'notes' list
    ...
    // clicking the 'New Note' button adds a new note to the list
    $("#btnNew").click(function() {
        addNewNote();
    });
    ...
});

//  adds a new note to the 'notes' list
function addNewNote(class, title, content) {
    // if class is not specified, use a random colour class
    if (!class) {
        class = "colour" + Math.ceil(Math.random() * 3);
    }

    // add a new note to the end of the list
    notes.append("<li><div class='" + class + "'>" +
                 "<textarea class='note-title' placeholder='Untitled' maxlength='10'/>" +
                 "<textarea class='note-content' placeholder='Your content here'/>" +
                 "<img class='hide' src='images/close.png'/>" +
                 "</div></li>");

    // get the new note that's just been added and attach the click event handler to its close button
    var newNote = notes.find("li:last");
    newNote.find("img").click(function() {
        newNote.remove();
    });

    // hook up event handlers to show/hide close button as appropriate
    addNoteEvent(newNote);

    // if a title is provided then set the title of the new note
    if (title) {
        // get the title textarea element and set its value
        newNote.find("textarea.note-title").val(title);
    }

    // if a content is provided then set the content of the new note
    if (content) {
        // get the content textarea element and set its value
        newNote.find("textarea.note-content").val(content);
    }
}

function addNoteEvent(noteElement) {
    noteElement.focus(function () {
        $(this).find(".img").removeClass("hide");
    }).hover(function() {
        $(this).find("img").removeClass("hide");
    }, function () {
        $(this).find("img").addClass("hide");
    });
}

as you can see, this event handler calls the addNewNote function which is responsible for adding a new note to the notes unordered list and sets its class, title or content depending on the arguments. In this particular usage it’ll pick one of the three colour classes randomly and add the class to the new note.

Once a note has been added, I then get a reference to it and create an event handler for its close button so that when its clicked it’ll remove this note from the DOM.

The addNoteEvent function is then charged with adding the focus and hover in/out event handlers to the note to show and hide the close button so that it’s only shown when the note is focused/hovered on.

Saving the notes

I have previously cover the use of HTML5’s local and session storage in this post already, what I’m doing here is very similar but a little more involved.

When the ‘save’ button is clicked, I need to inspect each of the notes and remember the class, title text (remember, you can’t get the text that’s been entered into the textarea by getting the HTML of the element) and content text in a bespoke object, the resulting array of objects is then JSON serialized using Douglas Crockford’s Json.js library. It this is JSON string that’s saved into the local storage.

On the other end, when the page has been loaded and the DOM event fired (i.e. when JQuery.ready fires) I will need to check if the JSON string is in the local storage, if it is, then deserialize the string back to an object array and add the notes back in in the same order:

var notes;
var count = 0;

$(document).ready(function() {
    notes = $("#notes"); // get references to the 'notes' list

    // load notes from local storage if one's available
    var storedNotes = localStorage.getItem("notes");
    if (storedNotes)
    {
        // passes the stored json back into an array of note objects
        var notesArray = JSON.parse(storedNotes);
        count = notesArray.length;

        for (var i = 0; i < count; i++) {
            var storedNote = notesArray[i];
            addNewNote(storedNote.Class, storedNote.Title, storedNote.Content);
        }
    }

    ...

    // clicking the 'Save' button saves the state of the notes board to the local storage                
    $("#btnSave").click(function() {
        var notesArray = new Array();

        // for each of the notes add a bespoke note object to the array
        notes.find("li > div").each(function (i, e) {
            // save the class attribute of the div, as well as the text for the title and content text areas
            var colourClass = $(e).attr("class");
            var title = $(e).find("textarea.note-title");
            var content = $(e).find("textarea.note-content");

            notesArray.push({ Index: i, Title: title.val(), Content: content.val(), Class: colourClass });
        });

        // json encode it
        var jsonStr = JSON.stringify(notesArray);

        // and save the json string into local storage
        localStorage.setItem("notes", jsonStr);

        // info the user it's done
        alert("Notes saved");
    });

    // add a note to the list if there aren't any
    if (count == 0)
    {
        $("#btnNew").click();
    }
});

Demo

You can try out the full demo at:

http://stickynote.theburningmonk.com

or using the short link:

http://LNK.by/fhbba

Enjoy!

UPDATE 27/02/2011:

Thanks to Joey Beechey for pointing out to me in the comment that the demo doesn’t work in Safari and after a bit of digging I found that the problem is with the addNewNote function which has a parameter named ‘class’ which is a reserved word. I found another reference of this problem here too, which mentions the same problem but with the variable name ‘abstract’ instead!

I’ve also put the whole thing into a zip file which you can download from here, so feel free to play around with it yourself!

References:

Douglas Crockford’s JSON-js project on github

John Resig’s blog post which includes some handy examples on how to use the JSON-js library

Original tutorial which inspired this blog post

Working with S3 folders using the .Net AWS SDK

If you’ve been using S3 client in the AWS SDK for .Net you might have noticed that there are no methods that let you interact with the folders in a bucket. As it turns out, S3 does not support folders in the conventional sense*, everything is still a key value pair, but tools such as Cloud Berry or indeed the Amazon web console simply uses ‘/’ characters in the key to indicate a folder structure.

This might seem odd at first but when you think about it, there are no folder structure on your hard drive either, it’s a logical structure the OS provides for you to make it easier for us mere mortals to work with.

Back to the topic at hand, what this means is that:

if you add an object with key myfolder/ to S3, it’ll be seen as a folder
if you add an object with key myfolder/myfile.txt to S3, it’ll be seen as a file myfile.txt inside a myfolder folder, if the folder object doesn’t exist already it’ll be added automatically
when you make a ListObjects call both myfolder/ and myfolder/myfile.txt will be included in the result

Creating folders

To create a folder, you just need to add an object which ends with ‘/’, like this:

public void CreateFolder(string bucket, string folder)
{
    var key = string.Format(@"{0}/", folder);
    var request = new PutObjectRequest().WithBucketName(bucket).WithKey(key);
    request.InputStream = new MemoryStream();
    _client.PutObject(request);
}

Here is a thread on the Amazon forum which covers this technique.

Listing contents of a folder

With the ListObjects method on the S3 client you can provide a prefix requirement, and to get the list of objects in a particular folder simply add the path of the folder (e.g. topfolder/middlefolder/) in the request:

var request = new ListObjectsRequest().WithBucketName(bucket).WithPrefix(folder);

If you are only interested in the objects (including folders) that are in the top level of your folder/bucket then you’d need to do some filtering on the S3 objects returned in the response, something along the line of:

// get the objects at the TOP LEVEL, i.e. not inside any folders
var objects = response.S3Objects.Where(o => !o.Key.Contains(@"/"));

// get the folders at the TOP LEVEL only
var folders = response.S3Objects.Except(objects)
                      .Where(o => o.Key.Last() == '/' &&
                                  o.Key.IndexOf(@"/") == o.Key.LastIndexOf(@"/"));

Having fun with HTML5 — Canvas, part 5

In part 4, I put together the foundations for a mini shooting game, with targets moving on the screen and you can ‘hit’ them by clicking inside the targets, etc. etc. I promised an update to make it feel more like a game, so here it is!

Adding a background

The black background was more than a little dull so I had a look around for some freely available images, and to apply them I had two simple choices:

draw the image onto the main canvas on each frame
use the image as background to the canvas

I opted for the latter as it seems more efficient, it does mean that I need to change the way I’m clearing the canvas for each frame though. In part 1 of this series I mentioned that by setting the width or height of the canvas element you can erase the contents and reset all the properties of its drawing context, which seems to fit the bill of what I’m trying to do here.

The clear function is therefore changed to:

   1: // clear the canvas page

   2: function clear() {

   3:     // reset the canvas by resizing the canvas element

   4:     canvasElement.width = canvasElement.width;

   5: }

Limit the number of Shots

To make the game more challenging (having an unlimited number of shots is just too easy), I decided to add a limit on the number of shots you can have and after you’ve used up all of them it’s effectively game over.

To show how many shots you have left, I want to show a number of bullets in the top left corner and depending on the number of shots you have left the bullets are shown differently:

Five shots or less and you will see a bullet for each
More than five shots and you will see a bullet followed by the words x N where N is the number of shots left
If no restriction on the number of shots (for time attack mode for instance), you see an infinity sign next to a bullet

To facilitate these requirements, I need to be able to track the number of shots left and decrement its value every time you click inside the canvas element. Thankfully, the structure is there already, just need some small modifications:

// first declare a new global variable
/* GLOBAL VARIABLES */
var WIDTH,              // width of the canvas area
    HEIGHT,             // height of the canvas area
    ...
    bullets,            // how many shots left
    ...

// then add some more steps to the mousedown handler
$("#canvas").mousedown(function (mouseEvent) {
    // ignore if no more bullets left!
    if (bullets <= 0) {
        return;
    }

    // hit test and add message, etc.
    ...

    // deduct the number of shots left if a cap is defined
    if (bullets != undefined) {
        bullets--;
    }
});

Then I need to take care of the business of actually showing them on the screen, luckily it wasn’t too hard to create a basic bullet looking image and an infinity symbol. To make it easier to use them over and over in my code, I added two <img> elements to the HTML (along with a third which I will explain later) but they’ll be hidden:

   1: <div class="hide">

   2:     <img id="target" src="images/target.png"/>

   3:     <img id="bullet_target" src="images/bullet_target.png"/>

   4:     <img id="bullet" src="images/bullet.png"/>

   5:     <img id="infinity" src="images/infinity.png"/>

   6: </div>

Back to the Javascript code, there needs to be an extra step in the draw function to add the bullets to the scene. To encapsulate that logic I pulled it out into its own function:

// redraw the target boards on the canvas
function draw() {
    // as before
    ...

    // then the bullets
    drawBullets();
}

// draw the bullets onto the top left hand corner
function drawBullets() {
    // don't proceed any further if no more bullets left
    if (bullets <= 0) {
        return;
    }

    // define basica X and Y offsets
    var offsetX = 10, offsetY = 10;

    // draw the first bullet
    context.drawImage(bulletElement, offsetX, offsetY);
    offsetX += bulletElement.width;

    if (bullets == undefined) {
        // draw the infinity sign next to the bullet with some padding
        context.drawImage(infinityElement, offsetX + 5, offsetY + 5);
    } else if (bullets > 5) {
        context.textBaseline = "top";
        context.textAlign = "start";
        context.fillStyle = "orange";
        context.font = "bold 40px arial";

        // draw a count next to the bullet, e.g. "x10"
        context.fillText("x"+bullets, offsetX + 5, offsetY);
    }
    else {
        // otherwise, draw the remaining bullets
        for (var i = 1 ; i < bullets; i++) {
            context.drawImage(bulletElement, offsetX, offsetY);
            offsetX += bulletElement.width;
        }
    }
}

And these are the results:

Looks the part, if I might say so myself :-)

Using a Custom Cursor

Though a good approximate, the crosshair cursor just isn’t quite up to the task here, a scope-like cursor is needed here, like the one I created here:

(if you’re interested in how I made the cursor, I used Axialis CursorWorkshop which makes the task simple)

All that’s left is to replace the crosshair cursor in CSS, but still keeping it as fallback:

   1: #canvas

   2: {

   3:     cursor: url(../cursors/scope.cur), crosshair;

   4:     background: url(../images/canvas_background.jpg);

   5: }

A similar change needs to be applied to the HTML:

   1: <canvas id="canvas" class="block" width="800" height="700"

   2:         onSelectStart="this.style.cursor='url(cursors/scope.cur), crosshair'; return false;"/>

After that you’ll start seeing the new cursor when you run the game.

Adding a Bullet Target

Thanks to my wife Yinan for giving me the idea of having bonus targets which are harder to hit but give you extra bullets when they’re hit. You have already seen the HTML changes earlier, and probably noticed that I have switched to using an image rather than drawing the regular target boards by hand..

Much of the changes to support a different type of target happened in the Javascript code, namely the Target class, which is now extended by a new BulletTarget class:

// define the Target 'class' to represent an on-screen target
var Target = new Class({
    initialize: function (x, y, radius, dx, dy) {
        // same as before
        ...

        // hit the target!
        this.hit = function () {
            deleteTarget(_id);
        };
    }
});

// a target which awards the player with an extra bullet when hit
var BulletTarget = new Class({
    Extends: Target,
    initialize: function (x, y, radius, bonusBullets, dx, dy) {
        var _bonusBullets = bonusBullets;

        // initialize Target's properties
        this.parent(x, y, radius, dx, dy);

        this.getBonusBullets = function () {
            return _bonusBullets;
        }

        // override the draw function to draw the bullet target instead
        this.draw = function () {
            context.drawImage(bulletTargetElement, this.getX(), this.getY(), radius*2, radius*2);
        };

        // override the hit function to the player some bullets back 
        this.hit = function () {
            bullets += _bonusBullets;
            deleteTarget(this.getId());
        }
    }
});

The logic of removing a target from the targets array is now moved out of the Target class and the code which generates targets during initialization has also changed to generate a bullet target by a configurable chance:

/* GLOBAL VARIABLES */
var WIDTH,              // width of the canvas area
    HEIGHT,             // height of the canvas area
    ...
    targetElement,      // the target img element
    targetRadius = 50,  // the radius of the regular targets
    bulletTargetElement,        // the bullet target img element
    bulletTargetRadius = 30,    // the radius of the targets with bullet bonus
    bulletTargetBonus = 3,      // the number of extra bullets for hitting a bullet target
    bulletTargetChance = 0.1,   // the chance of getting a bullet target
    ...

// function to delete the target with the specified ID
function deleteTarget(id) {
    for (var i = 0; i < targets.length; i++) {
        var target = targets[i];

        if (target.getId() == id) {
            targets.splice(i, 1);
            break;
        }
    }
}

// Add targets to the game
function createTargets() {
    for (var i = 0; i < 10; i++) {
        if (Math.random() < bulletTargetChance) {
            targets[i] = new BulletTarget(0, 0, bulletTargetRadius, bulletTargetBonus);
        } else {
            targets[i] = new Target(0, 0, targetRadius);
        }
    }
}

Demo

The full demo can be found here, hope you like it, I’ll be adding even more features in the near future so come back later if you’re interested in seeing how far this little game can go!

Having fun with HTML5 — Canvas, part 1

Having fun with HTML5 — Canvas, part 2

Having fun with HTML5 — Canvas, part 3

Having fun with HTML5 — Canvas, part 4

Following on from part 3 where we basically made a little app that lets you scribble with HTML5’s canvas element, let us push on and see what else we can achieve with the canvas element.

The logical next step would be to made animations, and give you a way to interact with the animation. So how about a little game that lets you shoot moving targets like those classic Point Blank games? Hands up who’s up for that?

Good good, that’s decided then! :-)

To Start Off..

First, we’ll need a simple HTML page, something like my previous demos would do:

   1: <div id="wrapper">

   2:     <h1>HTML5 Canvas Demo</h1>

   3:     <h3>Shoot 'em!</h3>

   4:     <aside id="message"></aside>

5:

   6:     <div class="hide">

   7:         <canvas id="target" width="101" height="101" class="hide"/>

   8:     </div>

9:

  10:     <div class="block">

  11:         <canvas id="canvas" class="block" width="800" height="700"

  12:                 onSelectStart="this.style.cursor='crosshair'; return false;"/>

  13:     </div>

  14: </div>

Nothing fancy here, the CSS for this page is also pretty basic too, the only thing worth noting is that to get the crosshair cursor inside the canvas I included this in my CSS:

   1: #canvas

   2: {

   3:     cursor: crosshair;

   4: }

The onSelectStart line in the canvas HTML is to ensure that the crosshair cursor is used when you click and hold inside the canvas element.

You might have also noticed that I had specified two canvas elements in the HTML, this is to simplify the task of drawing moving targets onto the main canvas. With the 2D context object’s drawImage function, you can draw an img, canvas, or video element so I can draw the target onto the target canvas during initialization and then reuse it in the main canvas.

Drawing the Target board

Next, I need to draw the target boards, and make them look like this, but without the score on the rings:

(Why not just use an image? Because where’s the fun in that! ;-) )

As you can imagine, we can create a target board looking like this by drawing 6 circles, with the innermost 2 circles having roughly half the radius of the other 4 and the outermost 2 circles having the inversed fill/stroke colour combination. Expand the below section to see the initializeTargetCanvas function which takes a canvas element and draws a target board in inside it:

// Draws the target canvas
function initializeTargetCanvas(element) {
    var baseX = 1.5, baseY = 1.5;

    // get the width and height of the element
    var width = (element.width - baseX * 2) / 2,
        height = (element.height - baseY * 2) / 2;

    // work out the necessary metrics to draw the target
    var radius = Math.min(width, height),
        centreX = baseX + radius,
        centreY = baseY + radius,
        ringWidth = radius / 10;

    // get the 2D context to start drawing the target!
    var context = element.getContext("2d");
    context.lineWidth = "2";

    // define function to draw a ring
    var drawRing = function (strokeStyle, fillStyle, ringRadius) {
        context.strokeStyle = strokeStyle;
        context.fillStyle = fillStyle;

        // draw the circle
        context.beginPath();
        context.arc(centreX, centreY, ringRadius, 0, Math.PI * 2, true);
        context.closePath();

        context.stroke();
        context.fill();
    };

    // draw the rings for each score
    drawRing("#000", "#FFF", radius);
    drawRing("#000", "#FFF", radius -= (ringWidth * 2));
    drawRing("#FFF", "#000", radius -= (ringWidth * 2));
    drawRing("#FFF", "#000", radius -= (ringWidth * 2));
    drawRing("#FFF", "#000", radius -= (ringWidth * 2));
    drawRing("#FFF", "#000", radius -= ringWidth);
}

Animating the Target Boards

Being able to draw an already created target board onto the canvas page is one thing, but how do I animate them using the canvas? Having looked at a few other examples it seems the common way to do animation with the canvas is to simply clear the canvas and redraw the contents on a regular interval. This seems a little low level and requires a bit of plumbing but I’m sure it won’t be long (if not already) before some good, solid frameworks emerge to make these tasks easier.

For now though, let me illustrate how you might create this frame by frame animation yourself.

If you separate the responsibilities of the app, broadly speaking you end up with:

a View – i.e. the canvas element, responsible for displaying the targets
a Model – the objects representing the targets in the scene, responsible for keeping track of their current position, etc.

If you’ve dealt with any sort of MVC/MVP/MVVM pattern then this kind of separation of duty should be familiar to you already. On each frame (or if you prefer, every time the setInterval delegate function gets invoked), you update the position of the targets in the model, then redraw the targets onto the canvas to reflect their updated positions:

This is all you need to do to create a basic animation. So in my case, I need a simple Target object to keep track of:

X, Y coordinates of the top left hand corner of the target
the radius of the target
the direction and speed (per frame) it’s moving at

using MooTools here’s the class I arrived at this Target ‘class’:

/* GLOBAL VARIABLES */
var WIDTH,              // width of the canvas area
    HEIGHT,             // height of the canvas area
    …
    targets = new Array(),  // the live targets
    targetId = 0,        // the current target ID
    …

// define the Target 'class' to represent an on-screen target
var Target = new Class({
    initialize: function (x, y, radius, dx, dy) {
        var _id, _x, _y, _radius, _dx, _dy, is;

        _id = targetId++;

        // the X and Y coordinate of the top left corner
        _x = x;
        _y = y;

        // the radius of the target
        _radius = radius;

        // the rate of movement in the X and Y direction
        if (dx) {
            _dx = dx;
        } else {
            _dx = Math.ceil(Math.random() * 10);
        }
        if (dy) {
            _dy = dy;
        } else {
            _dy = Math.ceil(Math.random() * 10);
        }

        // getters
        this.getId = function () {
            return _id;
        }

        this.getX = function () {
            return _x;
        };

        this.getY = function () {
            return _y;
        };

        this.getRadius = function () {
            return _radius;
        };

        // move the target to its position for the next frame
        this.move = function () {
            _x += _dx;
            _y += _dy;

            // change direction in X if it 'hits' the border
            if ((_x + _radius * 2) >= WIDTH || _x <= 0) {
                _dx *= -1;
            }

            // change direction in Y if it 'hits' the border
            if ((_y + _radius * 2) >= HEIGHT || _y <= 0) {
                _dy *= -1;
            }
        };

        // draws the target on the canvas
        this.draw = function () {
            context.drawImage(targetElement, _x, _y);
        };

        // hit the target!
        this.hit = function () {
            for (var i = 0; i < targets.length; i++) {
                var target = targets[i];

                if (target.getId() == _id) {
                    targets.splice(i, 1);
                    break;
                }
            }
        };
    }
});

The draw function, which is invoked at regular intervals, first clears the canvas (by filling it with the background colour) then goes through all the targets in the targets array and updates their location and then draw them onto the canvas:

// clear the canvas page
function clear() {
    context.fillStyle = "#000";
    context.fillRect(0, 0, WIDTH, HEIGHT);
}

// redraw the target boards on the canvas
function draw() {
    // clear the canvas page first
    clear();

    for (var i = 0; i < targets.length; i++) {
        targets[i].move();
        targets[i].draw();
    }
}

This will give you the basic animation loop, here’s how it looks with 10 moving targets on screen at the same time:

Adding Interactions

Now that the animations are in place, let’s add some player interactions. The interactions I’m after here is simple, click in the canvas and knock out any (can be one or more) target that’s clicked on.

I’ve already gone over the process of calculating the coordinates of the click in respect to the canvas in a previous blog post here, this is what that code looks like:

   1: // works out the X, Y position of the click INSIDE the canvas from the X, Y

   2: // position on the page

   3: function getPosition(mouseEvent, element) {

   4:     var x, y;

   5:     if (mouseEvent.pageX != undefined && mouseEvent.pageY != undefined) {

   6:         x = mouseEvent.pageX;

   7:         y = mouseEvent.pageY;

   8:     } else {

   9:         x = mouseEvent.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;

  10:         y = mouseEvent.clientY + document.body.scrollTop + document.documentElement.scrollTop;

  11:     }

12:

  13:     return { X: x - element.offsetLeft, Y: y - element.offsetTop };

  14: }

If I can work out where you’ve clicked in the canvas’ coordinate system, then I can simply run a hit test against each moving target and compare the distance between the click and the centre of the target and the target’s radius:

If the distance is smaller or equal to the radius then the click happened INSIDE the target and therefore it’s a hit, otherwise it’s a miss. Sounds reasonable enough? Here’s the code that takes a position (a simple object with X and Y position of the click inside the canvas’ coordinate system) and return the targets it has hit:

// check if the player managed to hit any of the live targets
function hitTest(position) {
    var hitTargets = new Array();

    // check if the position is within the bounds of any of the live targets
    for (var i = 0; i < targets.length; i++) {
        var target = targets[i];

        var targetCentreX = target.getX() + target.getRadius(),
            targetCentreY = target.getY() + target.getRadius();

        // work out the distance between the position and the target's centre
        var xdiff = position.X - targetCentreX,
            ydiff = position.Y - targetCentreY,
            dist = Math.sqrt(Math.pow(xdiff, 2) + Math.pow(ydiff, 2));

        // if that distance is less than the radius of the target then the
        // position is inside the target
        if (dist <= target.getRadius()) {
            hitTargets.push(target);
        }
    }

    return hitTargets;
}

To hook this up, I added an event handler to the mousedown event on the canvas during initialization:

$("#canvas").mousedown(function (mouseEvent) {
    // get the coordinates of the click inside the canvas
    var position = getPosition(mouseEvent, this);

    // find out which targets were hit
    var hitTargets = hitTest(position);

    // hit the targets
    for (var i = 0; i < hitTargets.length; i++) {
        hitTargets[i].hit();
    }
}

And now, when you ‘hit’ a target it’ll be removed from the array of moving targets and therefore won’t be drawn again when the canvas is refreshed in the next frame.

Adding Notifications

Finally, for this first-pass implementation of a mini-shooting game, I’d like to add some notifications to tell you when you’ve hit something, or when you’ve missed completely!

This is slightly trickier than the targets as the messages should not stay around forever until some user-triggered action, instead it should be shown for a given amount of time (or frames). To facilitate this requirement, I created another ‘class’ called Message:

// define the Message 'class' to represent an on-screen message
var Message = new Class({
    initialize: function (x, y, message, duration) {
        var _id, _x, _y, _message, _duration;

        _id = messageId++;

        // X, Y coordinates of where to display the message
        _x = x;
        _y = y;

        // the message
        _message = message;

        // how many frames to display the message for
        _duration = duration;

        this.getId = function () {
            return _id;
        }

        this.draw = function () {
            if (_duration >= 0) {
                context.textBaseline = "middle";
                context.textAlign = "center";
                context.fillStyle = "#FFF";
                context.strokeStyle = "#000";
                context.font = "bold 40px arial";

                // draw the message at the specified X, Y coordinates
                context.fillText(_message, _x, _y);

                _duration--;
            } else {
                // remove the message
                for (var i = 0; i < messages.length; i++) {
                    var message = messages[i];

                    if (message.getId() == _id) {
                        messages.splice(i, 1);
                        break;
                    }
                }
            }
        }
    }
});

The Message objects can only been drawn a number of times, after which it will remove itself from the array of messages currently being displayed.

To make it a bit more interesting, I defined a number of messages which will be displayed depending on how many targets you’ve managed to hit at once:

   1: // define the messages to show

   2: var hitMessages = new Array();

   3: hitMessages[0] = "MISS";

   4: hitMessages[1] = "HIT!";

   5: hitMessages[2] = "DOUBLE HIT!!";

   6: hitMessages[3] = "HAT-TRICK!!!";

   7: hitMessages[4] = "UN~BELIEVABLE!!!!";

   8: hitMessages[5] = "OH MY GOSH!!";

On the mousedown event handler (see above) I added these couple of lines to push a new message to the messages stack to be displayed for 30 frames, and the message is determined by how many targets was hit:

   1: // use one of the defined messages if possible, otherwise use a default

   2: var hitMessage = hitMessages[hitTargets.length];

   3: if (hitMessage == undefined)

   4: {

   5:     hitMessage = "TOO GOOOOOOOOD..";

   6: }

7:

   8: messages.push(new Message(position.X, position.Y, hitMessage, 30));

For example, if you managed to hit three targets one shot:

Pretty neat, eh? :-)

Demo

Here is the full demo, over the next couple of days, I will polish it up and add some more features to make it feel more gamey and post another update. In the mean time though, feel free to play around with it and let me know of any suggestions you have on how to improve it!

References:

HTML5 canvas cheat sheet

Dive into HTML5 – peeks, pokes and pointers

Having fun with HTML5 — Canvas, part 1

Having fun with HTML5 — Canvas, part 2

Having fun with HTML5 — Canvas, part 3

Having fun with HTML5 — Canvas, part 5

A year in the cloud with AWS

Time really does fly when you’re having fun! In a blink of the eye it’s been a whole year since I left Credit Suisse to start a career making social games with IwI. All and all, it’s been a year filled with lots of hard work, lots of learning and honestly, a hell of a lot of fun! The great thing about doing something completely different is that you get to learn about a new stack of technologies to tackle an altogether different set of challenges, and in the end I believe it has made me a better developer.

One of those new technologies which I’ve had to get used to is Amazon Web Services (AWS), Amazon’s cloud computing solution, which I will give an account of my personal experiences of working close with it during this past year.

By now you’ve probably heard plenty about cloud computing already (well chances are one of the providers have tried to sell their service to you already!), so I won’t bore you with those vague marketing tagline (well, I got nothing to sell here anyway :-P) and wonderful stories of how company XYZ made a move to the cloud and are now able to serve millions more customers whilst paying peanuts to run their servers.

Well.. truth is, things aren’t always rosy and there had been several high profile disasters which resulted in companies losing credibility or in extreme cases, their entire business..(that’s what losing your entire database cluster does to you when you haven’t got adequate backup…). So there are new risks involved and new challenges which need to be tackled.

AWS vs other cloud solutions

Whilst all my experience with cloud computing has been with AWS so I won’t comment on the pros and cons of other cloud solutions, but from my understanding of Microsoft’s Azure and Google’s AppEngine services they have a very different model to that of AWS.

Azure and AppEngine’s model is best described as platform-as-a-service where you develop your code against a SDK supplied by Microsoft or Google which allows you to make use of their respective SQL/NoSQL solutions, etc. Deployments are usually easy and the service will manage the number of instances (servers) needed to run your application to meet the current demand for you whilst letting you set a max/min cap on the number of instances so that your cost doesn’t spiral out of control.

One the other hand, Amazon’s model is infrastructure-as-a-service which is basically the same as older virtual machine technology but with lots of additional knots and bots such as automated provisioning, auto scaling, automated billing, etc. You have the ability to create new machine images from existing instances to use to spawn new instances and you can use the instances for pretty much all intents and purposes, e.g. web servers, MySQL server, cache cluster, etc. after all they’re just virtual machines.

In contrast to Azure and AppEngine’s model, AWS’s model gives you more flexibility and control but at the same time requires you to do a little bit more work to get going and take on the role of an IT pro as well as a developer.

Vendor Lock-in

Possibly the biggest complaint and worry people have about migrating to the cloud is that you are locked in with a particular vendor. Whilst that’s true, but given the current affairs and the way things are seemingly going, I’d say fears of the likes of Microsoft, Google or Amazon going bust and therefore their respective cloud services going up in smokes is.. well.. a little extreme.

It’s harder to move away from the Azure and AppEngine given that everything you’ve coded are against a particular set of SDK but with AWS’s infrastructure-as-a-service model it’s possible to migrate out of it with too much hassle. In fact, Zynga uses AWS as incubation chamber for their new games and allow them to monitor and learn about the hosting requirements for a new game in its turbulent early days (well they literally go from hundreds to millions of users in the matter of days so you can imagine…) before moving the game into their own data centres once the traffic stabilises.

Pricing

In terms of pricing, there’s little that separates the three providers I’ve mentioned here, in fact, the last time I looked, the equivalent instances in Azure costs the equivalent amount as their AWS counterpart so clearly the market research divisions have been working hard to know exactly what their competitors have been up to :-P

Maturity

Having been released in 2006, AWS is one of the if not the oldest cloud service out there and even then it’s still barely four years old and still a little rough around the edges (they don’t call it cutting edge for no reason I suppose). It has steadily improved both in terms of feature as well as tooling and there is an active community out there building supplementary tools/frameworks for it in different languages. I also find that the documentations Amazon provides are in general up-to-date and useful.

Popularity

Much to my surprise, I found out at a recent cloud computing conference that none of Microsoft, Google or Amazon made the list of top 3 cloud computing service providers. Instead, SalesForce.com made number one and I can’t remember who the other two providers are…sorry..

Services

AWS offers a whole ecosystem of different services which should cover most aspects of a given architecture, from service hosting to data storage, messaging, they even recently announced a new DNS service called Route 53!

There’s a quick run down of the three most important services which AWS offers:

Elastic Cloud Computing (EC2)

EC2 forms the backbone of Amazon’s cloud solution, its key characteristics include:

you pay for what you use at a per instance per hour rate
you pay for the amount of data transfers in and out of Amazon EC2 (data transfer between Amazon EC2 and other Amazon Web Services in the same region is free)
there are a number of different OS’s to choose from including Linux and Windows, Linux instances are cheaper to run without the license cost associated with Windows
there are a good range of different instance types to choose from, from the most basic (single CPU, 1.7GB ram) to high performance instances (22 GB ram, 2 x Intel Xeon X5570, quad-core Nehalem, 2 x NVIDIA Tesla Fermi M2050 GPUs)
a basic instance running windows will cost you roughly $3 a day to run non-stop
default machine images are regularly patched by Amazon
once you’ve set up your server to be the way you want, including any server updates/patches, you can create your own AMI (Amazon Machine Image) which you can then use to bring up other identical instances
there’s a Elastic Load Balancing service which provides load balancing capabilities at additional cost (though most of the time you’ll only need one)
there’s a Cloud Watch service which you can enable on a per instance basis to help you monitor the CPU, network in/out, etc. of your instances, this service also has its own cost
you can use the Auto Scaling service to automatically bring up or terminate instances based on some metric, e.g. terminate 1 instance at a time if average CPU utilization across all instances is less than 50% for 5 minutes continuously, but bring up 1 new instance at a time if average CPU goes beyond 70& for 5 minutes
you can use the instances as web servers, DB servers, Memcached cluster, etc. choice is yours
round trips within Amazon is very very fast, but trips out of Amazon are significantly slower, therefore the usual approach is to use Amazon SimpleDB (see below) or Amazon RDS as the Database (should you need one that is)
AmazonSDK is pretty solid and contains enough classes to help you write some custom monitoring/scaling service if you ever need to but the AWS Management Console (see lower down) lets you do most basic operations anyway

SimpleDB

Amazon’s NoSQL database, it is a non-relational, distributed, key-value data store, its key characteristics include:

compared to traditional relational Databases it has lower per-request performance, typical 15-20ms operations tend to take anything between 75-100ms to complete
in return, you get high scalability without having to do any work
you pay for usage – how much work it takes to execute your query
you start off with a single instance hosting your data, instances are auto scaled up and down depending on traffic, there’s no way to change the number of Database instance to start off with
supports a SQL-like querying syntax, though still fairly limited
for .Net, MindScape’s SimpleDB Management Tools is the best management tool we’ve used, it integrates directly into Visual Studio and at $29 a head it’s not expensive either
most performing when traffic increases/decreases steadily, there’s a noticeable slump in response times when there’s a sudden surge of traffic as new instances takes around 10–15 mins to be ready to service requests
data are partition into ‘domains’, which are equivalent to tables in a relational Database
data are non-relational, if you need a relational model then use Amazon RDS, I don’t have any experience with it so not the best person to comment on it
be aware of ‘eventual consistency’, data are duplicated on multiple instances after Amazon scales up your database to meet the current traffic, and synchronization is not guaranteed when you do an update so it’s possible though highly unlikely to update some data then read it back straight away and get the old data back
there are ‘consistent read’ and ‘conditional update’ mechanisms available to guard against the eventual consistency problem, if you’re developing in .Net, I suggest using SimpleSavant client to talk to SimpleDB, it’s a fairly feature-complete ORM for SimpleDB which already supports both consistent reads and conditional updates

Simple Storage Service (S3)

Amazon’s storage service, again, extremely scalable, and safe too – when you save a file to S3 it’s replicated across multiple nodes so you get some DR ability straight away. Many populate services such as DropBox uses it behind the scene and it’s also the storage of choice for many image hosting services. Key characteristics include:

you pay for data transfer in and out (data transfer between EC2 and S3 in the same region is free)
files are stored against a key
you create ‘buckets’ to hold your files, and each bucket has a unique URL (unique across all of Amazon, and therefore S3 accounts)
there’s a Cloud Front service for content delivery, data are cached on the first request and therefore speeds up subsequent requests from the same region
CloudBerry S3 Explorer is the best UI client we’ve used in Windows
you can use the AmazonSDK to write you own repository layer which utilizes S3

These are the three core services which most people use AWS for, but there are other useful services which I haven’t mentioned yet, such as the Simple Queue Service (SQS) and Elastic MapReduce, but those are more for edge cases.

Cost

Lower cost of entry

The great thing about the pay-as-you-go pricing model for cloud computing solutions in general is that as a small start-up, or even individuals, you can have the capability to serve millions of customers right from the word go without having to invest heavily up front on infrastructure and hardware. This serves to lower the cost of entry and therefore the risk involved, which consequently encourages innovations.

Diminishing value of renting

However, drawing analogies from car rentals, if you only need a car occasionally it makes much more economic sense to simply rent whenever you need one, but as your needs increases there comes a point when it becomes cheaper to actually own a car out right. The same can be said of the cost of running all your services out of AWS, especially for high performance instances required to run a Database for example, see below screenshots for some examples of the available instance types and corresponding cost of renting by the hour:

Reserving instances

In addition to the standard ‘pay for what you use’ model, Amazon also offers discounts when you reserve an instance for 1 or 3 year terms for a one-time fee, after which the instance is reserved for you.

So one way to cut your costs is to reserve the minimum number of instances you will need to run constantly based on the minimum usage of your service and supplement them with spot instances you request dynamically to cope with spikes in traffic.

Using EC2 as a supplement

Some companies such as Zynga uses a similar approach, where they run majority of their services out of their own data centres but uses EC2 instances to supplement that and help them cope with surges in traffic.

This approach however, doesn’t apply to vendors which uses a platform-as-a-service model (e.g. Azure and AppEngine) because you are more tightly locked in with the specific vendor and can’t simply run part of your service outside of their platform. For example, if you’ve developed your application to use Azure, you won’t be able to run your application out of your own servers because Azure as a platform is only provided by Microsoft.

Be ware of the additional costs

When it comes to estimating your cost, it’s easy to forget about all the other small charges you incur, such as the cost of data transfers, which whilst fairly cheap but depending on your usage can easily build up and eclipse the cost of running the virtual servers. Take a flash game for example, the game and relevant assets etc. can easily amount to a few megabytes. This on its own is nothing, but multiply that by 500k, 1 million, 2 million, 10 million users, and then multiply by the number of updates/patches which requires the users to download the package again, and soon you just might be looking at a rather sizable bill in relation to your data transfers..

Add to that the cost of other peripheral services such as Cloud Watch or Load Balancing, etc. etc. which are all perfectly reasonable by any means, but they all add up in the end.

It’s possible to mitigate some of these additional cost, for example, you could make use of the Cloud Front service to reduce the amount of data transfers from S3 (data is cached after the first request in a given region), or better still you can architect your application so that it only loads resources at the time when they’re required but obviously this adds to the complexity of your application and can also complicate the deployment process.

Web Console

The standard AWS Management Console (see image below) is good if unspectacular, and doesn’t cover the full range of the services Amazon provides. There are also some important features missing too, for instance, in order to talk to the Auto Scaling service to adjust the scaling parameters (change max number of instances from 10 to 5), you have to either download and use a command line tool or use the Amazon SDK, or build some UI around it to make life easier for yourselves as we did.

There are other vendors such as RightScale which provides you with better tooling to help you manage/automate a lot of the work you have to otherwise do yourself, but they usually have pretty steep pricing and doesn’t represent great value for money for a small startup looking to get up and running cheaply. You know, the sort of folks that are attracted by cloud computing’s low cost entry point.. wait a minute…

Reliability

The well goes deep…

I read an interesting story not long ago about the attempted Distributed DOS attack on Amazon the Anonymous collective of online protesters tried to pull off (in protest of Amazon cutting WikiLeaks loose) after successful attempts on several other high profile sites. The attacked ended in failure as the organizers admitted that Amazon was too hard a nut to crack, so clearly the well is deep enough for all of us, and some more!

Outages and Performance Drops

Over the last year there had been several outages but they were all resolved fairly quickly, but there had been several instances where the performance (in terms of response time and/or number of timed-out requests) had noticeably dropped for both SimpleDB and S3.

When you request a new EC2 instance, you have to specify which availability zone the instance should be spawned in, but for services such as SimpleDB you don’t have this control and new instances are always spawned in the default availability zone for your current region.

For instance, if your current region is US East (N. Virginia) the default availability zone is us-east-1a, and everyone who requests EC2 instances without changing the default availability zone will be using the same zone and therefore likely to cause a lot of congestion in that zone and affect other services such as SimpleDB. There’s even been several times when we simply weren’t able to scale up our application because the us-east-1a availability zone had no spare capacity!

It’s very important to build in lots of fault tolerance into your application when you’re using AWS, you should also avoid (where possible) using the default availability zones for your EC2 instances as they tend to be the most likely to congest.

NOTE: as I mentioned before about data transfer costs, data transfers between different availability zones in the same region are free, so there’s no need to worry about incurring extra costs by having your EC2 instances running in a different availability zone to that of SimpleDB/S3.

Bug Reporting

Being a rapidly and constantly evolving platform, it’s no surprise that there had been the odd bugs that have been introduced as the result of an update, e.g. for a little while no one was able to remote desktop to any instance whose public IP starts with 50, e.g. 50.0.0.0…

There is an active discussion forum where you can report any bugs you notice about the services, and Amazon employees do monitor these forums and provide helpful feedbacks etc. In addition to that, there’s also a service status dashboard you can use to check the current status of their services by date, and by region.

Parting thoughts…

So there, a not so quick :-P high level summary of my experience with AWS over the last 12 months. To wrap things up, here’s just a couple of blogs you could read regularly to find out what’s going on the ‘cloud’:

High Scalability

CloudHarmony

Amazon Web Services blog

Well, hope this helps you in some way, belated happy 2011!

theburningmonk.com

a blog for Yan and Yinan

Creating a sticky note app with HTML5, CSS3 and Javascript

HTML and CSS changes

Adding interactions with Javascript

Demo

UPDATE 27/02/2011:

References:

Having fun with HTML5 — Canvas, part 5

Adding a background

Limit the number of Shots

Using a Custom Cursor

Adding a Bullet Target

Demo

Related posts:

Having fun with HTML5 — Canvas, part 4

To Start Off..

Drawing the Target board

Animating the Target Boards

Adding Interactions

Adding Notifications

Demo

References:

Related posts:

Recent Posts

Categories

Archives

theburningmonk.com

a blog for Yan and Yinan

Creating a sticky note app with HTML5, CSS3 and Javascript

HTML and CSS changes

Adding inter­ac­tions with Javascript

Demo

UPDATE 27/02/2011:

Ref­er­ences:

Working with S3 folders using the .Net AWS SDK

Cre­at­ing folders

List­ing con­tents of a folder

Having fun with HTML5 — Canvas, part 5

Adding a background

Limit the num­ber of Shots

Using a Cus­tom Cursor

Adding a Bul­let Target

Demo

Related posts:

Having fun with HTML5 — Canvas, part 4

To Start Off..

Draw­ing the Tar­get board

Ani­mat­ing the Tar­get Boards

Adding Inter­ac­tions

Adding Noti­fi­ca­tions

Demo

Ref­er­ences:

Related posts:

A year in the cloud with AWS

AWS vs other cloud solutions

Ser­vices

Cost

Web Con­sole

Reli­a­bil­ity

Part­ing thoughts…

Recent Posts

Categories

Archives

Adding interactions with Javascript

References:

Creating folders

Listing contents of a folder

Limit the number of Shots

Using a Custom Cursor

Adding a Bullet Target

Drawing the Target board

Animating the Target Boards

Adding Interactions

Adding Notifications

References:

Services

Web Console

Reliability

Parting thoughts…