Question

我正在尝试使用JS画布（我知道是经典的）构建一个小型国际象棋游戏。

我在棋盘上显示棋子时遇到了问题。我已经使用ES6 class和2个嵌套的for循环创建了片段，这些循环将新的片段对象附加到数组中。

如果检查件数组的内容，您会注意到X位置和Y位置应正确显示件，但不幸的是，由于某些原因，只有第一行是显示，其余则没有。

足够的yadda-yadda，这是代码：

//Drawing & Animating: Declaring Variables
const canvas = document.body.querySelector("canvas")
const ctx = canvas.getContext('2d')
canvas.width = 0.5 * window.innerWidth
canvas.height = 0.98 * window.innerHeight
let CW = canvas.width
let CH = canvas.height
let counter, counterTwo, pieceCounter, pieceCounterTwo, clr, moveTest
let pieceArr = []

//Drawing & Animating: The Piece Class
class piece {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
}

//Drawing & Animating: Defining Functions

//Dynamically Draw Each Individual Square
function drawSquare(x, y, clr) {
    ctx.save()
    ctx.translate(x, y)
    ctx.fillStyle = clr
    ctx.fillRect(0, 0, CW / 8, CH / 8)
    ctx.restore()
}

//Dynamically Draw The Board
function drawBoard() {
    for (counter = 0; counter < 8; counter++) {
        for (counterTwo = 0; counterTwo < 8; counterTwo++) {
            if (counter % 2 == 0) {
                if (counterTwo % 2 == 0) {
                    clr = "beige"
                } else {
                    clr = "black"
                }
            } else {
                if (counterTwo % 2 == 0) {
                    clr = "black"
                } else {
                    clr = "beige"
                }
            }
                drawSquare((CW / 8) * counterTwo, (CH / 8) * counter, clr)
        }
    }
}
function createPieces() {
    let posX = 0
    let posY = 0
    for (pieceCounter = 0; pieceCounter < 2; pieceCounter++ , posY += CH / 8) {
        posX = 0
        for (pieceCounterTwo = 0; pieceCounterTwo < 8; pieceCounterTwo++ , posX += CW/8) {
            pieceArr.push(new piece(posX, posY))
        }
    }
    posY = (CH * 8)/ 6
    for (pieceCounter = 0; pieceCounter < 2; pieceCounter++ , posY += CH / 8) {
        posX = 0
        for (pieceCounterTwo = 0; pieceCounterTwo < 8; pieceCounterTwo++ , posX += CW / 8) {
            pieceArr.push(new piece(posX, posY))
        }
    }
}
function drawPieces() {
    for (let piece of pieceArr) {
        ctx.save()
        ctx.translate(piece.x, piece.y)
        ctx.clearRect(-75, -75, 50, 50)
        ctx.fillStyle = "red"
        ctx.fillRect(-75, -75, 50, 50)
        ctx.restore()
    }
}
//Change Location Of Pieces
function movePieces() {
    if (moveTest == true) {
        console.log("mOvE?///??/!!!!11")
    } else {
        console.log("weeeeeeee!")
    }
}

function mainLoop() {
    canvas.width = 0.5 * window.innerWidth
    canvas.height = 0.98 * window.innerHeight
    CW = canvas.width
    CH = canvas.height
    drawBoard()
    drawPieces()
}

//Start of Program Flow
createPieces()
mainLoop()
canvas.addEventListener("mousedown", function () {
    moveTest = true
    movePieces()
})
canvas.addEventListener("mouseup", function () {
    moveTest = false
    movePieces()
})

body{
    margin:0;
    display:flex;
    align-items:center;
    justify-content:center;
    align-content:center;
}
canvas{
    border:5px solid black;
}

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>chess</title>
</head>
<body>
    <canvas></canvas>
    <script src="chess.js"></script>
</body>
</html>

编辑：我对createPieces()函数进行了一些更改，它部分但并非完全解决了问题：

function createPieces() {
    let posX = 0
    let posY = 0

    for (pieceCounter = 0; pieceCounter < 3; pieceCounter++ , posY += CH / 8) {
        posX = 0
        for (pieceCounterTwo = 0; pieceCounterTwo < 9; pieceCounterTwo++ , posX += CW/8) {
            pieceArr.push(new piece(posX, posY))
        }
    }

    posY = 0

    for (pieceCounter = 0; pieceCounter < 3; pieceCounter++ , posY += CH / 8) {
        posX = 0
        for (pieceCounterTwo = 0; pieceCounterTwo < 9; pieceCounterTwo++ , posX += CW / 8) {
            pieceArr.push(new piece(posX, posY))
        }
    }
}

现在，它显示前两行，但底部的其他两行仍未显示。

编辑2 ：大声笑，我是个木偶编码员。请参阅下面的答案。

Answer 1

这是正确的功能：

function createPieces() {
    posY = CH / 8
    for (pieceCounter = 0; pieceCounter < 2; pieceCounter++ , posY += CH / 8) {
        posX = 0
        for (pieceCounterTwo = 0; pieceCounterTwo < 9; pieceCounterTwo++ , posX += CW/8) {
            pieceArr.push(new piece(posX, posY))
        }
    }

    posY = (CH / 8) * 7

    for (pieceCounter = 0; pieceCounter < 2; pieceCounter++ , posY += CH / 8) {
        posX = 0
        for (pieceCounterTwo = 0; pieceCounterTwo < 9; pieceCounterTwo++ , posX += CW / 8) {
            pieceArr.push(new piece(posX, posY))
        }
    }
}

大声谢谢。

在小型JavaScript游戏中无法正确显示棋子-JavaScript Canvas

1 个答案: