Upaya untuk mengimplementasikan modul CRT terkenal yang digunakan dalam Pascal dalam JavaScript. Apa yang keluar dan apa yang tidak, aku akan memberitahumu.
Entri
Kenalan saya dengan pemrograman dimulai di kelas 8, ketika saya pertama kali belajar di pelajaran informatika apa Pascal itu dan peluang apa yang diberikannya. Kemudian Turbo Pascal diinstal pada komputer sekolah, meskipun guru ilmu komputer sudah lama ingin menempatkan PascalABC.NET di sana. Tentu saja, itu semua dimulai dengan kesimpulan garis yang biasa di konsol, aktivitas saya terutama ditujukan untuk persiapan yang sangat baik untuk OGE. Tidak ada modul yang dipelajari, karena tidak ada yang membutuhkan ini pada ujian.
Tetapi bahkan ketika saya bisa "menundukkan" jendela konsol untuk diri saya sendiri, menampilkan semua yang saya inginkan di sana, membuat perhitungan, menerima input dari pengguna, saya terkejut betapa kerennya itu!
Tetapi waktu berlalu, hidup berubah: ujian berlalu, ujian berlalu, penerimaan yang sukses ke universitas. Selama ini saya telah mempelajari bahasa-bahasa baru dengan minat yang besar, sehingga saya dapat dengan aman menulis situs web, apakah itu depan atau belakang. Untuk beberapa alasan, pemrograman web paling menarik minat saya.
Bagaimana sampai pada CRT
Kembali ke sekolah, saya mempelajari salah satu modul Pascal yang menarik yang disebut CRT. Sebenarnya, tidak ada yang rumit di dalamnya, serangkaian perintah, pada kenyataannya, kecil, tetapi mereka memungkinkan Anda untuk melakukan hal-hal baru di jendela konsol: pindahkan kursor pada layar 80x25 (ukuran layar DOS), ubah latar belakang dan warna teks, putar suara dari frekuensi tertentu dan durasi. Dimungkinkan untuk membuat game ASCII sepenuhnya, yang praktis tidak memakan ruang pada hard disk karena ukurannya yang kecil.
Dan sekarang, setelah beberapa tahun, saya memutuskan, berdasarkan minat, untuk menulis file js kecil, ketika terhubung dengan mana Anda dapat bekerja dengan jendela browser seperti halnya dengan jendela konsol. Saya akan segera mengatakan bahwa sangat sulit, jika memungkinkan, untuk mengembalikan semua perintah modul ke integritas dan keamanannya. Namun, JavaScript bukan Pascal, karena ini, ada beberapa fitur di sini.
Idenya sendiri
Proyek ini memiliki struktur tiga file yang sangat sederhana:
- crt.js - file dengan fungsi yang akan dihubungkan ke file html
- index.html - file - dasar yang harus dibuka di browser
- user.js - file kosong di mana programmer harus menulis kodenya
Pertama, saya akan memberi nama tim yang saat ini diterapkan, dan kemudian saya akan menunjukkan bagaimana mereka bekerja.
Perintah yang diimplementasikan:
- gotoxy (x, y) - pindahkan kursor ke koordinat
- tulis (str) - menampilkan string di layar
- clrscr () - menghapus layar dengan latar belakang yang dipilih sebelumnya dan memindahkan kursor ke koordinat 1,1
- textcolor (int) - mengubah warna teks
- textbackground (int) - mengubah warna latar belakang
- sound (fr, 1000) - memutar suara dengan frekuensi fr dan durasi 1 detik
Mari kita tunjukkan contoh "modul":
Kode:
Hasil:
Tampaknya bagi Anda bahwa surat-surat itu terpisah satu sama lain. Ya, benar. Faktanya adalah bahwa di sini isi halaman dibagi menjadi beberapa bagian oleh divs. Mari kita ingat ukuran jendela DOS (80x25). Jadi berapa banyak div yang ada? Itu benar, 2000. Masing-masing berukuran sama. Secara umum, ketika Anda memulai halaman, fungsi berikut secara otomatis dilakukan:
Saya secara khusus memposting karya ini di JS. Saya ingin file html menjadi bersih dan jelas.
Ya, karena skema ini, ada efeknya, ketika saya memulai halaman pada PC yang lemah, saya pikir hanya memuat akan terjadi selama 4-5 detik, karena siklusnya agak rumit. Saya tidak melihat titik mengomentari setiap baris, tindakan utama dalam foto dijelaskan. Setiap kali kami membuat div dengan id dan parameter tertentu dan menambahkannya ke badan. Setiap div
hanya berisi
satu karakter , seperti analogi dalam DOS (satu sel - satu karakter).
Bekerja dengan koordinat dan warna didasarkan pada variabel-variabel ini:
Perintah
gotoxy (x, y), textcolor (int), textbackground (int) cukup mengubah isi variabel xnow, ynow, color, bgcolor.
Dengan bunga ada poin menarik. Dalam DOS, seperti yang kita tahu, dimungkinkan untuk memilih warna dari set di mana hanya ada 16 warna. Di Pascal, Anda dapat mengakses warna menggunakan angka (0-15). Selain itu, di DOS, latar belakang hanya dipilih dari delapan warna pertama, dan teks dari semua 16. Sementara di Windows di PascalABC.NET, ketika modul terhubung, latar belakang dapat diubah dari semua 16 warna. Mungkin tidak semua orang mengerti apa yang ingin saya sampaikan sekarang, tapi mari kita jelaskan dengan sebuah contoh:
Semua warna yang digunakan di konsol tercantum di sini. Jika kita mencoba mengubah latar belakang di DOS menjadi hijau muda (10), maka latar belakang akan berubah menjadi hijau (2), sedangkan font akan menjadi warna yang kita butuhkan. Untuk beberapa alasan, kemampuan untuk mengubah latar belakang dalam DOS (Free Pascal) terbatas pada delapan warna.
Dan sekarang tentang perintah clrscr, yang membersihkan layar dengan warna tertentu. Di JS, saya menerapkannya seperti ini:
Tidak ada yang rumit di sini. Kami mengulang semua div, di mana di setiap konten kami membuatnya kosong (karena di DOS karakter dihapus) dan mengubah latar belakang ke warna yang dipilih sebelumnya oleh perintah textbackground. Dan, tentu saja, jangan lupa untuk mengembalikan kursor ke posisi 1.1 (sudut kiri atas jendela).
Hal yang paling menarik adalah output dari string dengan perintah
tulis . Ya, saya ingat masih ada writeln, tetapi saya pikir satu perintah sudah cukup, karena dalam situasi ini kami tidak akan tertarik untuk memindahkan kursor ke baris baru.
Implementasi:
Di sini perlu untuk melindungi browser dari kesalahan, jika garis pengguna akan melampaui jendela (dan tidak ada div di sana!) Oleh karena itu, diputuskan untuk membuat loop dengan perlindungan istirahat.
Setiap huruf harus menempati sel yang dialokasikan sepenuhnya, sehingga ukuran font diatur oleh ukuran div. Plus, jangan lupa bahwa latar belakang di balik huruf harus berubah ke yang ditetapkan oleh perintah textbackground.
Dan akhirnya, fungsi terakhir adalah suara. Di sini, sayangnya, saya harus mengubah skema kerja tim, karena sulit untuk menerapkan rantai bunyi-delay-nosound. Ngomong-ngomong, saya belum bisa mengimplementasikan penundaan, belum ada ide, karena setTimeout tidak cocok di sini.
Kami ingat bahwa untuk menampilkan, misalnya, suara dengan frekuensi 200 Hz dan durasi 1 detik, Anda perlu menulis kode:
sound(200); delay(1000); nosound;
Di JS, saya harus melakukan ini:
Tapi kemudian berhasil! Implementasi:
Saya tidak pernah menggunakan fungsi spesifik seperti itu dalam aktivitas saya. Dia harus mengintip dokumentasi. Jika seseorang akan memeriksa pekerjaannya, maka berhati-hatilah, setelah mendengarkan dengan suara keras mungkin sakit.
Benar, ketika menggunakan fungsi ini, Chrome, untuk alasan yang jelas, mulai bersumpah:
Saya mencoba menyelesaikan masalah dengan setTimeout, namun ini tidak selalu berhasil.
Tetapi jika Anda mengklik dengan cepat pada halaman saat memuat, suara direproduksi, tetapi ini adalah cerita yang sama sekali berbeda.
Kesimpulan
Bahkan setelah tata letak situs aktif, saya ingin mencoba menulis sesuatu yang tidak biasa, bahkan jika itu tidak memiliki manfaat praktis. Pascal dengan modul CRT-nya benar-benar berpengaruh pada saya pada saat itu, yang mendorong saya untuk belajar bahasa pemrograman lebih lanjut. Atau mungkin Anda harus menulis sesuatu dengan gaya ASCII?
Untuk jaga-jaga, diposting di GitHub