パズル効果を実現するネイティブ js

パズル効果を実現するネイティブ js

この記事では、パズル効果を実現するためのネイティブjsの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

要件:ページが更新されるたびに、フラグメント画像が右側のコンテナにランダムに配置されます。マウスを押して左にドラッグします。正しい座標の一定範囲内で、画像が自動的に吸着されます。配置されたフラグメントはドラッグできなくなります。

まずは効果を見てみましょう:

jsコード:

//初期関数init()を実行します。
関数init() {
    //フラグメント コンテナーを作成します。var frag = document.createDocumentFragment();
    document.body.style.margin = "0px";
    // 左の画像コンテナを作成する var ul=createE("ul",{
        幅: "260px",
        高さ: "400px",
        背景画像: "url(./img/3.jpg)",
        borderRight: "1px 実線 #000",
        borderBottom: "1px 実線 #000",
        リストスタイル: "なし",
        パディング: "0px",
        マージン: "0px",
        不透明度: ".3",
        位置: 「絶対」
    })
    //画像に境界線を表示するための li を作成します var li=createE("li",{
        幅: "51px",
        高さ: "79px",
        borderLeft: "1px 実線 #000",
        borderTop: "1px 実線 #000",
        パディング: "0px",
        マージン: "0px",
        フロート: "左"
    })
    //ループし、li をコピーして ul に挿入します for (i = 0; i < 25; i++) {
        ul.appendChild(li.cloneNode(false));
    }
    //フラグメント コンテナーに ul を挿入します。frag.appendChild(ul);
    // 右側に画像コンテナを作成します。img は body に対して相対的に配置する必要があるため、その親コン​​テナには配置属性を設定できません var div = createE("div",{
        幅: "302px",
        高さ: "302px",
        境界線: "1px 実線 #000",
        左余白: "400px"
    })
    //画像タグを作成する for (var j = 0; j < 5; j++) {
        (var k = 0; k < 5; k++) の場合 {
            var img = createE("img",{
                幅: "52px",
                高さ: "80px",
                位置: "絶対"、
                左: Math.floor(Math.random() * 250) + 400 + "px",
                上: Math.floor(Math.random() * 220) + "px"
            })
            img.src = "./img/img" + j + "-" + k + ".jpg";
            //画像は mouseHandler イベントをリッスンします。img.addEventListener("mousedown", mouseHandler);
            div.appendChild(画像);
        }
    }
    // div をフラグメント コンテナーに挿入し、次に frag を body に挿入します。frag.appendChild(div);
    document.body.appendChild(フラグ);
}
//マウスイベント関数mouseHandler(e) {
    スイッチ (e.type) {
        ケース「マウスダウン」:
            // クリック後に画像を移動するデフォルトの効果をクリアします。e.preventDefault();
            console.log(this.src.match(/img\/img(.*)\.jpg/))
            //画像パス内の番号を取得し、画像の正しい位置座標を計算します。var imgSrc = this.src.match(/img\/img(.*)\.jpg/)[1].split("-");
            var rightL=imgSrc[1]*52;
            var rightTop=imgSrc[0]*80;
            //画像が正しく配置されている場合は、直接ジャンプします if (this.style.left===rightL+"px" && this.style.top===rightTop+"px") return;
            //現在の画像の Z インデックスを最大値に設定します。this.style.zIndex = "999";
            //e.offsetX、e.offsetY、および現在クリックされている画像オブジェクトをドキュメントに保存します。document.x = e.offsetX;
            ドキュメント.y = e.offsetY;
            ドキュメント.elem = これ;
            ドキュメントの右L = 右L;
            document.rightTop=右上;
            //ドキュメントは mousemove イベントと mouseup イベントをリッスンします。document.addEventListener("mousemove", mouseHandler);
            document.addEventListener("mouseup"、mouseHandler);
            壊す;
        ケース「マウス移動」:
            //自動吸着距離 var gap = 20;
            //現在の画像をマウスに合わせて移動するように設定します。let x=e.clientX - this.x;
            y = e.clientY - this.y とします。
            this.elem.style.left = x + "px";
            this.elem.style.top = y + "px";
            //現在の画像の位置座標が特定の範囲内にある場合、自動的に吸着させる if (x>=this.rightL-gap &&x<=this.rightL+gap&&
                y>=this.rightTop-gap &&y<=this.rightTop+gap) {
                this.elem.style.left = this.rightL + "px";
                this.elem.style.top = this.rightTop + "px";
            }
            壊す;
        ケース「マウスアップ」:
            //マウスが放されたら、現在の画像の Z インデックスを減らします。this.elem.style.zIndex = "10";
            //マウスを放した後、ドキュメントの mousemove イベントと mouseup イベントを削除し、データをクリアして、コンテンツの漏洩を防ぎます。this.removeEventListener("mousemove", mouseHandler);
            this.removeEventListener("mouseup", mouseHandler);
            this.elem=null;
            壊す;
    }
}
//タグを作成する function createE(elem,styleData){
    var elem = document.createElement(elem);
    for(var prep in styleData){
        elem.style[準備]=styleData[準備];
    }
    要素を返します。
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • js+ca​​nvasはスライディングパズルの検証コードの機能を実現します
  • JSはPC・モバイル端末と埋め込み型スライドパズルの検証コードの3つの効果を実現
  • jsは9マスパズルゲームを実現します
  • JS はモバイル ジグソーパズル ゲームを迅速に実装します
  • JS ジグソーパズル ゲームはオブジェクト指向で、完全にコメントされています。
  • js+html5で携帯電話で遊べるジグソーパズルゲームを実現
  • JSで書かれたデジタルパズルゲームコード[学習参考]
  • JSはスライディングパズル検証機能の完全な例を実装します
  • Node.js を使ってスライディングパズルの検証コードの動作をシミュレートするサンプルコード
  • 絵パズル記憶力テストゲーム、Web + JS バージョン

