清除 Canvas 后 JavaScript Canvas 元素不显示

标签 javascript html canvas html5-canvas

我已经开始使用 Canvas 开发小型 JavaScript 游戏。 所以我需要在 Canvas 上显示多张卡片。 但我似乎,在我使用 updateGameArea() 函数中的 gameArea.clear(); 方法后,一张卡片没有显示。但是如果不使用 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();
    });
}

最佳答案

每次抽牌时,您都在调用 gameAera.clear()。所以这就是为什么只显示最后一张卡片的原因。

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

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

关于清除 Canvas 后 JavaScript Canvas 元素不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35815540/

相关文章:

javascript - javascript音频对象-.ogg blob中存在的音频播放器

html - 元素不应该嵌套在另一个元素中

javascript - jQuery-如何使水平拆分器显示在中间,即使屏幕已调整大小

html - 为什么我的Godaddy中的大图像无法显示?

javascript - 如何在其他功能中访问jquery taphold

javascript - HTML5 Canvas 成长圈

javascript - 如何在圆形 Canvas 中添加线条

javascript - 如何使用 npm 以最少的所需文件启动 Angular2 项目?

javascript - JavaScript 字符串是不可变的吗?我需要 JavaScript 中的 "string builder"吗?

javascript - 如何使用 Jest 在这种情况下测试 Express router catch 分支?