HTML5キャンバスタイルスワッピングパズルを作成します

このチュートリアルでは、HTML5キャンバスとJavaScriptを使用して動的なタイルスワッピングパズルゲームの構築を示しています。 ゲームは任意の画像をサポートし、調整可能な難易度レベルを提供します。

これが再生可能なデモです：

主要な機能とブラウザの互換性：

このパズルは、Safari、Firefox、およびChrome（Canvasタグをサポートするバージョン）でテストされたクロスブラウザー互換性があります。 すべてのjavaScriptコードはタグ（初期変数を除く）内に存在します。

1。変数のセットアップ：<script></script>

コードは、定数と変数を定義することから始まります：

ホバーハイライト色を設定します。 その他の変数は、キャンバスのコンテキスト、画像参照、パズル寸法、現在操作されている部分データ、マウス座標を保持します。

const PUZZLE_HOVER_TINT = '#009900';
const canvas = document.querySelector("#canvas");
const stage = canvas.getContext("2d");
const img = new Image();

let difficulty = 4;
let pieces;
let puzzleWidth;
let puzzleHeight;
let pieceWidth;
let pieceHeight;
let currentPiece;
let currentDropPiece;
let mouse;

2。画像の読み込みと初期化：

PUZZLE_HOVER_TINT

画像が読み込まれ、パズルの寸法は画像と難易度に基づいて計算されます。

3。パズルの初期化（

）：

img.onload = () => {
    pieceWidth = Math.floor(img.width / difficulty);
    pieceHeight = Math.floor(img.height / difficulty);
    puzzleWidth = pieceWidth * difficulty;
    puzzleHeight = pieceHeight * difficulty;
    canvas.width = puzzleWidth;
    canvas.height = puzzleHeight;
    initPuzzle();
};
img.src = "path/to/your/image.jpg"; // Replace with your image path

この関数は、パズルピースを初期化し、シャッフルし、最初のパズル状態を描画します。 各要素は、ソース（

、）と宛先（initPuzzle()、）の座標を持つパズルピースを表します。

関数（表示されていないが存在すると想定）は、ピースの位置を無作為にします。

pieces4。 ユーザーインタラクションの取り扱い：sxsy

• onPuzzleClick(e)：この関数はクリックを検出し、クリックしたピースを決定し、ドラッグを開始します。
• ：updatePuzzle(e)（完全に表示されていません）この関数は、ドラッグ中にマウスの動きを処理し、キャンバスを再描画して作品の新しい位置を表示します。
• ：この関数は、ドラッグされたピースのリリースを処理し、有効なドロップの場所が見つかった場合に適切なピースと交換します。 pieceDropped(e)
：
• ピースが落とされて勝利条件をチェックした後、パズルを再描画します。 resetPuzzleAndCheckWin()
：
• ゲームをリセットして、勝利条件を処理します。 gameOver()
：
• スライダーの値に基づいて難易度レベルを更新し、ゲームを再起動します。 updateDifficulty(e)コードは、効率的なキャンバス操作に、
、

、および

を使用します。 マウス座標は、クロスブラウザー互換性の場合、stage.drawImage()、stage.clearRect()、stage.save()、およびstage.restore()を使用して慎重に計算されます。 e.layerXe.layerY結論：e.offsetXe.offsetY この詳細な説明は、コードの機能と構造を明確にしています。 関数を使用すると、コード組織と読みやすさが向上します。 ゲームの動的な性質と調整可能な難易度により、HTML5キャンバスゲーム開発の堅牢で魅力的な例になります。

以上がHTML5キャンバスタイルスワッピングパズルを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。