Apa cara terbaik untuk membuat kode dalam javascript?

Ingin berlatih dengan JavaScript atau membangun portofolio Anda untuk mengesankan manajer perekrutan?

Menurut JavaScript telah menghabiskan sembilan tahun berturut-turut sebagai bahasa pemrograman yang paling umum digunakan, dengan 69% pengembang menggunakannya secara ekstensif. Jika Anda tertarik menjadi pengembang web (front end, back end, atau full stack), JavaScript adalah salah satu bahasa pemrograman terbaik yang dapat Anda pelajari. Salah satu cara untuk melakukannya adalah dengan melakukan beberapa proyek JavaScript untuk pemula

Vanilla JavaScript, juga dikenal sebagai JavaScript "polos" — artinya tanpa kerangka kerja apa pun — adalah salah satu dasar pengkodean dan pengembangan web. Sebagian besar halaman web yang Anda lihat dibuat menggunakan kombinasi HTML, CSS, JavaScript vanilla, dan panggilan API

Mengenal dasar-dasar JavaScript berarti menggunakan keterampilan JavaScript tersebut untuk membangun proyek latihan JavaScript. Untungnya, kami mengetahui beberapa proyek pemula JavaScript menyenangkan yang dapat Anda lakukan untuk mengasah keterampilan Anda dari ribuan siswa yang telah kami latih dalam program pelatihan kerja pengembangan ujung depan kami, Masuk ke Teknologi

Apa yang kami lihat dengan siswa sukses kami yang telah mendapatkan pekerjaan di perusahaan seperti GoDaddy, Toast, Asics Digital, 1Password, Figure, dan Apple adalah bahwa mereka semua memiliki proyek praktik JavaScript, portofolio yang memamerkan keterampilan pengembang ujung depan mereka, dan sangat berpengalaman. . Melakukan proyek JavaScript untuk pemula adalah cara yang bagus untuk berlatih dan membangun portofolio Anda

Jika Anda ingin melatih keterampilan pengembang ujung depan Anda, kami telah menyusun daftar 20+ proyek pemula JavaScript yang dapat Anda mulai kerjakan sekarang juga. Saat Anda menemukan proyek latihan JavaScript yang menarik minat Anda, ikuti tautan proyek. Masing-masing proyek JavaScript open source untuk pemula (dan lebih tinggi) ini memiliki kode sumber yang tercantum di beranda mereka untuk Anda gunakan sebagai panduan

Lisa Savoie, salah satu instruktur JavaScript Skillcrush, merekomendasikan membaca kode sumber dengan lantang untuk memahaminya dengan lebih baik, mencari fitur untuk dimasukkan ke dalam proyek lain, atau bahkan mengetik ulang untuk bekerja pada memori otot Anda tentang cara menulis fungsi, variabel, dan loop

Dia berkata, “Anda dapat menggunakan metode Google yang tidak Anda kenal untuk mempelajarinya lebih lanjut atau bahkan memecahkan kode dan memperbaikinya — Sangat menyenangkan untuk memecahkan banyak hal😀. ”

Daftar isi

Apakah Teknologi Tepat Untuk Anda?

Anda Akan Belajar. Jika karir di bidang teknologi tepat untuk Anda Karier teknologi apa yang sesuai dengan kekuatan Anda Keterampilan apa yang Anda butuhkan untuk mencapai tujuan Anda

Kesalahan Umum Proyek Pemula JavaScript

1. Salah ketik
2. Baca apa yang dikatakan konsol kepada Anda, terutama jika Anda terus menerima pesan kesalahan
3. Apakah Anda bekerja dengan jenis variabel yang tepat?
4. Apakah logika Anda masuk akal?
5. Apakah Anda memperhitungkan kasus tepi seperti input kosong atau bilangan bulat negatif?
6. Apakah Anda meneruskan jenis/jenis argumen yang tepat ke suatu fungsi?

Proyek JavaScript untuk Pemula

