【JavaScript】 15スライドパズルを作る[1]：キャンバスと背景

(()=>{

 /* ここにコードを作成 */

})();

    const puzzleScreenInfo ={
        size : 500,         // キャンバスのサイズ
        frameSize : 20 ,    // ゲーム盤外枠の幅
        pieceNum : 4,       // 横方向のピースの数
        animeTime: 200,      // アニメーション時間
    };

    /**
     * レイヤー（キャンバス）操作ヘルパーオブジェクト
     * @param canvas
     * @param zindex
     */
    const layerCtrl = function( canvas , zindex ) {
        const context = canvas.getContext( "2d" );
        this.getCanvas = () => canvas;
        this.getContext = () => context;

        let beforeIndex = zindex;

        this.setIndex = index => {
            beforeIndex = canvas.style.zIndex;
            canvas.style.zIndex = index;
        };
        this.resetIndex = () => canvas.style.zIndex = beforeIndex;
    };
    layerCtrl.prototype = {
        /**
         * キャンバスにスタイルをセット
         * @param styleObj 例：{ widt: "100px" , height : "100px" }
         */
        setStyle( styleObj ){
            const canvas = this.getCanvas();
            Object.keys( styleObj ).forEach( e => canvas.style[e] = styleObj[e]);
        },
        /**
         * キャンバスサイズをセット
         * @param w
         * @param h
         */
        setSize( w , h ){
            const canvas = this.getCanvas();
            canvas.setAttribute("width", w );
            canvas.setAttribute("height", h );
        },
        /**
         * 四角を描画する
         * @param rect [ 左座標 , 上座標 , 幅 , 高さ ]
         * @param fillColor 塗りつぶし職 null ... 塗りつぶしなし
         * @param strokeColor 線色 null ... 線なし
         */
        rect( rect , fillColor , strokeColor = null ){
            const context = this.getContext();
            context.save();
            if( fillColor !== null ) {
                context.fillStyle = fillColor;context.fillRect( ...rect );
            }
            if( strokeColor !== null ) {
                context.strokeColor = strokeColor;context.strokeRect( ...rect );
            }
            context.restore();
            return this;
        },
        /**
         * テキストの描画
         * @param style  テキスト属性のオブジェクト
         * @param textString 描画する文字列
         * @param x 描画位置
         * @param y 描画位置
         */
        text( style , textString ,x , y){
            const context = this.getContext();
            context.save();
            Object.keys( style ).forEach( e => context[e] = style[e]);
            context.strokeText( textString , x ,  y);
            context.fillText( textString , x , y );
            context.restore();
            return this;
        },
        /**
         * イメージデータの取得
         * @param rect
         * @returns {ImageData}

         */
        getImageData( rect ){
            return this.getContext().getImageData( ...rect );
        },
        /**
         * イメージの描画
         * @param image
         * @param x
         * @param y
         * @returns {layerCtrl}

         */
        putImageData( image , x , y ){
            this.getContext().putImageData( image , x ,y );
            return this;
        },
        /**
         * キャンバス全面クリア
         */
        clear(){
            const cvs = this.getCanvas();
            this.getContext().clearRect( 0 , 0 , cvs.width , cvs.height  );
        },
        /**
         * キャンバスクリア
         * @param rect [ 左座標 , 上座標 , 幅 , 高さ ]
         * @returns {layerCtrl}

         */
        clearRect( rect ) {
            this.getContext().clearRect( ...rect  );
            return this;
        },
        /**
         * キャンバスのサイズと表示サイズの比率
         * @returns {number}

         */
        getScale (){
            const canvas = this.getCanvas();
            return canvas.clientWidth / canvas.width;
        }
    };

     /**
     * キャンバスを作成して配置
     * @param divId キャンバスを作成するDIV要素のID
     * @returns {[canvas,canvas]} [背景,パズル]のキャンバス配列
     */
    const makeSlidePuzzle = function ( divId  ) {

            // div要素取得
        const parentDiv = document.getElementById( divId );
        if( parentDiv === null ) throw new Error("id:" + divId + "がない");

            // キャンバスの表示サイズ
        const viewSize = Math.min( parentDiv.clientWidth , parentDiv.clientHeight );

            // キャンバスのスタイル設定
        const style ={ width : viewSize + "px" , height : viewSize + "px" ,
            top : ((parentDiv.clientHeight - viewSize) / 2).toString() + "px" ,
            left : ((parentDiv.clientWidth - viewSize) / 2).toString() + "px" };

            // キャンバスを3枚作成
        return [1,2,3].map( zindex => {
            const cv = document.createElement("canvas" );
            const layer = new layerCtrl( cv ,zindex );
            layer.setSize(puzzleScreenInfo.size,puzzleScreenInfo.size );

            layer.setStyle( style );

            parentDiv.appendChild( cv );
            return layer;
        });
    };

    /**
     * 背景描画用オブジェクト
     * @param layer
     */
    const backGroundDrawFunc = function ( layer ) {

        this.getLayer = ()=> layer;

        this.frame = null; // 外周 [ 始点x , 始点y , 幅 , 高さ ]
        this.innerFrame = null; // 内周( パズルエリア )

        this.frameColor = "burlywood"; // 外周色
        this.frameLineColor = "dimgray"; // 外周の線色
        this.bottomPlateColor ="tan"; // 底板の色
    };
    backGroundDrawFunc.prototype={
        /**
         * 背景描画に必要な座標を計算
         */
        init(){
            const   {size,frameSize} = {...puzzleScreenInfo};

            // 外周,内周セット
            this.frame = [0 , 0 , size , size];
            this.innerFrame = [ frameSize , frameSize,size - frameSize*2,size - frameSize*2  ];
            return this;
        },
        /**
         * init()で計算した情報をもとに背景を描画
         * @param context
         */
        draw(  ){

            this.getLayer().clearRect( this.frame )
                .rect( this.frame , this.frameColor , null )
                .rect( this.innerFrame , this.bottomPlateColor , this.frameLineColor );
        }
    };

(()=>{

/**
   ここに
     キャンバスのサイズ設定、
      レイヤー（キャンバス）操作ヘルパーオブジェクト、
     キャンバスの作成、
     背景の描画
  のコードを記述
*/

    window.addEventListener( "DOMContentLoaded" , ()=> {
         const [backGroundLyer,puzzleLayer,animeLayer] = makeSlidePuzzle("slidepuzzle"  );

         new backGroundDrawFunc( backGroundLyer ).init().draw( );
    });
})();