Buat teka-teki jubin kanvas HTML5

Tutorial ini menunjukkan membina permainan teka-teki jubin yang dinamik menggunakan kanvas HTML5 dan JavaScript. Permainan ini menyokong sebarang imej dan menawarkan tahap kesukaran laras.

inilah demo yang boleh dimainkan:

Ciri -ciri Utama & Keserasian Penyemak Imbas:

Teka-teki ini bersesuaian dengan penyemak imbas, diuji pada Safari, Firefox, dan Chrome (versi yang menyokong tag kanvas). Semua kod JavaScript berada dalam tag

(kecuali pembolehubah awal). <script></script>

1. Menyediakan pembolehubah: Kod bermula dengan menentukan pemalar dan pembolehubah:

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;

Menetapkan warna highlight hover. Pembolehubah lain menyimpan konteks kanvas, rujukan imej, dimensi teka -teki, data sekeping yang kini dimanipulasi, dan koordinat tetikus.

PUZZLE_HOVER_TINT

2. Memuatkan imej dan inisialisasi:

imej dimuatkan, dan dimensi teka -teki dikira berdasarkan imej dan tahap kesukaran:

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

3. Inisialisasi teka -teki (

): initPuzzle() Fungsi ini memulakan kepingan teka -teki, shuffles mereka, dan menarik keadaan teka -teki awal. Ia mewujudkan array

, di mana setiap elemen mewakili sekeping teka -teki dengan sumbernya (

, pieces) dan destinasi (sx, sy) koordinat. Fungsi xPos (tidak ditunjukkan tetapi dianggap wujud) merawak kedudukan sekeping. yPos shuffle()

4. Mengendalikan Interaksi Pengguna:

• onPuzzleClick(e): Fungsi ini mengesan klik, menentukan sekeping diklik, dan memulakan penyeret.
• updatePuzzle(e): (tidak ditunjukkan sepenuhnya) Fungsi ini mengendalikan pergerakan tetikus semasa menyeret, menyusun semula kanvas untuk menunjukkan kedudukan baru sekeping.
• pieceDropped(e): Fungsi ini mengendalikan pelepasan sekeping yang diseret, menukarnya dengan sekeping yang sesuai jika lokasi drop yang sah dijumpai.
• resetPuzzleAndCheckWin(): menyusun semula teka -teki selepas sekeping dijatuhkan dan memeriksa keadaan menang.
• gameOver(): menetapkan semula permainan dan mengendalikan keadaan menang.
• updateDifficulty(e): mengemas kini tahap kesukaran berdasarkan nilai gelangsar dan memulakan semula permainan.

Kod menggunakan stage.drawImage(), stage.clearRect(), stage.save(), dan stage.restore() untuk manipulasi kanvas yang cekap. Koordinat tetikus dikira dengan teliti menggunakan e.layerX, e.layerY, e.offsetX, dan e.offsetY untuk keserasian silang penyemak imbas.

Kesimpulan:

Penjelasan terperinci ini menjelaskan fungsi dan struktur kod. Penggunaan fungsi meningkatkan organisasi kod dan kebolehbacaan. Sifat dinamik permainan dan kesukaran laras menjadikannya contoh yang mantap dan menarik dari pembangunan permainan kanvas HTML5.

Atas ialah kandungan terperinci Buat teka-teki jubin kanvas HTML5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!