1. Elemen Arahkan Mouse

Mengapa proyek ini?

• Anda akan melihat bagaimana fungsi JavaScript bekerja dan melatih logika JavaScript Anda
• Ini adalah proyek JavaScript pemula yang menyenangkan untuk menghidupkan pengalaman pengguna Anda
• Pelajari lebih lanjut tentang menggunakan acak, fungsi, dan event listener

Kode Sumber Elemen Mouseover

Konsep kunci tertutup

• Fungsi dan pernyataan if-else
• Acak
• Pendengar acara

Apa yang harus dilakukan

1. Salin kode sumber dari CodePen
2. Terapkan kode JavaScript sehingga saat Anda mengarahkan mouse ke bola berwarna, itu menjadi lebih besar

Tantangan Bonus

Untuk menguji pemahaman Anda tentang konsep di balik elemen mouseover, tantangan bonus Anda adalah proyek kursor khusus ini

2. Jam JavaScript

Mengapa proyek ini?

• Anda mendapatkan langsung jenis pekerjaan aktual yang akan Anda lakukan sebagai pengembang JavaScript
• Anda akan menerapkan konsep utama JavaScript dan memiliki proyek menarik untuk portofolio Anda
• Praktikkan konsep seperti variabel, logika kondisional, dan API tanggal

Kode Sumber Jam JavaScript

Konsep kunci tertutup

• Variabel
• Logika kondisional
• Aliran program
• Fungsi
• Pendengar acara
• Tanggal API
• elemen DOM

Apa yang harus dilakukan

1. Salin kode sumber dari CodePen
2. Terapkan kode JavaScript sehingga setiap kali Anda mengklik tombol “Party Time. ” dalam rentang waktu yang Anda tentukan, Anda mendapatkan LOLcat yang berbeda. Anda dapat mengatur waktu yang berbeda untuk melihat gambar yang berbeda — total ada empat gambar

Tantangan bonus
Sekarang setelah Anda menguasai jam JavaScript Lolcat, tantang diri Anda dengan membuat penghitung waktu mundur Anda sendiri

3. Bola 8 Ajaib

Mengapa proyek ini?

• Ini memberi Anda dasar yang kuat untuk cara menggunakan Matematika. acak untuk menghasilkan hasil acak untuk proyek JavaScript
• Anda dapat menggunakan proyek ini untuk mengesankan teman-teman Anda dan membuat keputusan kecil dalam hidup
• Pelajari selengkapnya tentang cara menggunakan fungsi acak, fungsi bersarang, dan pemroses peristiwa

Kode Sumber Sihir 8 Bola

Konsep kunci tertutup

• Matematika. acak
• Fungsi bersarang
• Pendengar acara

Apa yang harus dilakukan

1. Salin kode sumber dari GitHub untuk HTML dan CSS
2. Terapkan kode JavaScript sehingga Anda dapat mengambil bola 8, mengajukan pertanyaan, mengocoknya, dan membuat bola 8 merespons dengan jawaban yang agak membingungkan dan dapat diterapkan

Tantangan Bonus

Untuk menguji pemahaman Anda tentang konsep di balik Magic 8 Ball, tantangan bonus Anda adalah pembuat lelucon ayah ini

4. Daftar Pekerjaan

Mengapa proyek ini?

• Anda akan meningkatkan keterampilan Anda dalam membuat kode daftar interaktif, yang memungkinkan pengguna menambahkan, menghapus, dan mengelompokkan item
• Anda dapat menggunakan proyek JavaScript pemula ini dalam kehidupan sehari-hari dan menambahkannya ke portofolio Anda
• Pelajari lebih lanjut cara menggunakan larik, fungsi bersarang, dan API penyimpanan lokal

Kode Sumber Daftar Tugas

Konsep kunci tertutup

• API penyimpanan lokal
• Array
• Fungsi bersarang
• Pendengar acara
• manipulasi DOM

Apa yang harus dilakukan

