Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. Game Design
Gamedevelopment

Cara Membuat Permainan Hangman HTML5 dengan Kanvas: Lonceng dan Peluit

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Akihito (you can also view the original English article)

Selamat datang di bagian kedua dari tutorial permainan Hangman HTML5 ini. Sekarang  gameplay dasar telah selesai, kami akan menambahkan tambahan lonceng dan peluit: sistem Skor localStorage, animasi dan suara dan keyboard kontrol.


Juga tersedia dalam seri ini:

  1. Cara membuat permainan algojo HTML5 dengan kanvas: Gameplay dasar
  2. Cara membuat permainan algojo HTML5 dengan kanvas: lonceng dan peluit

Langkah 25: drawText()

Pada akhir bagian pertama dari tutorial ini, kita menunjukkan kata hanya ketika pemain kehilangan permainan. Mari kita menghapus kode dan menunjukkan kata pada awal lagi, untuk membantu debugging.

Menghapus baris waspada ("was\n kata benar" + hangman.theWord) dari dalam fungsi drawCanvas(), dan kemudian dalam createGuessWord() fungsi menambahkan berikut.

Kita perlu untuk menarik teks "Kasih menurunkan!!" Kapan pemain kehilangan permainan. Kita sudah menggambar Firman guess, jadi kita mulai mengulangi diri - dan setiap kali Anda melakukan sesuatu yang lebih dari sekali dalam program-program Anda Anda harus merangkum kode ke dalam fungsi dapat digunakan kembali.

Kami akan membuat fungsi generik drawText() yang menangani teks gambar di kanvas. Masukkan kode berikut di atas fungsi drawCanvas.

Semua yang kita lakukan di sini adalah encapsulating kode gambar. Kami menyampaikan dalam kata untuk menggambar, x dan y posisi, font dan warna. Kami akan menempatkan fungsi ini untuk digunakan pada langkah berikutnya.


Menggambar Teks "Kalah"

Tambahkan baris berikut dalam fungsi drawCanvas().

Kita memanggil fungsi drawText() dan 35px kami teks merah ke layar dengan kata-kata "Anda kehilangan!!". Jika Anda menguji sekarang dan kehilangan permainan kata akan muncul.


Langkah 27: Memperbarui doWin()

Dalam langkah ini kita akan mengkode animasi yang akan diputar bila pemain menerka kata dengan benar. Ini akan dicapai dengan menggunakan lembar sprite.

Kita perlu beberapa variabel baru, jadi Tambahkan baris berikut ke objek algojo.

Pastikan untuk menambahkan tanda koma setelah gameOver:false. imageCounter digunakan untuk melacak "frame" yang berada di dalam lembar sprite, dan imageInterval digunakan untuk mengulang blok kode terus menerus dengan memanggil setInterval ().

Memodifikasi fungsi doWin berikut.

Di sini kita ulang imageCounter objek algojo ke 0, dan menetapkan imageInterval ke Interval yang baru yang memanggil fungsi bernama drawWinScreen milidetik 120 setiap. Kami akan kode drawWinscreen() di langkah berikutnya, tapi pertama kita perlu memuat gambar kami.

Berikut adalah link ke setInterval () di situs developer.mozilla.org, dengan beberapa contoh untuk membantu Anda lebih memahami itu.


Langkah 28: Loading Sprite lembar

Dalam langkah ini kita akan memuat lembar sprite yang digunakan untuk animasi algojo. Kita membutuhkan sebuah variabel baru untuk kami gambar sprite lembar, sehingga menambahkan berikut ke objek algojo.

Pastikan Anda menambahkan tanda koma setelah imageInterval: null. Kemudian tambahkan kode berikut di bawah objek algojo.

Di sini kita menambahkan pendengar acara ke gambar, jenis "beban". Ini dipecat ketika gambar telah dimuat dan memanggil fungsi incrementAssetsLoaded. Kami kemudian menetapkan gambar src untuk "spriteSheet.png", yang dapat Anda temukan dalam file download.

Sekarang diperbaharui incrementAssetsLoaded() berikut.

Semua kita lakukan adalah memeriksa assetsLoaded Apakah sekarang sama dengan 2 (yaitu apakah kedua file Apakah loaded).


Langkah 29: drawWinScreen()

