Question

我正在尝试更新间隔值x但没有成功。我希望最终有不同的pawn对象具有内部值，我可以在按键向上/向下/向左/向右重绘画布时更新。

代码更新：现在可以更新x，y值，但不确定是否使用模块化JavaScript模式创建单独的对象。

使用jQuery 1.5.1的JavaScript：

//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

首先像alnitak说从getX，getY删除paranthese。如果你想要不同的pawn对象，你应该使用var b = new pawn()

如何使用Modular JavaScript模式创建单独的对象

2 个答案: