JavaScript画布元素在画布清晰后不显示

我已经开始用画布开发小型JavaScript游戏。所以我需要在画布上显示多张卡片。 但我似乎，我使用gameArea.clear();方法updateGameArea()功能后，一张卡不显示。但是如果不使用这种方法，那么这些卡片显示效果不错。但我需要多张卡片。JavaScript画布元素在画布清晰后不显示

这里我的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(); 
    }); 
}

来源

2016-03-05 DININDU

为什么你为每个'card'调用'gameArea.clear（）'？ – Andreas

明确画布区域 – DININDU

但为什么每个卡** **？在更新'forEach'中的卡片之前，只需调用它一次。 – Andreas

你每次你抓一张牌叫gameAera.clear()。所以这就是为什么只显示最后一张牌。

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

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

来源

2016-03-05 15:26:05 Nasso

JavaScript画布元素在画布清晰后不显示

回答

相关问题