Tuesday 23 May 2017

Skidmarks or Trail after moving image in Javascript?

I have a simple multiplayer browser car game that I made in Javascript, and I would like for the cars to leave skid marks/blur trail behind them. You can see a live demo at cararena.io

I am drawing the car images on a canvas based on the positions that I get from the main server, and lerping between the old and new positions to simulate smooth movement. Would I have to use lineTo() to create the skidmarks? How would I make it bend to follow the movement of the cars, and faint at the end?

Here is how the movement of the cars currently works (found in main_out.js):

    updatePos: function () {
        if (0 == this.id) return 1;
        var a;
        a = (timestamp - this.updateTime) / 60;
        a = 0 > a ? 0 : 1 < a ? 1 : a;
        var b = 0 > a ? 0 : 1 < a ? 1 : a;
        this.getNameSize();
        if (this.destroyed && 1 <= b) {
            var c = Cells.indexOf(this);
            -1 != c && Cells.splice(c, 1)
        }
        this.x = a * (this.nx - this.ox) + this.ox;
        this.y = a * (this.ny - this.oy) + this.oy;
        this.size = b * (this.nSize - this.oSize) + this.oSize;
        return b;
    }



via daniel metlitski

No comments:

Post a Comment