Question

我在设置自己的项目时遇到了麻烦。我一直在搞乱这个教程，这是一个瓦片交换器益智游戏。

（http://hub.tutsplus.com/tutorials/create-an-html5-canvas-tile-swapping-puzzle--active-10747）

我想要做的是当用户将其放置在正确的位置时，用绿色透明颜色覆盖一块拼图。

我知道当它在正确的地方时，我只是不知道如何只改变一件颜色。

代码

function resetPuzzleAndCheckWin(){

        _stage.clearRect(0,0,_puzzleWidth,_puzzleHeight);
        var gameWin = true;
        var i;
        var piece;
        for(i = 0;i < _pieces.length;i++){
            piece = _pieces[i];
            _stage.drawImage(_img, piece.sx, piece.sy, _pieceWidth, _pieceHeight, piece.xPos, piece.yPos, _pieceWidth, _pieceHeight);
            _stage.strokeRect(piece.xPos, piece.yPos, _pieceWidth,_pieceHeight);

            if (piece.xPos == piece.sx && piece.yPos == piece.sy){
                alert(1);

                currentpiece = piece;

                //_stage.strokeStyle = "#CC0000";

                //_stage.currentpiece.strokeStyle = "#CC0000";


            }

所以，如果你能读到这一点，那么（根据我的理解）发生的事情是，一旦用户放下一个拼图，然后保存并更改坐标，然后运行此功能。这个功能重绘了所有的拼图。

_pieces是一个对象数组

我做了什么是if语句来检查是否有任何一块在正确的位置。（作品）

我只是不确定如何只更改正确的边框或颜色叠加。（做最好的工作）

我设法改变了所有的边框颜色......（见注释掉的行）

Answer 1

DW人，我把这一切都放在了包里。

以下是我解决它的方法：

基本上我justed在正确的图像位置添加了一个矩形，使边框变大，这样其他矩形边框就不会形成它。

然后我必须将_stage重置为所有其他矩形的正常。

多数，下面是代码：

if (piece.xPos == piece.sx && piece.yPos == piece.sy){
            // If correct piece
                alert(1);

                _stage.strokeRect(piece.xPos, piece.yPos, _pieceWidth,_pieceHeight)
                _stage.strokeStyle = "red";
                _stage.lineWidth = 20;         

            } 

// for all the normal pieces...

            _stage.drawImage(_img, piece.sx, piece.sy, _pieceWidth, _pieceHeight, piece.xPos, piece.yPos, _pieceWidth, _pieceHeight);
            _stage.strokeRect(piece.xPos, piece.yPos, _pieceWidth,_pieceHeight);
            _stage.strokeStyle = "black"; 
            _stage.lineWidth = 2;

html 5 canvas：更改单个矩形的颜色

1 个答案: