0

ドラッグする代わりにこのコードを変更するにはどうすればよいですか? 2 つの要素をクリックして 2 つの要素の位置を交換するだけです。2 つのタイルを 1 つずつクリックして交換したかったのですが、代わりに、ここでは最初のタイルをドラッグして別のタイルに持っていく必要があります。

  function onPuzzleClick(e){
        if(e.layerX || e.layerX == 0){
            _mouse.x = e.layerX - _canvas.offsetLeft;
            _mouse.y = e.layerY - _canvas.offsetTop;
        }
        else if(e.offsetX || e.offsetX == 0){
            _mouse.x = e.offsetX - _canvas.offsetLeft;
            _mouse.y = e.offsetY - _canvas.offsetTop;
        }
        _currentPiece = checkPieceClicked();
        if(_currentPiece != null){
            _stage.clearRect(_currentPiece.xPos,_currentPiece.yPos,pcWidth,pcHeight);
            _stage.save();
            _stage.globalAlpha = .9;
            _stage.drawImage(_img, _currentPiece.sx, _currentPiece.sy, pcWidth, pcHeight, _mouse.x - (pcWidth / 2), _mouse.y - (pcHeight / 2), pcWidth, pcHeight);
            _stage.restore();
            document.onmousemove = updatePuzzle;
            document.onmouseup = pieceDropped;
        }
    }
    function checkPieceClicked(){
        var i;
        var piece;
        for(i = 0;i < _pieces.length;i++){
            piece = _pieces[i];
            if(_mouse.x < piece.xPos || _mouse.x > (piece.xPos + pcWidth) || _mouse.y < piece.yPos || _mouse.y > (piece.yPos + pcHeight)){
                //PIECE NOT HIT
            }
            else{
                return piece;
            }
        }
        return null;
    }
    function updatePuzzle(e){
        _currentDropPiece = null;
        if(e.layerX || e.layerX == 0){
            _mouse.x = e.layerX - _canvas.offsetLeft;
            _mouse.y = e.layerY - _canvas.offsetTop;
        }
        else if(e.offsetX || e.offsetX == 0){
            _mouse.x = e.offsetX - _canvas.offsetLeft;
            _mouse.y = e.offsetY - _canvas.offsetTop;
        }
        _stage.clearRect(0,0,width,height);
        var i;
        var piece;
        for(i = 0;i < _pieces.length;i++){
            piece = _pieces[i];
            if(piece == _currentPiece){
                continue;
            }
            _stage.drawImage(_img, piece.sx, piece.sy, pcWidth, pcHeight, piece.xPos, piece.yPos, pcWidth, pcHeight);
            _stage.strokeRect(piece.xPos, piece.yPos, pcWidth,pcHeight);
            if(_currentDropPiece == null){
                if(_mouse.x < piece.xPos || _mouse.x > (piece.xPos + pcWidth) || _mouse.y < piece.yPos || _mouse.y > (piece.yPos + pcHeight)){
                    //NOT OVER
                }
                else{
                    _currentDropPiece = piece;
                    _stage.save();
                    _stage.globalAlpha = .4;
                    _stage.fillStyle = PUZZLE_HOVER_TINT;
                    _stage.fillRect(_currentDropPiece.xPos,_currentDropPiece.yPos,pcWidth, pcHeight);
                    _stage.restore();
                }
            }
        }
        _stage.save();
        _stage.globalAlpha = .6;
        _stage.drawImage(_img, _currentPiece.sx, _currentPiece.sy, pcWidth, pcHeight, _mouse.x - (pcWidth / 2), _mouse.y - (pcHeight / 2), pcWidth, pcHeight);
        _stage.restore();
        _stage.strokeRect( _mouse.x - (pcWidth / 2), _mouse.y - (pcHeight / 2), pcWidth,pcHeight);
    }
    function pieceDropped(e){
        document.onmousemove = null;
        document.onmouseup = null;
        if(_currentDropPiece != null){
            var tmp = {xPos:_currentPiece.xPos,yPos:_currentPiece.yPos};
            _currentPiece.xPos = _currentDropPiece.xPos;
            _currentPiece.yPos = _currentDropPiece.yPos;
            _currentDropPiece.xPos = tmp.xPos;
            _currentDropPiece.yPos = tmp.yPos;
4

1 に答える 1

0

ドラッグの代わりにマウスクリックを使用してピースを交換する方法は次のとおりです

マウスアップ ハンドラーで:

  • ユーザーがピースをヒットしたかどうかを確認します。

  • ユーザーがピースをヒットし、以前にピースが「選択」されていなかった場合は、このピースを「選択」します。

  • ユーザーがピースをヒットし、以前の選択があった場合、2 つのピースを交換してピースをリセットします。

  • ユーザーがすべてのピースの外側をクリックすると、「選択された」ピースがクリアされます。

ここにあなたが見るための作業コードとフィドルがあります：http://jsfiddle.net/m1erickson/a75xz/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    var canvasWidth=canvas.width;
    var canvasHeight=canvas.height;

    // create "pieces"
    var selectedPiece=-1;
    var pieceSize=75;
    var pieces=[];
    pieces.push({x:50,y:30,color:"orange"});
    pieces.push({x:150,y:30,color:"green"});
    pieces.push({x:250,y:30,color:"blue"});
    for(var x=0;x<pieces.length;x++){
        drawPiece(x,false);
    }

    // draw the specified piece
    // stroke it in red if it's selected
    function drawPiece(pieceId,isStroked){
        if(pieceId<0){return;}
        var piece=pieces[pieceId];
        ctx.save();
        ctx.beginPath();
        ctx.fillStyle=piece.color;
        ctx.rect(piece.x,piece.y,pieceSize,pieceSize);
        ctx.fill();
        ctx.strokeStyle=(isStroked ? "red" : "black");
        ctx.lineWidth=6;
        ctx.stroke();
        ctx.fillStyle="white";
        ctx.font = 'italic 18px Calibri';
        ctx.fillText("Box#"+pieceId,piece.x+15,piece.y+25);
        ctx.restore();
    }

    function hitTest(x,y){
        var hit=-1;
        for(var pieceId=0;pieceId<pieces.length;pieceId++){
            piece=pieces[pieceId];
            var isHit=!(x<piece.x || x>(piece.x + pieceSize) || y<piece.y || y>(piece.y + pieceSize));
            if(isHit){
                hit=pieceId;
                break; // Hit! We're outta here...   
            }
        }
        return(hit); // returns piece# if hit else -1 to indicate no hits
    }

    function handleMouseUp(e){
      canMouseX=parseInt(e.clientX-offsetX);
      canMouseY=parseInt(e.clientY-offsetY);

      // de-highlight previous selection, if any
      drawPiece(selectedPiece,false)

      // did we hit a piece?
      var hit=hitTest(canMouseX,canMouseY);

      // if no-hit, the user clicked outside a box
      // so clear the selectedPiece and we're outta here
      if(hit<0){
          drawPiece(selectedPiece,false)
          selectedPiece=-1;
          return;
      }

      // Hit!
      // if no previous selection, 
      // set selectedPiece and highlight selectedPiece
      if(selectedPiece<0){
              selectedPiece=hit;
              drawPiece(selectedPiece,true);
      }
      // else, there was a piece already selected
      // so swap these pieces!
      else{
          var s=pieces[selectedPiece];
          var h=pieces[hit];
          var temp={x:s.x, y:s.y}; 
          s.x=h.x;
          s.y=h.y;
          h.x=temp.x;
          h.y=temp.y;
          drawPiece(selectedPiece,false);
          drawPiece(hit,false);
          selectedPiece=-1; // clear 
      }

    }  // end handleMouseDown()

    $("#canvas").mouseup(function(e){handleMouseUp(e);});


}); // end $(function(){});
</script>

</head>

<body>
    <br/><p>Click once to select a box</p>
    <p>Click a second box to swap the boxes</p>
    <canvas id="canvas" width=400 height=300></canvas>
</body>
</html>
于 2013-03-02T20:52:40.453 に答える