Contoh implementasi cepat permainan labirin kanvas sederhana

(Saya agak terobsesi dengan pola desain akhir-akhir ini, dan agak membosankan menghadapi js murni sepanjang waktu -_-. Jadi saya menulis sesuatu yang menarik untuk membumbuinya)

Saat ini kanvas bukanlah hal baru, namun karena tidak umum digunakan dalam bisnis sehari-hari, maka tidak banyak latihan. Hari ini saya akan membagikan cara menerapkan labirin kanvas sederhana. Contoh ini berasal dari "cheat HTML5" edisi kedua, dan kodenya telah sedikit disesuaikan.

Karena ada langkah tengah ketika menggunakan kanvas untuk memperoleh informasi gambar, maka lingkungan server harus digunakan. Jadi saya tulis dulu sampelnya dan melemparkannya ke server agar semua orang bisa merasakan efeknya terlebih dahulu (gunakan rasa pencapaian sebagai penggeraknya hahaha)

Klik saya untuk mengalaminya

alamat git

Tidak sulit untuk mengimplementasikan permainan kecil ini. Mari kita pikirkan tentang elemen dasar permainan labirin.

Pertama tentu saja, harus ada peta, dan kemudian harus ada penjahat yang bergerak. Kami menggunakan cavan untuk menggambar keduanya;

Berikutnya adalah program pemindahan objek. Program ini terutama mencakup dua aspek:

1. Biarkan benda bergerak sesuai petunjuk yang kita tentukan;

2. Mendeteksi apakah benda menyentuh dinding atau pintu keluar.

Menggambar peta labirin dan gambar bergerak

Langkah-langkah utama dalam menggambar peta adalah:

1. Dapatkan gambar peta
2. Gunakan Cavans untuk menggambar.

Pembuatan peta labirin dapat diperoleh dengan bantuan generator labirin online dari Google.

Hal yang sama berlaku untuk menggambar penjahat. Cari saja gambar penjahat. Namun, yang perlu Anda perhatikan di sini adalah Anda perlu mencari gambar persegi, karena nanti kita perlu melakukan deteksi tabrakan seluler, dan kotak. lebih mudah untuk dinilai.