<<:  Linux /etc/network/interfaces 設定インターフェース方法

>>:  MySQLデータベーステーブルの容量を確認する方法の例

推薦する

アカウントとパスワードを記憶する機能を実現するVueの考え方とプロセス

目次実装のアイデアアカウント パスワードを保存する方法は 3 つあります。機能インターフェースアカウ...

Vue で手ぶれ補正とスロットリングを使用する方法

目次序文コンセプト安定意味使用シナリオコードVueでの使用スロットリング意味使用シナリオコードVue...

Python の MySQL データベース LIKE 演算子の詳細な説明

LIKE 演算子は、列内の指定されたパターンを検索するため、WHERE 句で使用されます。文法: 列...

一般的な Linux ディストリビューションのミラーソース構成の概要

最近 Linux を研究していて、いくつかの Linux ディストリビューションを試してみましたが、...

hrefパラメータ転送における中国語の文字化けについて

パラメータを渡すために href が必要で、パラメータが中国語の場合、文字化けした文字が表示されます...

Vueはタブ切り替えを実装します

この記事では、タブ切り替えを実装するためのVueの具体的なコードを例として紹介します。具体的な内容は...

MySQL 5.5 で範囲パーティションを追加および削除する例

導入RANGE パーティション分割は、指定された連続した間隔範囲に基づいています。RANGE の初期...

Linuxコマンドunzipの詳しい説明

目次1. 解凍コマンド1.1 構文1.2 オプション2. 例1. 解凍コマンドunzip コマンドは...

dockerを使用してGrafana+Prometheus構成をデプロイする

docker-compose-monitor.yml バージョン: '2' ネットワ...

2列の水平タイムラインを実装するためのVueサンプルコード

目次1.コンポーネントtimelineH.vueを実装する2. コンポーネントの呼び出しこの記事では...

docker-compose を使用して Clickhouse をすばやくデプロイする方法のチュートリアル

ClickHouse は、オープンソースの列指向 DBMS (Yandex によって開発) です。 ...

vue.jsは画像のURLに従って画像をダウンロードします

最近、フロントエンドの vue.js ドッキング機能モジュールに取り組んでいたとき、画像をダウンロー...

Dockerの基本的な手順

目次基本的な指示1. 現在のマシンのコンテナステータスを確認する2. イメージをダウンロードまたは取...

Nest.js のハッシュと暗号化の例の詳細な説明

0x0 はじめにまず、ハッシュアルゴリズムとは何でしょうか?メッセージやセッション項目など、一部のデ...

Vue3でアイコンを使用する2つの例

目次1. SVGを使用する2. fontAwesomeを使用する3 ソース4 結論テクノロジースタッ...