1. Salin kode sumber dari CodePen
2. Terapkan kode JavaScript sehingga Anda dapat menambahkan item baru dan menggunakan tombol untuk mengalihkan item yang sudah selesai, mengedit item, atau menghapus item

Tantangan Bonus

Untuk menguji pemahaman Anda tentang konsep di balik daftar Tugas, tantangan bonus Anda adalah daftar belanjaan JavaScript ini

5. Daftar Putar Campuran Epik

Mengapa proyek ini?

• Ini membantu Anda melatih keterampilan JavaScript inti, seperti loop forEach dan pendengar acara, dan bekerja dengan fungsi dan daftar
• Anda dapat menggunakan proyek ini untuk menunjukkan kepada orang-orang yang melihat portofolio Anda tentang selera musik Anda yang luar biasa
• Pelajari lebih lanjut cara classList, innerHTML, forEach, dan template literal

Kode Sumber Daftar Putar Epic Mix

Konsep kunci tertutup

• Loop array (untukEach)
• dokumen. createElement
• Tambahkan ke array
• Templat literal

Apa yang harus dilakukan

1. Salin kode sumber dari CodeSandbox
2. Terapkan kode JavaScript sehingga Anda dapat membuat daftar lagu favorit yang dibuat secara otomatis dan indeksnya

Tantangan Bonus

Untuk menguji pemahaman Anda tentang konsep di balik playlist campuran epik, tantangan bonus Anda adalah daftar film favorit ini

6. Penyelamatan Hewan Peliharaan

Mengapa proyek ini?

• Ini memberi Anda dasar yang kuat untuk memahami pola dan parameter fungsi pabrik
• Anda dapat menggunakan proyek ini untuk berkontribusi pada penyelamatan hewan peliharaan atau menampilkan inventaris produk di situs e-niaga
• Pelajari selengkapnya tentang cara menggunakan fungsi pabrik, parameter, metode, dan objek

Kode Sumber Penyelamatan Hewan Peliharaan

Konsep kunci tertutup

• Fungsi pabrik
• Metode dan properti objek

Apa yang harus dilakukan

1. Salin kode sumber dari CodeSandbox
2. Terapkan kode JavaScript sehingga Anda dapat menerima nama hewan, spesies, dan tingkat energi sebagai parameter dan menunjukkan status setiap hewan (apakah sedang tidur atau terjaga)

Tantangan Bonus

Untuk menguji pemahaman Anda tentang konsep di balik Pet Rescue, tantangan bonus Anda adalah sistem inventaris ini

7. Perangkat Drum

Mengapa proyek ini?

• Anda dapat melihat interaksi antara melihat elemen di halaman dan mendengarkan suara serta mempelajari cara menambah dan menghapus elemen
• Anda dapat menggunakan proyek ini untuk melatih keterampilan drum Anda dengan keterampilan JavaScript Anda
• Pelajari lebih lanjut tentang cara menggunakan tag audio dan dokumen. querySelector

Kode Sumber Perangkat Drum

Konsep kunci tertutup

• Array
• Pendengar Acara
• Tag audio
• dokumen. querySelector
• Kelas

Apa yang harus dilakukan

1. Klon repo GitHub
2. Terapkan kode JavaScript sehingga Anda dapat memainkan drum dengan menekan tombol tertentu di browser

Tantangan Bonus

Untuk menguji pemahaman Anda tentang konsep di balik perangkat drum, tantangan bonus Anda adalah pemain piano JavaScript ini

8. Deteksi Ucapan

Mengapa proyek ini?

• Ini memberi Anda dasar untuk memahami cara kerja deteksi ucapan, yang bagus (dan sangat keren. ) untuk mengetahui
• Anda akan memiliki metode pencatatan yang bagus langsung di browser Anda
• Pelajari lebih lanjut tentang pengenalan ucapan, konten teks, dan pendengar acara

Kode Sumber Deteksi Suara

Konsep kunci tertutup

• Jendela. Pengenalan suara
• Array
• teksKonten
• Pendengar acara