Selanjutnya, kita akan menulis fungsi utama untuk menggambar labirin dan penjahat.

 function drawMaze(mazeFile, startingX, startingY) { var imgMaze = new Image() imgMaze.onload = function () { // Penyesuaian ukuran kanvas canvas.width = imgMaze.width canvas.height = imgMaze.height // Menggambar wajah tersenyum var imgFace = dokumen.getElementById(wajah) konteks.drawImage(imgMaze, 0, 0) x = startingX y = startingY konteks.drawImage(imgFace, x, y) konteks.stroke() } imgMaze.src = mazeFile}

mazeFile adalah alamat gambar labirin, startingX dan startingY adalah koordinat titik awal. Ada dua cara untuk memperkenalkan gambar di sini. Alasannya adalah saya tidak sering mengubah gambar penjahatnya, jadi saya menulisnya langsung di halaman. Peta labirin dimaksudkan untuk diubah-ubah, jadi saya perkenalkan js. Jika ingin Tidak ada masalah jika langsung import menggunakan js. Bagian lainnya relatif sederhana dan tidak akan dijelaskan lagi.

Prinsip utama gerakan adalah:

Terima masukan pengguna tertentu (dalam hal ini, tanggapi tombol arah) dan ubah menjadi instruksi gerakan yang sesuai. Kemudian secara berkala periksa instruksi gerakan dan gambarkan posisi target yang sesuai. Berikan contoh sederhana:

Misalnya, setiap kali tombol arah atas ditekan, tercatat bahwa ia harus bergerak ke atas, lalu setiap 100 milidetik ia memeriksa perintah gerakan saat ini, menggambar lokasi target di mana ia harus bergerak, dan mengulangi proses ini. Kodenya juga relatif sederhana:

 // Memindahkan fungsi function processKey(e) { dx = 0 dy = 0 // Deteksi tombol arah atas, bawah, kiri dan kanan if (e.keyCode === 38) { dy = -1 } if (e.keyCode = == 40) { dy = 1 } if (e.keyCode === 37) { dx = -1 } if (e.keyCode === 39) { dx = 1 }}// Fungsi bingkai gambar drawFrame() { if (dx != 0 || dy != 0) { // konteks.clearRect(x,y,canvas.width,canvas.height) // Menggambar konteks lintasan bergerak. mulaiPath(); konteks.fillStyle = rgb(254.244.207) konteks.rect(x, y, 15, 15) konteks.isi() x += dx y += dy // Deteksi tabrakan if (checkForCollision()) { x -= dx y -= dy dx = 0 dy = 0 } //Gambarkan lokasi di mana penjahat harus pindah var imgFace = document.getElementById( ' wajah') konteks.drawImage(imgFace, x, y) if (kanvas.tinggi - y < 17) { // isFirst = false alert('Selamat telah menyelesaikan permainan') return false } // Jika direset disini, maka akan menjadi gerakan non-otomatis, yaitu setiap kali tombol arah ditekan, hanya akan bergerak maju satu langkah Sejak pengalaman saat ini tidak bagus, kami tidak akan meresetnya sekarang/ / dx = 0 // dy = 0 } setTimeout(drawFrame, 20)}

Pada kode di atas, fungsi pergerakan relatif sederhana. Fungsi yang lebih penting untuk menggambar frame adalah fungsi deteksi tabrakan, yang dijelaskan secara rinci di bawah.

Untuk mendeteksi apakah suatu objek bertabrakan dengan dinding, biasanya informasi peta perlu disimpan ke dalam memori terlebih dahulu, lalu mendeteksi apakah objek tersebut bertabrakan dengan dinding saat ini saat objek dipindahkan labirin putih, kita dapat menggunakan warna untuk mendeteksi tabrakan. Metode spesifiknya adalah:

Dapatkan posisi koordinat objek saat ini dan gunakan kanvas untuk mendeteksi apakah warna posisi tersebut pada peta saat ini berwarna hitam, jika demikian dikatakan dinding dan tidak boleh dilakukan pergerakan.

 fungsi checkForCollision() { var imageData = konteks.getImageData(x - 1, y - 1, 15 + 2, 15 + 2) var piksel = imageData.data for (var i = 0, len = piksel.panjang; i < len ; i++) { var merah = piksel[i], hijau = piksel[i + 1] biru = piksel[i + 2] alfa = piksel[i + 3] // Periksa apakah menyentuh dinding hitam if (merah === 0 && hijau === 0 && biru === 0) { return true } } return false}

Di sini, 15 adalah lebar penjahat. Kami mendeteksi rentang 1px di kedua sisi penjahat (sesuai dengan getImageData(x - 1, y - 1, 15 + 2, 15 + 2) dalam kode. Anda dapat memikirkannya. kenapa + disini. 2), jika berwarna hitam berarti terdeteksi tabrakan.

Dalam kode tersebut, saya menambahkan beberapa fungsi lain, seperti meminta jawaban, dll. Sedangkan untuk mengubah peta, caranya relatif sederhana: simpan alamat file, koordinat titik awal, jalur gambar jawaban, dll. sesuai dengan peta dalam suatu objek, lalu atur susunan peta, alihkan peta, dan render ulang saat diklik. Masih ada beberapa area yang perlu dioptimalkan, seperti:

1. Pengalaman deteksi tabrakan buruk di tikungan;
2. Ada jejak saat menjalankan dalam situasi saat ini. Bagaimana cara menghilangkan jejak dalam mode jawab?

Siswa yang tertarik dapat mencoba menerapkannya sendiri.

Contoh ini relatif sederhana dan tidak memiliki persyaratan yang tinggi untuk js. Cukup bagus untuk dimainkan.

Dan endingnya masih sama setiap saat. Jika ada kesalahan pada konten, harap tunjukkan; jika bermanfaat bagi Anda, silakan sukai dan simpan. Harap minta izin sebelum mencetak ulang dan sebutkan sumbernya ada pertanyaan, Anda dipersilakan untuk berkomunikasi melalui pesan pribadi. Halaman beranda Punya alamat email ~ hilang

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.