Как создать отдельные объекты, используя модульный шаблон JavaScript

Question

Я пытаюсь обновить значение интервала x, но не удается. Я надеюсь, что со временем у меня будут разные объекты пешек с внутренними значениями, которые я могу обновлять при нажатии клавиш вверх / вниз / влево / вправо, чтобы перерисовать холст.

Обновление кода: Теперь можно обновлять значения x, y, но не уверен в создании отдельных объектов с использованием модульного шаблона JavaScript.

JavaScript с использованием jQuery 1.5.1:

//Constructors
    var pawn = (function() {        

        var x = 25;
        var y = 25;     
        var getX = function() {
            return x;
        };
        var getY = function() {
            return y;
        };

        function _drawPawn(x,y) {
            var x = x || 25;
            var y = y || 25;
            var canvas = document.getElementById("canvas");
            if (canvas.getContext) {
                var b = $('body');
                var winH = b.height();
                var winW = b.width();
                $(canvas).attr('height',winH).attr('width',winW);
                var ctx = canvas.getContext("2d");  
                ctx.beginPath();
                ctx.lineWidth="3";
                ctx.arc(x, y, 10, 0, Math.PI * 2, true); // circle              
                ctx.stroke();
            }
        }

        function left() {
            x = 100;
            y = 100;
        }

        return {
            getX:getX,
            getY:getY,
            draw: function drawPawn(x,y) {
                _drawPawn(x,y);
            },
            left:left
        }
    })();   

    //Init
    $(function() {      
        var b = pawn;
        b.left();
        alert(b.getX());

            var a = pawn;
    alert(a.getX());

        //b.draw();
    });

и HTML:

<canvas id="canvas" height="800px" width="600px">
    Download a modern browser like Internet Explorer 9, Firefox, Safari or Chome to view this.
</canvas>

Answer 1

Как написано в данный момент, ваша функция getX() будет автоматически вызываться с предоставленным (пустым) списком параметров и возвращать x, что затем эквивалентно:

var getX = x;

, что даст getX значение x в тот момент, когда оно было объявлено .

Чтобы исправить, убрали скобки:

var getX = function() {
        return x;
};

---

Вам также необходимо исправить эту функцию в возвращаемом объекте:

draw: function drawPawn(x, y) {
    _drawPawn(x, y);
}

Поскольку очевидным намерением является вызов draw без параметров и использование текущих привязанных значений x и y, это должно быть:

draw: function drawPawn() {
    _drawPawn(x, y);
}

Answer 2

Сначала, как сказал Алнитак, удалите paranthese из getX, getY.Если вам нужны разные пешечные объекты, вы должны использовать var b = new pawn()