Apa yang harus dilakukan

1. Salin kode sumber dari GitHub
2. Terapkan kode JavaScript sehingga saat Anda berbicara, apa pun yang Anda katakan akan ditranskripsikan pada kertas bergaris di layar Anda

Tantangan Bonus

Untuk menguji pemahaman Anda tentang konsep di balik deteksi ucapan, tantangan bonus Anda adalah teks ke ucapan ini dalam berbagai bahasa

9. Navigasi Lengket

Mengapa proyek ini?

• Ini mengajarkan Anda bagaimana menjaga elemen Anda dalam posisi tetap pada halaman, yang merupakan keterampilan yang mungkin Anda perlukan dalam peran pengembang ujung depan Anda
• Anda dapat menggunakan ini untuk meningkatkan desain situs web atau portofolio Anda
• Pelajari selengkapnya tentang cara menggunakan pemilih kueri, pemroses peristiwa, dan penyeimbangan

Kode Sumber Navigasi Lengket

Konsep kunci tertutup

• querySelector
• offsetTop
• Pendengar acara

Apa yang harus dilakukan

1. Salin kode sumber dari GitHub
2. Terapkan kode JavaScript sehingga saat Anda menggulir ke atas atau ke bawah halaman, bilah navigasi Anda tetap pada posisi tetap dan terlihat

Tantangan Bonus

Untuk menguji pemahaman Anda tentang konsep di balik navigasi lengket, tantangan bonus Anda adalah membuat navigasi geser

10. Geolokasi

Mengapa proyek ini?

• Anda dapat mempelajari lebih lanjut tentang cara mengembangkan untuk seluler, cara kerja geolokasi, dan cara menguji kode Anda menggunakan simulator atau perangkat lain
• Anda dapat menggunakan proyek ini dalam kehidupan sehari-hari Anda (jika Anda mudah tersesat)
• Pelajari lebih lanjut cara menggunakan pemilih kueri, posisi jam tangan, dan koordinat

Kode Sumber Geolokasi

Konsep kunci tertutup

• querySelector
• watchPosition
• teksKonten

Apa yang harus dilakukan

1. Salin kode sumber dari GitHub
2. Instal paket dengan npm dan jalankan server lokal Anda
3. Terapkan kode JavaScript sehingga Anda dapat melihat lokasi Anda secara real time. Anda memerlukan iOS atau simulator iOS untuk menguji apakah kode Anda berfungsi atau tidak

Tantangan Bonus

Untuk menguji pemahaman Anda tentang konsep di balik geolokasi, tantangan bonus Anda adalah alat prakiraan cuaca ini

11. Aplikasi Film

Mengapa proyek ini?

• Ini memberi Anda dasar yang kuat tentang cara kerja JavaScript dengan HTML, CSS, dan alat lainnya
• Anda dapat menggunakan proyek ini untuk membuat aplikasi film kustom Anda sendiri
• Pelajari lebih lanjut tentang cara menggunakan JavaScript dengan jQuery, Bootstrap, dan panggilan API

Kode Sumber Aplikasi Film

Konsep kunci tertutup

• panggilan API
• Fungsi
• Pada acara klik

Apa yang harus dilakukan

1. Salin kode sumber dari GitHub
2. Anda harus mendapatkan sendiri kunci API
3. Terapkan kode JavaScript sehingga Anda dapat membuat aplikasi film sendiri yang memungkinkan Anda melihat film paling populer, mengurutkannya berdasarkan genre, dan mencari film lain

Tantangan Bonus

Untuk menguji pemahaman Anda tentang konsep di balik aplikasi film, tantangan bonus Anda adalah membuat laman landas e-niaga

12. Tanda nama

Mengapa proyek ini?

• Sebagai proyek JavaScript pemula, ini memungkinkan Anda berlatih menggunakan React untuk membuat alat yang praktis dan berguna
• Anda dapat menggunakan proyek ini untuk mengasah keterampilan React dan konsep kunci Anda
• Pelajari lebih lanjut cara menangani input pengguna, bekerja dengan komponen stateful, dan merender model data array

