使用 Javascript 的井字游戏

Question

我使用 Javascript 创建了一个井字游戏。现场演示可见here

代码工作正常，但有一点错误。当我点击 canvas 时，图像被绘制并且一切正常。但是当我点击 canvas 时，我调用了 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";

}

这里的问题是这个函数有时会被调用，有时不会。当它未被调用时，它会抛出一个错误 "Cannot read property 'x' of undefined"，我不明白为什么。当我尝试 console.log 设置随机路径 x 时，它起作用了。我错过了什么吗？

Answer 1

你得到一个介于 0 和 paths.length 之间的随机数（所以是 0 和 8），但你正在使用该索引访问 "filt[]" 这只是那些尚未填充的方块in。因此，当只剩下 4 个元素时，您可能会尝试获取 "filt[]" 的第 8 个元素。

尝试

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

这将使您抓取的最大随机数与剩余空间的数量成正比。

Answer 2

您的 "filt" 变量是一个对象数组，以（在游戏启动时）开头，有 9 个项目 -- 每个方格一个。您正在根据 "avaible"（原文如此）正方形过滤项目。

由于路径数组的长度不变 (9)，根据范围 1..9 returns 获取随机索引（通过 'getRandomIntInclusive'）会出现越界错误，因为过滤数组的长度在每一轮都减少。

你想做的是改变：

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

收件人：

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

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

使用 Javascript 的井字游戏

Tic Tac Toe using Javascript

html

javascript

canvas

html5-canvas