Javascript game development 3: draw pixels

Now it’s time to add the vector object and some additional code. We will expand the screen module with a new method to draw single pixels and use the vector object (Javascript game development 1: vector) with a simple mathematical function to plot some pixels. I hope you like the resulting effect. The vector.js is now located in the object folder.

Result of this chapter

download chapter

index.html

<script>
 
    (function($) {
 
 
        window.modules = {};
        var modules = [{
            name: "screen",
            callback: (function() {
                window.modules.screen.init(320, 240);
            })
        }];
 
        /*
         * simple array with the name of the objects
         * don't need a callback cause an object have to be instanced anyway
         */
        window.objects = {};
        var objects = [
            "vector"
        ];
 
        //count the loaded modules to determinate if all modules are loaded
        var modulesLoaded = 0;
        $.each(modules, function() {
 
            var module = this;
 
            $.getScript("./module/" + module.name + ".js",
                function() {
 
                    module.callback();
 
                    if(++modulesLoaded == modules.length)
                    {
 
                        var objectsLoaded = 0;
                        $.each(objects, function() {
 
                            /* 
                             * load the object js files
                             * if this done trigger event "loadingcomplete"
                             */
                            $.getScript("./object/" + this + ".js", function() {
 
                                if(++objectsLoaded == objects.length)
                                {
                                    $(window).trigger("loadingcomplete");
                                }
 
                            });
                        }); 
 
                    }
                }
            )
 
        });
 
        //this is listenig to the "loadingcomplete" event
        $(window).on("loadingcomplete", function() {
 
            var modules = window.modules;
            var objects = window.objects;
 
            //fill black
            modules.screen.fill("#000");
            //new vector
            var v = new objects.vector();
 
            for(var i = 0; i < 44 * 44; i += 1)
            {
                //calculate circle and set vector to it
                v.x(Math.sin(i));
                v.y(Math.cos(i));
 
                //scale vector with divider (i is to much)
                v.mul(i / 16);
 
                //transition to the screen center
                v.add(new objects.vector(160, 120));
 
                //draw pixel with color effect
                modules.screen.setPixel(
                    v.x(),
                    v.y(),
                    (i % 255),
                    (i % 128),
                    (i % 64)
                );
            }
 
        });
 
 
 
    })(jQuery);
 
    </script>

The new method in the screen.js.

screen.js

setPixel: (function(x, y, r, g, b) {
 
    var id = this.ctx.createImageData(1,1); 
    var d  = id.data;
 
    d[0]   = r;   //red
    d[1]   = g;   //green
    d[2]   = b;   //blue
    d[3]   = 255; //alpha
 
    this.ctx.putImageData(id, x, y);
 
})