Kode Sumber Generator Tag Nama

Konsep kunci tertutup

• Menangani masukan pengguna
• Komponen stateful
• Render model data array

Apa yang harus dilakukan

1. Salin kode sumber dari CodeSandbox
2. Terapkan kode JavaScript sehingga Anda dapat membuat kotak teks dan tombol agar pengguna dapat memasukkan teks dan memintanya merespons masukan tersebut dengan membuat tag nama baru

Tantangan Bonus

Untuk menguji pemahaman Anda tentang konsep di balik generator tag nama, tantangan bonus Anda adalah generator Pokemon React ini

Apakah Teknologi Tepat Untuk Anda?

Anda Akan Belajar. Jika karir di bidang teknologi tepat untuk Anda Karier teknologi apa yang sesuai dengan kekuatan Anda Keterampilan apa yang Anda butuhkan untuk mencapai tujuan Anda

Proyek JavaScript Menengah

13. Nada. js

Mengapa proyek ini?

• Anda akan mempelajari cara membuat musik browser web interaktif dengan kemampuan penjadwalan lanjutan, synth dan efek, serta abstraksi musik intuitif yang dibangun di atas API Audio Web
• Anda dapat menggunakan proyek ini untuk menjadi DJ dan produser musik pribadi Anda, gratis
• Pelajari lebih lanjut tentang cara menggunakan event listener, triggerAttack, triggerRelease, dan berbagai jenis synth

Nada. Kode Sumber js

Konsep kunci tertutup

• triggerAttack dan triggerRelease
• Pendengar acara
• querySelector
• nada. Lingkaran

Apa yang harus dilakukan

1. Salin kode sumber dari Nada. js GitHub. halaman io
2. Terapkan kode JavaScript sehingga Anda dapat membuat musik interaktif di browser Anda sendiri

Tantangan Bonus

Untuk menguji pemahaman Anda tentang konsep di balik daftar Tugas, tantangan bonus Anda adalah daftar belanjaan JavaScript ini

14. Peta Pemilu

Mengapa proyek ini?

• Ini memberi Anda dasar yang kuat tentang perbedaan antara JavaScript, HTML, dan CSS, terutama apa yang dilakukan JavaScript dan bagaimana melakukannya
• Anda dapat menggunakan proyek ini dalam kehidupan sehari-hari dan menambahkannya ke portofolio Anda
• Pelajari lebih lanjut tentang cara menggunakan array dan fungsi bersarang

Kode Sumber Peta Pemilu

Konsep kunci tertutup

• Latihan if-else dan fungsi
• Hubungan orangtua-anak
• getElementById

Apa yang harus dilakukan

1. Salin kode sumber dari JSBin
2. Terapkan kode JavaScript sehingga Anda dapat menambahkan dua kandidat yang mencalonkan diri sebagai presiden dan menampilkan jumlah suara yang mereka terima dari setiap negara bagian, baik dalam tabel di kanan bawah maupun saat Anda mengarahkan mouse ke suatu negara bagian

Tantangan Bonus

Untuk menguji pemahaman Anda tentang konsep di balik peta pemilihan, tantangan bonus Anda adalah peta interaktif ini

15. Otentikasi Masuk

Mengapa proyek ini?

• Ini memperkenalkan Anda ke Angular JS dan konsep JavaScript yang lebih canggih
• Anda dapat melihat cara kerja autentikasi masuk di balik layar
• Pelajari lebih lanjut cara menggunakan status fungsi, pengontrol aplikasi, dan dependensi

Masuk Kode Sumber Otentikator

Konsep kunci tertutup

• AngularJS
• Manajemen negara
• Pengontrol aplikasi
• Ketergantungan

Apa yang harus dilakukan

