Question

im creating a simple game and, I need some direction for debuging some data.
i have a div in my HTML file, that I want him to show some data that change when some variables get change by the user actions.

for exmple i got var xPosition, I want to send the data to a div in the HTML, so i can see the current state of xPosition.

i realy dont have any idea where to start creating this functionlity.

my questions:

1. is it possible to create event inside this class and register some
   element to him that will show all the changing data?
2. do i have to use a some a timer for that sort of thing?

this is the “class”:

(function ($) {
    $.Player = function (element) {
        this.element = (element instanceof $) ? element : $(element);
        this.movmentSpeed = 10;
        this.size = $(element).width();
        this.xPos = 0;
        this.yPos = 0;
    };


    $.Player.prototype = {
        //register events
        InitEvents: function () {
            var that = this;
            $(document).keydown(function (e) {
                var key = e.which;
                if (key == 39) {
                    that.moveRight(400);
                } else if (key == 37) {
                    that.moveLeft();
                }
            });

            this.element.css({
                left: this.xPos
            });
        },

        //movment functions
        moveRight: function (worldWidth) {
            if ((this.xPos + this.size) <= worldWidth) {
                this.xPos += this.movmentSpeed;
                this.element.css("left", '+=' + this.movmentSpeed);
            }
        },
        moveLeft: function () {
            if (this.xPos > 0) {
                this.xPos -= this.movmentSpeed;
                this.element.css("left", '-=' + this.movmentSpeed);
            }
        }
    };

} (jQuery));

here the HTML:

<div id="player">
<div id="debugData"> <div>
<script>
var player = new $.Player($("#player"));
        player.InitEvents();

</script>

(sorry for my english)

Answer 1

jsFiddle Demo

I’d say having an internal function inside the Class would help. Maybe even having a setting where you turn the logging on by doing player.logging = true;, and having it default to false;

In your prototype just add a public prototype variable for logging = false, and our prototype function log().

The internal function you could use could be something as simple as:

    logging : false, // our default

    log : function (str) {
        if (this.logging) {
            $('#debugData').html(str);
        }
    },

This way you could leave your log(this.xPos); (or whatever you want to log) within your code, and by removing the player.logging = true; when you instantiate your class, they won’t show up, till you put that code back in.