Sekarang gambar sprite lembar kita sedang loading, kita dapat melanjutkan dan menulis fungsi drawWinScreen().

Tambahkan kode berikut di bawah ini doWin() fungsi:

Hal pertama yang kita lakukan adalah jelas kanvas. Kami kemudian memeriksa apakah imageCounter lebih besar dari atau sama dengan 85 (ini adalah jumlah bingkai dalam lembar sprite saya menggunakan). Jika itu adalah, kita jelas interval kami mengatur dalam fungsi doWin() dan menggunakan setTimeout () untuk memanggil fungsi clearAndRestartGame setelah tiga detik. Kami kemudian menggunakan metode drawImage() kanvas menggambar gambar yang akan menjadi satu bagian dari spritesheet (frame animasi).

Kami menggambar beberapa teks ke layar menggunakan fungsi drawText() kami dan kemudian kita kenaikan properti imageCounter objek algojo.

Kanvas memiliki tiga berbeda drawImage() gambar metode, dan aku telah mendaftarkan mereka di bawah ini dengan tanda tangan mereka.

  • drawImage (gambar, x, y)
  • drawImage (gambar, x, y, lebar, tinggi)
  • drawImage (gambar, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

Dua yang pertama harus sendiri jelas; satu-satunya perbedaan antara keduanya adalah dalam kedua Anda dapat menentukan lebar dan tinggi. Yang ketiga mengambil argumen kekalahan sembilan, dan tidak terlalu mudah dimengerti dengan melihat tanda tangan. Metode ini memungkinkan Anda untuk menyalin sebagian dari gambar ke kanvas. Sx dan sy adalah sumber gambar x dan y, sWidth dan sHeight adalah sumber gambar lebar dan tinggi, dan yang lain adalah tujuan x, y, lebar dan tinggi di kanvas.

Gambar dalam lembar sprite yang 164 * 264, sehingga Anda seharusnya sekarang dapat sepotong bersama-sama bagaimana ctx.drawImage (hangman.hangmanSheet, 164*hangman.imageCounter, 0, 164, 264, 136, 58, 164, 264) bekerja. Kami menggunakan 164*hangman.imageCounter untuk memilih masing-masing gambar dari lembar pada gilirannya, karena hal ini terdiri dari beberapa gambar 164x264px berdampingan. Sisanya harus sendiri.

Sementara kita berada di sini, mari kita pergi ke depan dan kode fungsi clearAndRestartGame(). Tambahkan baris berikut di bawah fungsi drawWinScreen().

Jika Anda menguji permainan sekarang dan menebak kata yang tepat, Anda harus melihat animasi hangman bermain dengan kata-kata "Kasih menang!!". Kami akan kawat sampai suara di langkah berikutnya.

Berikut adalah link ke clearInterval() di developer.mozilla.org.


Langkah 30: Menampilkan kata setelah kehilangan

Sekarang kita mengingatkan kata pada awal setiap permainan, untuk membantu debugging. Tapi dalam permainan selesai kami ingin menunjukkan kata hanya ketika pemain kehilangan permainan. Memodifikasi fungsi drawCanvas() sebagai berikut:

Sini dengan gambar teks "Anda kehilangan" kami juga menunjukkan kata aslinya jika pemain kehilangan putaran. Sebaliknya kita menarik newGuessWord (yang satu dengan tanda tanya). Perhatikan kami menghapus kode asli kami telah menggambar kata pada awal fungsi juga.

Menguji sekarang dan kehilangan permainan; Anda harus melihat kata aslinya yang ditarik.


Langkah 31: HTML5 Audio

Dari pada spesifikasi HTML5 seluruh, aku akan mengatakan bahwa HTML5 audio adalah dalam bentuk terburuk dari semua tepat sekarang. Setiap vendor browser memilih apa yang harus dukungan - dukungan MP3, OGG dukungan, dukungan PCM (wav), dan beberapa dukungan kombinasi ini. Ada jenis audio yang tersedia, tetapi mereka kurang umum. Itu bisa berubah sewaktu-waktu serta: update bisa drop dukungan untuk satu atau yang lain. Ini menyajikan sedikit masalah dalam bahwa Anda hanya tidak bisa ambil MP3 file dan mengharapkan semua browser untuk memainkannya. Tapi untungnya spesifikasi HTML5 Audio menetapkan bahwa browser harus memberikan cara untuk mendeteksi jenis file yang dapat bermain. Kami akan menulis beberapa kode untuk mendeteksi apakah untuk memainkan MP3 atau OGG file sedikit kemudian.

Aku diuji app ini di Internet Explorer 9, Chrome 17 dan Firefox 4. Di bawah ini adalah grafik yang menunjukkan apa format masing-masing browser mendukung.


Dalam kasus Anda tertarik saya menggunakan html5test.com untuk mencari ini keluar; ini adalah situs yang besar untuk melihat apa HTML5 fitur peramban tertentu telah dilaksanakan.


Langkah 32: Memuat Audio File

Dalam langkah ini kita akan melihat bagaimana untuk me-load audio file. Dalam file download, Anda akan menemukan MP3 dan OGG file. Kita akan hanya bekerja dengan MP3 file sekarang, menambahkan dukungan untuk OGG di langkah berikutnya.

Kita membutuhkan sebuah variabel untuk file audio kita, maka dari itu tambahkan ke dalam objek hangman mu.

Di sini kita menetapkan variabel danceMusic sama dengan objek Audio() baru. Pastikan Anda menambahkan tanda koma setelah hangmanSheet: baru Image()

Sekarang tambahkan kode berikut di bawah hangman.hangmanSheet.src baris = "spriteSheet.png";.

Pastikan Anda menambahkan MP3 ke folder proyek Anda. Semua yang kita lakukan di sini adalah pengaturan danceMusic src sama dengan "danceMusic.mp3", menambahkan acara pendengar dari jenis canplaythrough, dan memanggil load() yang memuat audio file.

Ketika saya pertama adalah membangun aplikasi ini, saya menambahkan pendengar acara jenis beban canplaythrough... dan itu tidak pernah menembakkan. Saya menemukan bahwa HTML5 audio tidak memiliki beban pendengar acara; Sebaliknya canplaythrough harus digunakan. Ini dipecat ketika browser telah menentukan bahwa telah di-download cukup audio, harus Anda mulai bermain, itu akan bermain semua jalan melalui tanpa gangguan.

Jika Anda pergi ke w3.org dan melihat pada spesifikasi HTML5 audio Anda dapat mempelajari lebih lanjut tentang jenis kegiatan yang memiliki unsur-unsur Audio. Tekan CTRL-F dan ketik "canplaythrough" untuk belajar tentang acara kami menambahkan.

Sekarang mengubah fungsi incrementAssetsLoaded() sebagai berikut:

Di sini kita sekarang memeriksa assetsLoaded itu sama dengan 3 bukan 2, karena kita menambahkan aset yang ketiga. Jika Anda menguji sekarang permainan harus mulai (tapi pastikan Anda menguji dalam browser yang mendukung MP3!), memberikan Anda menambahkan MP3 ke folder source Anda. Jika tidak Anda akan mendapatkan sebuah kanvas kosong, jadi kita tahu kode bekerja.


Langkah 33: Bermain Audio File

Dalam langkah ini kita akan memainkan audio file setiap kali pengguna memenangkan permainan, bersama dengan animasi. Tambahkan kode berikut untuk drawWinScreen():

Di sini kita hanya memberitahu cara memanggil danceMusic.play(). Jika Anda memiliki mata yang tajam Anda mungkin menyadari kita panggil metode play() setiap kali kami menjalankan drawWinScreen() yang saat ini setiap 120 milidetik. Mengapa tidak itu bermain di atas itu sendiri, atau memulai kembali setiap kali? Yah, aku harus mengakui aku tidak tahu sendiri; hanya harus karya audio cara HTML5. Penambahan bonus bagaimanapun, itu segera berakhir, mulai bermain lagi merupakan hal yang saya inginkan.

Anda akan melihat bahwa game itu terus bermain bahkan setelah permainan baru dimulai. Kami akan memperbaikinya di langkah berikutnya.


Menghentikan Audio

Saat menulis tutorial ini, saya mencoba untuk : hangman.danceMusic.stop(). Tapi itu tidak berhasil. Sekali lagi aku melihat ke spesifikasi audio HTML5 dan menemukan bahwa HTML5 Audio tidak memiliki method stop(). Namun memiliki method pause(). Jadi Tambahkan baris berikut ke fungsi clearAndRestartGame():

Sekarang mainkan permainan dan menang dua kali. Apa? Audio mulai saat kami mempause itu. Kami ingin hal itu berhenti dan bermain dari awal. Jadi, berhubung HTML5 Audio tidak memiliki method stop() kita perlu datang dengan sesuatu yang lain

Ternyata kami memiliki properti currentTime, di mana kita dapat mengatur trek yang saat ini waktu (atau posisi, jika kamu mau). Semua yang perlu kita lakukan adalah me-reset ke 0, dan kami memiliki menirukan method stop. Bagaimana melakukan sesuatu yang begitu sederhana seperti method stop() dari spesifikasi Audio HTML5? Dugaan mu sebaik saya, tetapi setidaknya kita memiliki solusi.

Tambahkan baris berikut ke fungsi doWin():

Sekarang jika Anda menguji lagi audio akan berhenti ketika permainan baru dimulai, tetapi juga akan replay dari awal ketika Anda menang lagi.


Langkah 35: Cross Browser kompatibel Audio

Kita ingin musik untuk bermain tidak peduli apa browser pengguna yang terjadi untuk menggunakan. Dalam langkah ini kita akan menulis beberapa kode deteksi untuk melihat apakah kita harus memainkan MP3 atau OGG file. Ini harus mencakup semua browser to-date.

Spesifikasi HTML5 Audio menyatakan bahwa produsen browser harus menerapkan metode canPlayType() untuk elemen media tersebut, yang termasuk audio. Metode canPlayType() mengembalikan string kosong (respon negatif), "mungkin", atau "mungkin" berdasarkan seberapa yakin agen pengguna adalah bahwa ia dapat memainkan sumber media jenis tertentu. Dalam kode kita, kita akan menguji untuk "mungkin" dan "mungkin" string dan menganggap segalanya baik-baik saja jika kita mendapatkan satu atau yang lain.

Parameter Anda melewati ke canPlayType adalah jenis MIME ekstensi Anda menguji untuk. Tambahkan kode berikut di bawah checkGuess() fungsi:

Di sini kita menetapkan variabel sementara "ekstensi" untuk string kosong. Kita lewat di param disebut audio, yang akan menjadi elemen Audio. Pertama jika pernyataan kita memeriksa apakah ia dapat memutar jenis MIME dari "audio/ogg", dan jika kita menetapkan ekstensi sama dengan ".ogg".

Kedua kami menguji jenis MIME "audio/mp3" dan kembali ".mp3" jika itu berlalu.

Terakhir, kita kembali ekstensi. Jika browser mendukung .ogg dan .mp3, OGG file akan digunakan karena lain jika cabang tidak mendapatkan menjalankan.


Langkah 36: Bermain Audio

Sekarang bahwa kita memiliki kami berguna sedikit getAudioExtension() fungsi siap, mari kita membuat aplikasi ini bermain audio tidak peduli apa browser pengguna yang terjadi untuk menggunakan!

Tambahkan baris berikut di bawah garis var ctx = hangman.theCanvas.getContext("2d");

Di sini kita menetapkan variabel danceMusicAudio sama dengan string "danceMusic". Kami kemudian kita taktik pada extenison dengan menelepon getAudioExtension(hangman.danceMusic) ingat getAudioExtension() kembali ".ogg" atau ".mp3" Jadi kita membuat sebuah string yang sama dengan "danceMusic.ogg" atau "danceMusic.mp3". Juga, perhatikan bagaimana kami berlalu dalam hangman.danceMusic Audio elemen yang kita set sama dengan Audio() baru sebelumnya dalam tutorial.

Sekarang kita bahwa kita memiliki file yang tepat, kita hanya perlu untuk memperbarui src audio, sehingga mengubah baris relevan sebagai berikut:

Pastikan Anda menambahkan file "danceMusic.ogg" dari sumber download untuk proyek Anda dan mengujinya di Firefox. Itu harus bekerja seperti pada langkah sebelumnya. (Tes itu di sini.)

By the way, jika Anda mencari aplikasi gratis yang baik untuk mengkonversi file audio, Anda harus mempertimbangkan Audacity. It's open source juga, jadi jika Anda suka mencari melalui kode untuk melihat apa yang membuat ini centang, itu ada di sana untuk mengambil.


Langkah 37: Memeriksa penyimpanan lokal

Penyimpanan lokal merupakan bagian menarik dari HTML5 yang memungkinkan Anda untuk melakukan penyimpanan sisi peramban yang terus-menerus, berarti itu berlangsung antara sesi browser. Itu hanya menghilang ketika pengguna membersihkan cache browser mereka.

Itu adalah API yang sangat mudah untuk digunakan, tetapi dapat digunakan dalam beberapa cara yang berbeda. Salah satu cara adalah dengan menggunakan localStorage.setItem('key','value'), dan localStorage.getItem('key'). Cara lain adalah dengan menggunakan Object Notation: localStorage [kunci] = nilai untuk mengatur nilai, dan theValue = localStorage [kunci] untuk retrive itu. Dan, jika itu tidak cukup, belum ada ketiga cara - notasi titik: localStorage.key = nilai untuk mengatur itu, dan theValue = localStorage.key untuk mengambilnya.

Aku 'm memilih cara ketiga dalam tutorial ini, tetapi jika Anda memilih salah satu cara lain Anda dapat memodifikasi kode dan harus bekerja dengan baik. Penyimpanan lokal memiliki beberapa metode lain, tetapi ini hanya dua metode yang kita butuhkan: satu untuk menetapkan nilai dan satu untuk mengambil nilai tersebut.


Langkah 38: setWinScore()

Dalam langkah ini kita akan kode fungsi setWinScore() yang akan dijalankan setiap kali pengguna mulai permainan. Tambahkan kode berikut di bawah fungsi getAudioExtension() yang Anda buat di langkah diatas.

Kode ini akan memeriksa apakah sudah ada kunci localStorage dengan nilai numWins, dan menciptakan satu jika tidak ada.

Sekarang memanggil fungsi ini tepat di bawah tempat Anda membuat itu:


Langkah 39: updateWinScore

Dalam langkah ini kita kode updateWinScore yang menambahkan satu untuk localStorage.numWins ketika pemain memenangkan permainan.

Tambahkan kode berikut di bawah mana Anda memanggil fungsi setWinScore di atas.

Di sini kita melemparkan localStorage.numWins ke nomor dan menambahkan satu untuk itu.


Langkah 40: getWinScore()

Kita perlu cara untuk mengambil localStorage.numWins.

Tambahkan baris berikut di bawah updateWinScore Anda kode dalam langkah di atas:

Di sini kita membuat yakin ada localStorage.numWins dan kemudian hanya kembali.


Langkah 41: Penyimpanan lokal untuk menang

Sekarang bahwa kita memiliki sistem setup untuk menetapkan dan mengambil jumlah kali pengguna telah memenangkan permainan, mari kita menerapkannya.

Tambahkan kode berikut dalam fungsi doWin():

Di sini kita menyebut hanya updateWinScore() setiap kali pemain memenangkan permainan. Sekarang tambahkan kode berikut dalam fungsi drawCanvas():

Di sini kami menggunakan fungsi drawText() kita menggambar kata "Memenangkan permainan" dan berapa kali pengguna telah memenangkan. Sejak getWinScore() kembali nomor sebagai string, kita hanya concatenate itu ke ujung "Memenangkan permainan".

Jika Anda menguji sekarang Anda akan melihat "Permainan menang 0", dan jika Anda menang permainan itu harus kenaikan. Tutup browser dan tes lagi, dan Skor Anda harus tetap ada.


Langkah 42: setLoseScore()

Tambahkan kode berikut di bawah fungsi getWinScore() yang Anda buat di langkah diatas.

Ini adalah kode yang sama sebagai setWinScore(), hanya kami sedang mengatur localStorage.numLost. Pastikan Anda memanggil fungsi juga.


Langkah 43: updateLostScore()

Dalam langkah ini kami memperbarui nilai hilang. Sama berurusan sebagai sebelumnya, hanya kita menggunakan localStorage.numLost.


Langkah 44 : getLostScore()

Tambahkan baris berikut di bawah updateLostScore() fungsi yang ditambahkan pada langkah di atas:

Sama sekali lagi, saya yakin Anda mendapatkan titik! Bergerak di.


Langkah 45: Penyimpanan lokal untuk kerugian

Dalam langkah ini kita akan melaksanakan penyimpanan lokal untuk ketika pemain kehilangan permainan.

Tambahkan kode berikut untuk drawCanvas() fungsi:

Di sini kami memperbarui localStorage.numLost dan menarik jumlah kali pemain telah kehilangan.

Uji halaman sekarang dan kehilangan beberapa permainan, tutup browser dan kembali; Kamu akan melihat beberapa permainan yang hilang masih dimunculkan.


Langkah 46: addKeyListener()

Beberapa pemain dapat memilih untuk menggunakan keyboard, daripada mengklik tombol. Dalam langkah ini kita akan mulai menambahkan interaksi keyboard. Tambahkan kode berikut di bawah fungsi enableButtons() yang Anda buat sebelumnya dalam tutorial.

Di sini kita menciptakan addKeyListener() fungsi yang menggunakan jQuery's on() metode untuk menambahkan acara keyup ke dokumen. Sekarang tambahkan di dalam startGame().

Kita akan tunggu sampai permainan mulai menambahkan listener, karena sebagai dengan tombol, jika pengguna mulai menekan tombol sebelum aset telah dimuat itu akan mengacaukan permainan.

Sekarang uji halaman dan kamu harus mampu menekan tombol apapun pada keyboard dan mendapatkan peringatan ("Key Pressed") muncul.

Berikut adalah link untuk jQuery's on() metode sehingga Anda dapat mempelajari lebih lanjut tentang ini.


Langkah 47: removeKeyListener()

Dalam langkah ini kita akan menambahkan kode untuk menghapus kunci pendengar. Kita perlu untuk menghapus pendengar kunci ketika pengguna menang atau kehilangan permainan, seperti bagaimana kami menonaktifkan tombol.

Tambahkan baris berikut di bawah fungsi addKeyListener() yang Anda buat di langkah diatas.

Di sini kita sebut jQuery's off() metode dan lulus dalam "keyup"; ini mematikan semua pendengar dari jenis keyup.

Sekarang tambahkan berikut dalam fungsi drawCanvas():

Di sini kita memanggil removeKeyListener() ketika pemain kehilangan permainan. Kita juga perlu untuk melakukan hal ini ketika pemain memenangkan pertandingan, sehingga menambahkan berikut dalam fungsi checkGuess() @

Sekarang uji halaman dan tekan tombol pada keyboard Anda harus mendapatkan waspada, menang atau kehilangan permainan dan tekan tombol pada keyboard, Anda tidak harus mendapatkan peringatan. Namun, setelah permainan baru mulai kemudian lansiran harus bekerja lagi.

Berikut adalah link untuk jQuery's off() metode sehingga Anda dapat mempelajari lebih lanjut tentang ini.


Langkah 48: Finishing interaksi Keyboard

Sekarang bahwa kita memiliki tombol ditekan bekerja pada waktu yang betul dalam permainan, kami akan menulis kode yang menggunakan surat apapun pengguna telah ditekan dalam fungsi checkGuess().

Pertama, mengubah fungsi addKeyListener() sebagai berikut:

Di sini kami menghapus alert ("tombol ditekan") dan menggantinya dengan sebuah panggilan ke fungsi checkGuess(). Kita lewat acara dan benar sepanjang sebagai parameter. Jika Anda ingat, tombol fungsi ini sama checkGuess(); kita lewat benar karena ini adalah menekan tombol. (Dengan tombol kami melewati palsu.)

Sekarang memodifikasi fungsi checkGuess sebagai berikut - tidak banyak kode baru di sini tetapi saya akan menjelaskan langkah demi langkah:

Di sini kita menciptakan nama variabel baru RegEx yang akan digunakan sebagai ekspresi reguler pengujian. Kami juga bergerak correctGuess atas dengan semua variabel-variabel lainnya.

Kami memeriksa jika (isKeyPress == benar); Jika itu palsu, kita melompat ke bagian lain dari kode, yang harus akrab karena kode yang sama seperti sebelumnya.

Jika memang benar, kemudian kita menetapkan currentButton sama dengan "btn_"+String.fromCharCode(event.keyCode). Ini setara dengan sesuatu seperti "btn_A", "btn_G" dll. Kami menggunakan metode String.fromCharCode() untuk mengubah event.keyCode tombol keyboard ke Surat.

Tambahkan alert(event.keyCode) di atas currentButton jalur = "btn_"+String.fromCharCode(event.keyCode) dan tes halaman. Ketika Anda menekan pada huruf yang berbeda Anda harus mendapatkan nomor yang berbeda setiap kali. Berikut adalah tabel yang menunjukkan kode kunci untuk keyboard, dan link ke String.fromCharCode() untuk membantu Anda lebih memahami penggunaannya.

Selanjutnya kita menetapkan theLetter setara dengan $("#" + currentButton).text().toLowerCase(). Di sini kami menggunakan jQuery pemilih untuk mendapatkan correctButton. $("#"+currentButton) akan sama dengan ("#btn_A"), ("#btn_G") dll - dan ingat, tombol diklik kami memiliki id "btn_A", "btn_G", dan sebagainya. Kami berikutnya menggunakan teknik seleksi yang sama untuk menambahkan atribut Penyandang Cacat ke tombol yang sesuai, karena itu adalah menebak.

Akhirnya kita menjalankan tes ekspresi reguler terhadap theLetter; Jika tidak lulus kita kembali dari fungsi, jadi tidak ada kode lain mendapat menjalankan. Kami melakukan ini alasannya karena kami ingin memastikan bahwa mereka menekan huruf, khusus. Jika kita tidak melakukan ini, dan mereka ditekan, misalnya, tombol Shift atau nomor 7, itu akan dihitung sebagai jawaban yang salah. / [A-zA-Z] / reqular ekspresi cocok setiap huruf a-z Apakah huruf besar atau huruf kecil.

(Jeffrey cara baru ini merilis sebuah kursus kalimat biasa, jadi jika daerah ini baru bagi Anda pastikan untuk check it out!)

Jika kamu memainkan permainan sekarang kamu harus dapat menebak huruf menggunakan keyboard. Namun, masih ada satu bug, kita perlu bekerja - Apakah kamu bisa menemukan itu? Baca langkah berikutnya untuk melihat apa itu.


Langkah 49: Memperbaiki Keyboard Bug

Apakah Anda menemukannya? Hal ini terjadi, bahwa jika Anda menekan sama kunci dua kali itu akan dihitung dua kali. Anda pada dasarnya bisa kehilangan permainan hanya dengan menekan tombol salah enam kali berturut-turut! Mari kita memperbaiki hal ini.

Tambahkan baris berikut ke objek algojo:

Pastikan Anda menambahkan tanda koma setelah baris danceMusic: Audio() baru. Di sini kami menambahkan sebuah array guessedLetters. Kami akan menggunakan array untuk melacak Surat-surat yang pemain telah menerka sudah. Tambahkan kode berikut dalam fungsi checkGuess():

Di sini kita memeriksa apakah Surat sudah dalam array dengan menggunakan berbagai metode indexOf(); metode ini mengembalikan posisi apa yang Anda Cari dalam array. Kembali -1 jika tidak menemukan itu, sebaliknya mengembalikan indeks dari item dalam array.

Kami tidak benar-benar peduli tentang Surat itu posisi yang sebenarnya, tetapi jika itu lebih besar dari atau sama dengan nol kita tahu bahwa itu sudah dalam array dan telah dengan demikian telah menduga, jadi kami kembali dari fungsi, dan tidak ada kode lain berjalan.

Jika Surat itu tidak dalam array maka kita push() ke akhir array.

Berikut adalah link ke indexOf() dan push() metode array dengan beberapa contoh kode sehingga Anda dapat belajar lebih banyak tentang mereka.

Kita perlu me-reset guessedLetters array ketika permainan baru dimulai, jadi Tambahkan kode berikut dalam metode doGameOver():

Anda dapat menguji sekarang, dan menekan tombol yang sama dua kali akan memiliki tanpa efek buruk.


Kesimpulan

Dengan melalui tutorial ini, Anda telah belajar beberapa teknik-teknik khusus HTML5, dan telah belajar bagaimana program yang menyenangkan dan menarik permainan algojo. Saya harap Anda telah belajar sesuatu yang berguna, dan terima kasih untuk membaca!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.