1. Salin kode sumber dari CodePen
2. Terapkan kode JavaScript sehingga Anda dapat memasukkan alamat email dan kata sandi, dan biarkan sistem memberi tahu Anda jika alamat email tidak valid saat Anda menekan tombol "Kirim"

Tantangan Bonus

Untuk menguji pemahaman Anda tentang konsep di balik Login Authenticator, tantangan bonus Anda adalah pembuat kata sandi ini

16. Tebak kata

Mengapa proyek ini?

• Ini memberi Anda dasar yang kuat untuk metode, membuat variabel global, dan bekerja dengan event listener
• Anda dapat menggunakan proyek ini sebagai permainan pesta atau tantangan dengan teman dan rekan kerja Anda
• Pelajari selengkapnya tentang cara menggunakan metode, fungsi, dan ekspresi reguler

Tebak Kode Sumber Kata

Konsep kunci tertutup

• Metode seperti match(), split(), trim(), dan join()
• Ekspresi reguler
• querySelector
• Pendengar acara

Apa yang harus dilakukan

1. Salin kode sumber dari GitHub
2. Terapkan kode JavaScript sehingga pemain memulai dengan memasukkan huruf. Jika mereka menebak dengan benar, huruf itu muncul di kata. Jika mereka salah menebak, mereka belajar berapa banyak tebakan yang tersisa. Pemain juga dapat melihat huruf mana yang sudah mereka tebak. Gim ini memberi tahu pemain jika mereka sudah menebak huruf atau memasukkan karakter non-abjad

Tantangan Bonus

Untuk menguji pemahaman Anda tentang konsep di balik game Tebak Kata, tantangan bonus Anda adalah game Wordled ini

Peringatan. tingkat kesulitan untuk ini sudah lanjut, jadi jika Anda mengalami masalah, itu bukan Anda

17. Terminalizer

Mengapa proyek ini?

• Ini mengajarkan Anda cara merekam layar terminal Anda dan membagikan pekerjaan Anda dengan orang lain
• Anda dapat menggunakan proyek ini untuk men-debug dan mengerjakan proyek pengkodean dengan teman
• Pelajari lebih lanjut tentang cara menggunakan file rekaman, penundaan bingkai, dan menyetel waktu diam

Kode Sumber Terminalizer

Konsep kunci tertutup

• Merekam file
• Menggunakan frameDelay
• Mengatur waktu menganggur

Apa yang harus dilakukan

1. Salin kode sumber dari GitHub
2. Terapkan kode JavaScript sehingga Anda dapat merekam terminal dan membuat gambar GIF animasi atau membagikan tautan pemutar web

Tantangan Bonus

Untuk menguji pemahaman Anda tentang konsep di balik Terminalizer, tantangan bonus Anda adalah mengetahui cara memutar/menjeda GIF

18. Aplikasi Obrolan

Mengapa proyek ini?

• Ini memberi Anda dasar yang kuat tentang bagaimana JavaScript dan pustaka bagian depan dan belakangnya dapat digunakan untuk membuat aplikasi
• Anda dapat menambahkan proyek ini ke portofolio Anda untuk menunjukkan pengetahuan Anda tentang konsep pemrograman sebagai full stack developer
• Pelajari lebih lanjut tentang cara menggunakan ReactJS, NodeJS, dan soket bersama dengan JavaScript

Kode Sumber Aplikasi Obrolan dan tautan tutorial YouTube

Konsep kunci tertutup

• Reaksi
• Node
• Soket

Apa yang harus dilakukan

1. Anda tidak akan dapat mengkloning dan menjalankan proyek langsung dari GitHub karena tidak ada paket. json, tetapi Anda dapat membuatnya menggunakan tutorial YouTube
2. Terapkan kode JavaScript sehingga Anda dapat membuat aplikasi obrolan waktu nyata yang memungkinkan Anda mengirim dan menerima pesan menggunakan soket web

Tantangan Bonus

Untuk menguji pemahaman Anda tentang konsep di balik aplikasi obrolan, tantangan bonus Anda adalah editor teks Bereaksi ini

