我正在尝试使用JS画布构建一个小型国际象棋游戏(经典，我知道(。
我在棋盘上显示棋子时遇到问题。我使用 ES6class和 2 个嵌套的 for 循环创建了片段，这些循环将新的片段对象附加到数组中。
如果您检查 pieces 数组的内容，您会注意到 X 和 Y 位置应该正确显示片段，但不幸的是，由于某种原因，只显示第一行片段，其余部分不显示。
够了亚达-亚达，这是代码：
//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 行，但底部的其他 2 行仍未显示。
编辑2：哈哈，我是一个布偶编码员。请参阅下面的答案。
这是正确的函数：
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))
}
}
}
哈哈，无论如何谢谢。