Question

我使用Javascript创建了一个Tic Tac Toe游戏。现场演示可以看here

代码工作正常但它有一点bug。当我点击画布时，图像被绘制，一切正常。但是当我点击画布时，我调用superclick()函数，该函数采用尚未点击的随机路径并在设置位置绘制设置图片（O或X）。

function superclick() {
    var filt = paths.filter(function(x) {
        return x.avaible == true;

    });
    var rand = filt[getRandomIntInclusive(0, paths.length - 1)];

    /*var evt = new MouseEvent("click", {
        view: window,
        bubbles: true,
        cancelable: true,
        clientX: (canvas.offsetLeft + rand.x)+5,
        clientY: (canvas.offsetTop + rand.y)+5

    });
    canvas.dispatchEvent(evt)*/
    ctx.drawImage(turn[turns],rand.x,+ rand.y);
    score[turns] += rand.id;
    rand.avaible = false;
     turns = turns == "x" ? "o" : "x";

}

这里的问题是有时会调用此函数，有时则不会。当它没有被调用时，它会抛出错误“无法读取未定义的属性'x'，并且我无法理解为什么。当我尝试console.log设置随机路径x时，它可以工作。我错过了什么吗？

Answer 1

你得到一个介于0和paths.length之间的随机数（所以0和8），但你使用该索引来访问“filt []”，这只是那些尚未填写的方格。所以你当剩下4个时，可能会尝试获得“filt []”的第8个元素。

尝试

var rand = filt[getRandomIntInclusive(0, filt.length - 1)];

这将使您获取的最大随机数与剩余空格数成比例。

Answer 2

你的“filt”变量是一个对象数组，以（在游戏启动时）以9个项目开始 - 每个方块一个。您正在根据“可用”（原文如此）正方形过滤项目。

由于路径数组的长度没有变化（9），因此基于范围1..9获得随机索引（通过'getRandomIntInclusive'）会返回一个出界错误，因为过滤数组的长度减少了每一个回合。

您想要做的是改变：

var rand = filt[getRandomIntInclusive(0, paths.length - 1)];

要：

var rand = filt[getRandomIntInclusive(0, filt.length - 1)];

......你应该在一个快乐的地方。

Tic Tac Toe使用Javascript

2 个答案: