JavaScript奥赛罗左右转换函数

Question

＆＃13;

＆＃13;

var cW = 800;
var cH = 800;
var board = [];
var numturn = 0;
var turn = "black"
var s = cW/8;

function setup()
{
    var canvas = document.getElementById("myCanvas");
    var WindowRect = canvas.getBoundingClientRect();
    var ctx = canvas.getContext("2d");
    var output = document.getElementById("output");
    var output2 = document.getElementById("output2");
    var output3 = document.getElementById("output3");
    
    drawBoard(ctx);
    drawChip(ctx, "black", 3, 3);
    drawChip(ctx, "white", 3, 4);
    drawChip(ctx, "white", 4, 3);
    drawChip(ctx, "black", 4, 4);
        
    for (var c = 0; c < 8; c++)
    {
        board.push(["", "", "", "", "", "", "", ""])
    };
    
    board[3][3] = "black";
    board[3][4] = "white";
    board[4][3] = "white";
    board[4][4] = "black";
    
    function clicked(evt)
    {
        var c = getCol(evt.clientX-WindowRect.left);
        var r = getRow(evt.clientY-WindowRect.top);
    
        if (!boardFull()) 
        {
            if (validMove(r, c))
            {    
                drawChip(ctx, turn, r, c);
                
                convertLeft(ctx, r, c, turn);
                convertRight(ctx, r, c, turn);
                convertUp(ctx, r, c, turn);
                convertDown(ctx, r, c, turn);
                console.log("Piece at " + "row:" + r + " col:" + c + " " + board[r][c]);
                
                board[r][c] = turn;
                
                if (turn === "white")
                {
                    turn = "black";
                }
                else
                {
                    turn = "white";
                }
            }
        }
        else
        {
            winner = checkWin();
            output.innerHTML = winner + " wins";
        }
        
        console.log("Row: " + r)
        console.log("Col: " + c)
        console.log("")
        console.log(board[0]);
        console.log(board[1]);
        console.log(board[2]);
        console.log(board[3]);
        console.log(board[4]);
        console.log(board[5]);
        console.log(board[6]);
        console.log(board[7]);
        console.log("");
    }
    
    canvas.addEventListener('click', clicked);  
};

function drawBoard(ctx)
{
    ctx.beginPath();
    ctx.rect(0, 0, cW, cH);
    ctx.fillStyle = "green";
    ctx.fill();
    ctx.stroke();
      
    for(var c = 0; c < 8; c++)
    {
        var x = c * s;
        for (var r = 0; r < 8; r++)
        {
            var y = r * s + (s/2);
            ctx.beginPath();
            ctx.moveTo(x, 0);
            ctx.lineTo(x, 800);
            ctx.moveTo(0, x);
            ctx.lineTo(800, x);
            ctx.fillStyle = "white";
            ctx.fill();
            ctx.lineWidth = 2.5;
            ctx.strokeStyle = "black";
            ctx.stroke();
        }
    }
};

function drawChip(ctx, color, r, c)
{
    ctx.beginPath();
    var x = c * s + (s/2);
    var y = r * s + (s/2);
    ctx.arc(x, y, cW/(s/5), 0, 2*Math.PI);
    ctx.fillStyle = color;
    ctx.fill();
    ctx.stroke();
};

function getRow(x)
{
    return Math.floor(x/s);
};

function getCol(y)
{
    return Math.floor(y/s);
};

function validMove(r, c)
{
    return board[r][c] === "";
};

function convertLeft(ctx, r, c, color)
{
    for (var left = (c - 1); left > -1; left--)
    {
        if (board[r][left] == board[r][c])
        {
            for (var Lins = c; Lins > left; Lins--)
            {
                drawChip(ctx, color, r, Lins);
                board[r][Lins] = color;
            }
        }
    }
};

function convertRight(ctx, r, c, color)
{
    for (var right = (c + 1); right < 8; right++)
    {
        if (board[r][right] == board[r][c])
        {
            for (var Rins = c; Rins < right; Rins++)
            {
                drawChip(ctx, color, r, Rins);
                board[r][Rins] = color;
            }
        }
    }
};

function convertUp(ctx, r, c, color)
{
    for (var up = (r - 1); up > -1; up--)
    {
        if (board[up][c] == board[r][c])
        {
            for (var Uins = r; Uins > up; Uins--)
            {
                drawChip(ctx, color, Uins, c);
                board[Uins][c] = color;
            }
        }
    }
};

function convertDown(ctx, r, c, color)
{
    for (var down = (r + 1); down < 8; down++)
    {
        if (board[down][c] == board[r][c])
        {
            for (var Dins = r; Dins < down; Dins++)
            {
                drawChip(ctx, color, Dins, c);
                board[Dins][c] = color;
            }
        }
    }
};

function validSpot(ctx, r, c)
{
    
};

function checkWin()
{
    var black = 0;
    var white = 0;
    for (var r = 0; r < board.length; r++)
    {
        for (var c = 0; c< board[0].length; c++)
        {
            if (board[r][c] == "black")
            {
                black++;
            }
            if (board[r][c] == "white")
            {
                white++;
            }
        }
    }
    
    output2.innerHTML = "black pieces: " + black;
    output3.innerHTML = "white pieces: " + white;
    
    if (white > black)
    {
        return "white"
    }
    if (white < black)
    {
        return "black"
    }
    else
    {
        return "no one"
    }  
};

function boardFull()
{
    for (var r = 0; r < board.length; r++)
    {
        for (var c = 0; c< board[0].length; c++)
        {
            if (board[r][c] === "")
            {
                return false;
            }
        }
        
    }
    return true;
};

＆＃13;

＆＃13;

＆＃13;

当程序运行时，convertLeft和converRight函数似乎没有根据颜色正确转换部分，但convertUp和convertDown函数可以。这段代码可能有什么问题？

Answer 1

＆＃13;

＆＃13;

<!DOCTYPE html>

<html>
  <head>
    <title>Othello</title>
    <script type="text/javascript" src="Othello.js"></script>
    
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
    
  </head>
  <body onload="setup();";>
    <h1>Virtual Othello</h1>
    <canvas id="myCanvas" width="800" height="800"></canvas>
    <br>
    <h1 id="output">
    <h1 id="output2">
    <h1 id="output3">
  </body>
</html>

＆＃13;

＆＃13;

＆＃13;

以下是我在Chrome上运行JavaScript时使用的HTML。我还使用了Komodo IDE。只需对应文件名即可将它们相互链接