00 How it works 01 Objects - Constructor 02 Objects - Constructor (drawing) 03 Objects - Constructor (timing) 04 Objects - Prototype (sequential declaration) 05 Objects - Prototype (declaring all at once)

Code goes here:

var _things = 0;
var _cross = 16 / 2;
function Thing(angle) {
    var thing_num = ++_things;
    this.getThingNum = function() {
        return thing_num;
    }
    if(angle) {
        this.alpha = angle / 180.0*Math.PI;
    }
}
// Create a prototype for Objects created by function Thing()
Thing.prototype = {};
Thing.prototype.x = 0;
Thing.prototype.y = 0;
Thing.prototype.alpha = 0;
    
Thing.prototype.step = function(distance) {
    this.x += distance * Math.cos(this.alpha);
    this.y += distance * Math.sin(this.alpha);
    return this;
};
Thing.prototype.turn_degrees = function(degrees) {
    this.alpha += degrees / 180.0*Math.PI;
    return this;
};
Thing.prototype.update = function(canvas, domelement) {
    console.log("Thing #" + this.getThingNum() + " is at:", it01.x, 'x', it01.y,
        "and looks at", this.alpha * 180.0/Math.PI, "degrees");
    return this;
};
Thing.prototype.draw = function(ctx2d) {
    ctx2d.save();
    ctx2d.setTransform(1, 0, 0, 1, 0, 0);
    ctx2d.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
    ctx2d.beginPath();
    ctx2d.moveTo(this.x - _cross, this.y);
    ctx2d.lineTo(this.x + _cross, this.y);
    ctx2d.moveTo(this.x, this.y - _cross);
    ctx2d.lineTo(this.x, this.y + _cross);
    ctx2d.stroke();
    ctx2d.restore();
    return this;
};
Thing.prototype.mark = function(elem) {
    elem.style.position = 'absolute';
    elem.style.top = this.y + 'px';
    elem.style.left = this.x + 'px';
    return this;
};

var it01 = new Thing();
var dom_marker = document.getElementById('dom_marker');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var steps = [30, 30, 15];
var turns = [null, 10, 80];
var delay = 1000;
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);

it01.update().draw(ctx).mark(dom_marker);

setTimeout(function() {
    it01.step(steps[0])
        .update().draw(ctx).mark(dom_marker);

setTimeout(function() {
        it01.turn_degrees(turns[1]).step(steps[1])
            .update().draw(ctx).mark(dom_marker);

setTimeout(function() {
            it01.turn_degrees(turns[2]).step(steps[2])
                .update().draw(ctx).mark(dom_marker);
        }, delay);
    }, delay);
}, delay);

Logs show up here:

Here, we draw on a canvas

And finally, DOM + CSS

x