19. Permainan Tic Tac Toe

Mengapa proyek ini?

• Proyek ini akan menguji semantik HTML dan keterampilan logika JavaScript Anda
• Anda dapat menggunakan ini sebagai proyek latihan dan melakukan sesuatu saat kode Anda dikompilasi
• Pelajari selengkapnya tentang cara menggunakan array, metode kisi, dan event listener

Kode Sumber Tic-Tac-Toe

Konsep kunci tertutup

• Array
• Pendengar acara

Apa yang harus dilakukan

1. Salin kode sumber dari CodePen
2. Terapkan kode JavaScript sehingga pemain dapat mengatur tingkat kesulitan sebagai mudah atau sulit, memilih apakah akan bermain sebagai X atau O, bermain game dengan komputer, mengingat siapa yang menang atau seri, dan bermain lagi

Tantangan Bonus

Untuk menguji pemahaman Anda tentang konsep di balik permainan Tic-Tac-Toe, tantangan bonus Anda adalah permainan algojo ini

20. Aplikasi Pemesanan Hotel

Mengapa proyek ini?

• Anda akan mempraktikkan konsep kunci dalam JavaScript ES6 dan React JSX
• Anda dapat menggunakan proyek ini untuk berlatih membangun situs dengan lebih banyak fungsi dan menggunakan sebagian kreativitas Anda dengan membuatnya terlihat sangat keren
• Pelajari lebih lanjut tentang cara mengelola aliran data dan memanipulasi DOM

Kode Sumber Aplikasi Pemesanan Hotel

Konsep kunci tertutup

• Latihan ES6 dan React JSX
• Mengelola aliran data
• manipulasi DOM

Apa yang harus dilakukan

1. Salin kode sumber dari CodePen
2. Terapkan kode JavaScript sehingga Anda dapat membuat contoh pemesanan di situs hotel, lengkap dengan hasil pencarian yang difilter, tampilan inventaris kamar, dan peringkat hotel

Tantangan Bonus

Untuk menguji pemahaman Anda tentang konsep di balik Aplikasi Pemesanan Hotel, tantangan bonus Anda adalah aplikasi pemesanan tiket ini

Proyek JavaScript Tingkat Lanjut

21. Permainan Labirin

Mengapa proyek ini?

• Ini memberi Anda ide yang kuat tentang bagaimana keterampilan dan fungsi inti JavaScript dapat digunakan untuk membuat game interaktif
• Anda dapat memasukkan proyek ini ke dalam portofolio Anda dan menantang teman
• Pelajari lebih lanjut tentang cara menggunakan konsep matematika JavaScript, membuat elemen, dan menggunakan loop

Kode Sumber Permainan Labirin

Konsep kunci tertutup

• Acak dan Lantai
• Pembuatan elemen
• Loop

Apa yang harus dilakukan

1. Salin kode sumber dari CodePen
2. Terapkan kode JavaScript sehingga Anda bisa mendapatkan acar dari satu ujung labirin ke ujung lainnya menggunakan fungsi panah (atau AWSD) pada keyboard Anda, membuatnya menampilkan jumlah langkah yang diperlukan untuk menyelesaikan labirin, dan dapat mengatur

Tantangan Bonus

Untuk menguji pemahaman Anda tentang konsep di balik permainan labirin, tantangan bonus Anda adalah permainan Tetris ini

Justina Hwang

Justina Hwang adalah Manajer Pemasaran Konten di Skillcrush, dan telah meliput pendidikan teknologi selama lebih dari tiga tahun. Dia memegang gelar PhD dari Brown University. Justina menghabiskan waktu luangnya dengan kucingnya yang agak membutuhkan (tapi sangat menggemaskan).

Apa yang harus saya gunakan untuk membuat kode JavaScript?

Apa cara tercepat untuk menulis kode JavaScript?

Di mana tempat terbaik untuk membuat kode JavaScript?