0

我在自己设定的项目上遇到了麻烦。我一直在玩这个教程，这是一个瓷砖交换益智游戏。

（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 语句来检查是否有任何一块在正确的位置。（作品）

我只是不确定如何只更改正确的边框或颜色覆盖。（确实有效）

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

4

1 回答 1

0

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

这是我解决它的方法：

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

然后我不得不将所有其他矩形的 _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;
于 2013-10-12T12:57:46.220 回答