帆布层拼图和一块

时间:2016-10-25 07:12:45

标签: javascript canvas html5-canvas

我有一个拼图和一块。 5 x 5件覆盖所有拼图。 当客户点击片断,片断禁用时,在片段下方显示部分拼图。我使用画布绘制两层但不起作用。

     function init( img ){
        if( img == undefined ){
            img="http://amitysmiletravel.com/sites/a/am/amity/uploads/ckfinder/images/amitysmile-hotel(10).jpg";
        }
        _img = new Image();
        _img.addEventListener('load',onImage,false);
        _img.src = img ;
    }
    function onImage(e){
        _pieceWidth = Math.floor(_img.width / PUZZLE_DIFFICULTY)
        _pieceHeight = Math.floor(_img.height / PUZZLE_DIFFICULTY)
        _puzzleWidth = _pieceWidth * PUZZLE_DIFFICULTY;
        _puzzleHeight = _pieceHeight * PUZZLE_DIFFICULTY;
        setCanvas();
        initPuzzle();
    }
    function setCanvas(){
        _canvas = $('#game-state');
        _stage = _canvas[0].getContext('2d');
        _canvas[0].width = _puzzleWidth;
        _canvas[0].height = _puzzleHeight;
        // _canvas[0].style.border = "1px solid #004D3D";
    }
    function initPuzzle(){
        _pieces = [];
        _mouse = {x:0,y:0};
        _currentPiece = null;
        _currentDropPiece = null;
        _stage.drawImage(_img, 0, 0, _puzzleWidth, _puzzleHeight, 0, 0, _puzzleWidth, _puzzleHeight);
        initPieces();
    }
    function initPieces(){
        /*if( img == undefined ){
            img="<?php echo Yii::app()->theme->baseUrl?>/images/piece_bg.png";
        }*/
        _imgPiece = new Image();
        _imgPiece.addEventListener('load',buildPieces,false);
        _imgPiece.src = "<?php echo Yii::app()->theme->baseUrl?>/images/piece_bg.png";
    }
    var buildPieces = function(){
        _stage.clearRect(0,0,_puzzleWidth,_puzzleHeight);
        var i;
        var piece ;
        var xPos = 0;
        var yPos = 0;
        for(i = 0; i < 25; i++){
            piece ={};
            piece.xPos = xPos;
            piece.yPos = yPos;
            _pieces.push(piece);
            _stage.drawImage(_imgPiece,piece.xPos,piece.yPos,_pieceWidth,_pieceHeight);
            _stage.strokeRect(xPos,yPos,_pieceWidth,_pieceHeight);
            xPos += _pieceWidth;
            if(xPos >= _puzzleWidth){
                xPos = 0;
                yPos += _pieceHeight;
            }
        }
        if( !touchSupported ){
            $('#game-state').on('mousedown', onPuzzleClick);
        }else{
            // document.ontouchstart = null;
            $('#game-state').on('touchstart',function( e ){
                 var e = e.originalEvent;
                 e.preventDefault();
                 onPuzzleClick( e ); 
            });
        }
    }
    function onPuzzleClick(e){
        // alert(e);

        if( !Modernizr.touch ){
            _mouse.x = e.pageX - _canvas.offset().left;
            _mouse.y = e.pageY - _canvas.offset().top;
        }else{
            _mouse.x = e.touches[0].pageX - _canvas.offset().left;
            _mouse.y = e.touches[0].pageY - _canvas.offset().top;
        }

        // alert("x "+_mouse.x+" y: "+_mouse.y);
        _currentPiece = checkPieceClicked();
        if(_currentPiece != null){
            _stage.clearRect(_currentPiece.xPos,_currentPiece.yPos,_pieceWidth,_pieceHeight);
            _stage.save();
        }
    }
    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 + _pieceWidth) || _mouse.y < piece.yPos || _mouse.y > (piece.yPos + _pieceHeight)){
                //PIECE NOT HIT
            }
            else{
                return piece;
            }
        }
        return null;
    }

请帮帮我。谢谢!

0 个答案:

没有答案