Question

我已开始使用canvas开发小型JavaScript游戏。所以我需要在画布上显示多张牌。 但我似乎，在gameArea.clear();函数中使用updateGameArea()方法后，不会显示一张卡片。但是，如果没有使用gameArea.clear();方法，这些卡片显示效果会很好。但我需要多张卡片。

这里是我的JavaScript代码

var cards = [];
var selectedCards = [];
var select = true;

window.addEventListener('DOMContentLoaded', function () {
    startGame();
});

function startGame() {
    cards.push(new PlayingCard("blue", 5, 150, 10));
    cards.push(new PlayingCard("red", 1, 10, 10));
    gameArea.click();
    gameArea.start();
}

var gameArea = {
    canvas: document.createElement("canvas"),
    start: function () {
        this.canvas.width = window.innerWidth;
        this.canvas.height = window.innerHeight;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 100);
    },
    click: function () {
        this.canvas.addEventListener('click', getPosition);
    },
    clear: function () {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
};

function getPosition(e) {
    var top = this.offsetTop;
    var left = this.offsetLeft;
    var x = e.pageX - left;
    var y = e.pageY - top;

    cards.forEach(function (card) {
        if (y > card.y && y < card.y + card.height && x > card.x && x < card.x + card.width) {

            card.selected = select;

            if (selectedCards.length < 2) {
                selectedCards.push(card);
            } else {
                selectedCards = [];
                selectedCards.push(card);
            }

            if (selectedCards.length === 2) {
                selectedCards.forEach(function (selected_card) {
                    selected_card.x = 400;
                    if (selected_card.selected === select) {
                        console.log(selected_card);
                    }
                });
            }
        }
    });
}

function PlayingCard(color, value, x, y) {
    this.color = function () {
        if (color === 'red') {
            return "#E53935";
        } else if (color === 'blue') {
            return "#0D47A1";
        } else {
            throw new Error("No Color Code Found!");
        }
    };
    this.value = value;
    this.width = 120;
    this.height = 160;
    this.x = x;
    this.y = y;
    this.selected = false;

    this.update = function () {
        var ctx = gameArea.context;
        ctx.fillStyle = this.color();

        ctx.shadowBlur = 8;
        ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';

        ctx.fillRect(this.x, this.y, this.width, this.height);
    };
}

function updateGameArea() {
    cards.forEach(function (card) {
        gameArea.clear();
        card.update();
    });
}

Answer 1

每次抽牌时都在呼叫gameAera.clear()。所以这就是为什么只显示最后一张卡片。

function updateGameArea() {
    gameArea.clear(); // Move the gameArea.clear(); here

    cards.forEach(function (card) {
        card.update();
    });
}

画布清除后不显示JavaScript画布元素

1 个答案: