บรรณาธิการ

โบรชัวร์

วิธีดาวน์โหลด

ลิงค์

ตัวแก้ไขใช้งานได้กับเบราว์เซอร์ Chrome แท็บเล็ต หรือโทรศัพท์เท่านั้น อย่างไรก็ตาม เกมที่ส่งออกซึ่งนำตัวแก้ไขออกก่อน จะไม่มีข้อจำกัด

• สด
• ดาวน์โหลด
  • ดาวน์โหลด bacione.html
  • เปิดตัวจัดการไฟล์ของคุณ
  • คลิก bacione.html เพื่อทำงานในเบราว์เซอร์ Chrome ของคุณ
  • คลิก Run เพื่อเล่นเกม Ski
• Games.pdf - บทช่วยสอนสำหรับ Ski และ Marslander
• YouTube - การสาธิตผลิตภัณฑ์
• Reddit - การสนทนา Reddit
• Github - การสนทนา GitHub

บาซิโอเน่?

Bacione แปลว่า "จูบครั้งใหญ่" เช่นเดียวกับ "Keep It Satisfyingly Simple"

วัตถุประสงค์

การเขียนโปรแกรมเกมจาวาสคริปต์ขนาดเล็กบนโทรศัพท์แบบออฟไลน์

ภารกิจ

สร้าง IDE ที่เป็นมิตรกับนิ้วหัวแม่มือมากที่สุดในระดับเดียวกัน

ออกแบบ

เป้าหมายการออกแบบของตัวแก้ไขนี้คือการมอบประสบการณ์ที่น่าพึงพอใจสำหรับผู้ที่ไม่มีคอมพิวเตอร์หรือเพียงแค่ชอบโทรศัพท์หรือแท็บเล็ตในการเขียนโปรแกรมเกม JavaScript ขนาดเล็ก ข้อจำกัดเพิ่มเติมที่แก้ไขอยู่กำลังออฟไลน์และไม่มีแป้นพิมพ์ภายนอก (การพิมพ์บนหน้าจอด้วยนิ้วหัวแม่มือหรือสไตลัส) แม้ว่าจะมีแอปตัวแก้ไขและแป้นพิมพ์จำนวนมากที่เหมาะกับกรณีการใช้งานนี้ แต่ก็ไม่ได้มีประสิทธิภาพทั้งหมด ปัญหาหลักสองประการคือการลดการคลิกสำหรับ: 1) การเข้าถึงอักขระพิเศษ และ 2) การปรับโครงสร้างใหม่ ในการแก้ปัญหาข้อที่ 1 จำเป็นต้องรองรับความสามารถพิเศษของคีย์หรือติดตั้งแอปคีย์บอร์ด ในการแก้ปัญหา #2 จำเป็นต้องทำให้การปรับโครงสร้างใหม่ต้องใช้การคลิกน้อยลง หลังจากแก้ไขปัญหาทั้งสองนี้แล้ว หน้าจอส่วนใหญ่จะถูกยึดไป เหลือพื้นที่เพียงเล็กน้อยสำหรับพื้นที่โค้ด เพื่อแก้ไขปัญหานี้ ตัวแก้ไขจึงมีคีย์บอร์ดในตัวและเครื่องมือการปรับโครงสร้างใหม่ที่มีประสิทธิภาพ

คุณสมบัติ

• คลิกน้อยลงเมื่อเทียบกับโปรแกรมแก้ไขโทรศัพท์อื่นๆ
• ปุ่มทั่วไปเพียงคลิกเดียว
• ตรรกะการรับรู้บริบทลดการคลิก
• ทำงานน้อยลงเพื่อปรับโครงสร้างโค้ดของคุณใหม่
• แป้นพิมพ์ที่ตั้งโปรแกรมได้เต็มรูปแบบ
• สร้างไอคอนและฟังก์ชันแป้นพิมพ์ของคุณเอง
• ออกแบบมาสำหรับโทรศัพท์และแท็บเล็ต
• ไม่จำเป็นต้องตั้งค่า
• หนึ่งไฟล์
• ง่ายต่อการแบ่งปัน
• ออฟไลน์
• JavaScript วานิลลาธรรมดา
• ไม่มีการพึ่งพา
• ฟรี (ใบอนุญาต GPL)
• ไม่มีโฆษณา
• เรียกใช้จากตัวจัดการไฟล์ Android ในเบราว์เซอร์ Chrome
• ง่ายต่อการแก้ไขตัวแก้ไข
• แก้ไขตัวแก้ไขในตัวแก้ไข
• Editor มีขนาดเพียง 7 กิโลไบต์
• รองรับการปัดและกดแบบยาวซ้ำ

ข้อจำกัด

• รองรับโหมดแนวตั้ง : ตัวแก้ไขนี้รองรับเฉพาะโหมดแนวตั้งเท่านั้น
• ความเข้ากันได้ : ตัวแก้ไขใช้งานได้กับเบราว์เซอร์ Chrome บนแท็บเล็ตหรือโทรศัพท์เท่านั้น อย่างไรก็ตาม เกมที่ส่งออกซึ่งนำตัวแก้ไขออกนั้นไม่มีข้อจำกัดดังกล่าว
• หลายไฟล์: ตัวแก้ไขไม่ได้ออกแบบมาสำหรับเกมขนาดใหญ่หรือโปรเจ็กต์ที่มีหลายไฟล์ เนื่องจากการเปิดไฟล์ HTML จากตัวจัดการไฟล์บน Android ในเบราว์เซอร์ Chrome ไม่รองรับหลายไฟล์ ทุกอย่างจะต้องอยู่ในไฟล์ HTML ขนาดใหญ่เพียงไฟล์เดียว นอกจากนี้ยังหมายความว่าไม่สามารถใช้รูปภาพหรือไฟล์เสียงภายนอกได้ องค์ประกอบที่สร้างขึ้นโดยทางโปรแกรมสามารถใช้แทนได้ ตัวอย่างเช่น เกม Marslander ใช้กราฟิกแบบเวกเตอร์และเครื่องกำเนิดสัญญาณรบกวน และเกมอื่นๆ หลายเกมใช้อิโมจิ

หากตัวแก้ไขนี้ไม่รองรับความต้องการของคุณ คุณอาจลองใช้ Neovim กับ Termux และ Apache คุณสามารถดูการกำหนดค่าของฉันสำหรับเครื่องมือเหล่านั้นได้ที่นี่

ปัญหา

• การจัดแนวเคอร์เซอร์ไม่ตรง : การปัดขึ้นแรงๆ ที่ส่วนท้ายของไฟล์ในหน้าต่างตัวแก้ไขอาจทำให้เคอร์เซอร์ไม่สอดคล้องกับข้อความ วิธีแก้ปัญหาที่แนะนำคือถอยห่างจากจุดสิ้นสุดเล็กน้อย

หมายเหตุ

การอ้างอิงถึง การเปลี่ยนแปลง ด้านล่างหมายถึงฟังก์ชัน แก้ไข-แก้ไข ที่พบในปุ่มเบ็ดเตล็ด ซึ่งแสดงด้วยสัญลักษณ์รูปข้าวหลามตัด

• Edit-the-Editor : ตัวแก้ไขสามารถแก้ไขได้ภายในตัวแก้ไข อย่างไรก็ตาม ยังไม่ได้เผยแพร่ ดังนั้นคุณต้องคลิกบันทึกและเปิดไฟล์ HTML ที่ประทับเวลาที่สร้างขึ้นใหม่ หากอันใหม่เสียให้เปิดอันก่อนหน้าของคุณ คุณลักษณะนี้มีไว้เพื่อรองรับการเปลี่ยนแปลงง่ายๆ การเปลี่ยนแปลงที่ซับซ้อนควรทำในสภาพแวดล้อมที่แข็งแกร่งกว่า เช่น Neovim
• Run : ปุ่ม Run จะทำงานหรือหยุดเกมซึ่งมีเคอร์เซอร์อยู่ เพื่อความง่าย กรอบของเกมจะเป็นสี่เหลี่ยมจัตุรัสและแสดงอยู่เหนือคีย์บอร์ด ทำให้ง่ายต่อการสลับไปมาระหว่างการแก้ไขและการทำงาน ( 2 คลิกไปกลับ ) หากสิ่งนี้ดูจำกัด และคุณต้องการเฟรมเกมที่ใหญ่ขึ้น คุณสามารถ เปลี่ยนตัว แก้ไขหรือรหัสขนาดแคนวาสในไลบรารี หรืออย่าใช้ไลบรารีด้วยซ้ำ นอกจากนี้คุณยังสามารถส่งออกสิ่งที่อยู่ในมุมมองตัวแก้ไขได้ด้วยปุ่มส่งออกเกม คุณอาจต้องการ เปลี่ยน วิธีการทำงานของฟังก์ชัน Exportgame() ข้อเสียของการใช้การส่งออกคือคุณต้องเรียกใช้ไฟล์ HTML นั้นจากตัวจัดการไฟล์ Android ( 7 คลิกไปกลับ )
• ขนาดคีย์บอร์ด : ขนาดของคีย์บอร์ดคือพื้นที่ที่เหลืออยู่หลังจากพิจารณาเฟรมเกมสี่เหลี่ยมแล้ว ซึ่งหมายความว่าบนโทรศัพท์ ความกว้างของแป้นพิมพ์จะประมาณความกว้างของหน้าจอ และบนแท็บเล็ตจะมีความกว้างประมาณครึ่งหนึ่งของหน้าจอ
• ตำแหน่งแป้นพิมพ์ : บนแท็บเล็ต แป้นพิมพ์จะอยู่ที่มุม ขวา ล่าง หากคุณใช้นิ้วโป้งซ้ายเพื่อพิมพ์แทนนิ้วหัวแม่มือขวา คุณสามารถ เปลี่ยน ได้
• ฟังก์ชั่นคีย์บอร์ดแบบกำหนดเอง : ตัวแก้ไขนี้มีประโยชน์อย่างยิ่งเนื่องจากมีคีย์บอร์ดแบบกำหนดเองที่สามารถเข้าถึงฟังก์ชันหลักทั้งหมดได้ด้วยคลิกเดียว เพื่อสนับสนุนสิ่งนี้ อักขระพิเศษ 22 ตัวจากทั้งหมด 32 ตัวซึ่งมีความสำคัญต่อการเขียนโปรแกรมสามารถเข้าถึงได้ด้วยคลิกเดียว ในขณะที่อักขระที่เหลืออีก 10 ตัวสามารถเข้าถึงได้ผ่านปุ่ม Shift โปรดทราบว่าแป้นเว้นวรรคมีขนาดเล็กผิดปกติ โดยอยู่ที่มุมขวาล่าง นอกจากนี้ ปุ่ม Backspace และปุ่ม Return ยังอยู่บนแถวที่สอง เนื่องจากจะประสานกับคีย์อื่นๆ บ่อยครั้ง ตัวอย่างเช่น หากต้องการตัดข้อความ ให้กด Copy แล้ว Backspace และหากต้องการยกเลิกการเลือก ให้กดปุ่ม Return หากคุณไม่ชอบเค้าโครงนี้คุณสามารถ เปลี่ยน ได้
• การเลือก : ข้อได้เปรียบที่สำคัญของตัวแก้ไขนี้คือการเลือกที่มีประสิทธิภาพ การเลือกจะขึ้นอยู่กับบริบท ขึ้นอยู่กับตำแหน่งเคอร์เซอร์ที่จะเลือกคำ บรรทัด ย่อหน้า หรือบล็อกของโค้ด หากต้องการดูวิธีการทำงานของการเลือก คุณสามารถชมวิดีโอ YouTube การเลือกจะดำเนินการโดยใช้ปุ่มคัดลอก ซึ่งหมายความว่ามีสองสิ่งเกิดขึ้นพร้อมกัน เพื่อลดจำนวนปุ่มเป็นหลัก การตัดมีสองขั้นตอน: คลิกคัดลอก (เลือกและคัดลอก) จากนั้นคลิก Backspace (ลบส่วนที่เลือก) การคลิกปุ่ม Enter หลังจากคัดลอกจะเป็นการเลื่อนเคอร์เซอร์ไปที่จุดสิ้นสุดของส่วนที่เลือก หาก Cut (Copy/Backspace) มีบรรทัด เคอร์เซอร์จะเลื่อนไปหนึ่งบรรทัด เนื่องจากบ่อยครั้งเป็นความตั้งใจของผู้ใช้เมื่อตัดบรรทัดเพื่อวางหลังบรรทัดถัดไป ซึ่งจะช่วยลดจำนวนคลิกเมื่อปรับโครงสร้างโค้ดใหม่ นอกจากนี้ยังสามารถใช้การเลือก (คัดลอก) สำหรับการนำทางได้ เช่น เพื่อเลื่อนเคอร์เซอร์ไปที่จุดสิ้นสุดของบล็อก วางเคอร์เซอร์ไว้หน้าอักขระบล็อกเปิด คลิกคัดลอก คลิก Enter อย่างไรก็ตาม อย่าทำอย่างนั้นถ้าคุณมีบางอย่างในบัฟเฟอร์การวางที่คุณต้องการใช้ การคลิกคัดลอกหลายครั้งจะขยายการเลือกตามกฎการเลือก และปุ่มลูกศรจะขยาย (หรือยกเลิกการขยาย) การเลือกทีละอักขระ
• การคัดลอกและวาง : คุณต้องใช้ปุ่มคัดลอกและวางภายในในตัวแก้ไขเพื่อคัดลอกและวางโค้ดภายในตัวแก้ไข หากต้องการคัดลอกโค้ดจากแหล่งภายนอก ให้ใช้เทคนิคการคัดลอกและวางของระบบ เช่น การกดค้างแล้วเลือกคัดลอกและวาง
• การจัดรูปแบบ : บนโทรศัพท์ อสังหาริมทรัพย์ของโปรแกรมแก้ไขมีระดับพรีเมี่ยม และคุณไม่สามารถซื้อพื้นที่สีขาวได้มากนัก โดยเฉพาะพื้นที่สีขาวในแนวนอน สำหรับการเยื้อง คุณสามารถใช้แป้น Space (ไม่มีแป้น Tab) และแป้น Enter จะคงการเยื้องก่อนหน้าไว้ พยายามใช้การเยื้องสำหรับสาขาและลูปเท่านั้น และแทนที่จะเยื้องเนื้อหาของฟังก์ชัน ให้ใช้ช่องว่างแนวตั้งก่อนและหลัง ดูตัวอย่างเกม Marslander
• ปุ่มแสดงความคิดเห็น : ปุ่มแสดงความคิดเห็นมีประโยชน์มากสำหรับการดีบัก เมื่อคุณกดปุ่มแสดงความคิดเห็น มันจะแสดงความคิดเห็นโค้ดและวางสำเนาไว้ในบัฟเฟอร์การวาง ขั้นตอนต่อไปคือการวางสิ่งนั้นแล้วแก้ไข หากคุณไม่ชอบผลลัพธ์ของโค้ดใหม่ คุณสามารถลบโค้ดนั้นออกและยกเลิกการใส่หมายเหตุโค้ดต้นฉบับได้อย่างง่ายดาย
• การนำทาง : การนำทางทำได้โดยการแตะหน้าจอเป็นหลัก ดังนั้นจึงไม่มีปุ่มลูกศร Home, End หรือแนวตั้ง แต่จะมีลูกศรซ้าย-ขวาเพื่อช่วยวางตำแหน่งเคอร์เซอร์อย่างแม่นยำหลังจากสัมผัสตำแหน่งโดยประมาณ ปุ่มซูมซึ่งเพิ่มขนาดข้อความสามารถช่วยวางเคอร์เซอร์ในตำแหน่งที่ถูกต้องได้
• ขนาดที่แนะนำ : เนื่องจากการนำทางโค้ดบนโทรศัพท์อาจมีความท้าทาย จึงแนะนำให้สร้างเกมที่มีขนาดเล็กพอที่จะเลื่อนได้ด้วยท่าทางเดียว
• เต็มหน้าจอ : การเปิดใช้งานโหมดเต็มหน้าจอจะทำให้คุณมีพื้นที่มากขึ้นสำหรับการนำทางและแก้ไขโค้ดของคุณ คุณสามารถสลับโหมดเต็มหน้าจอได้โดยการปัดขึ้นที่ปุ่มซูม
• มุมมองการปิด : ไม่มีปุ่มปิด หากต้องการปิดมุมมอง ให้คลิกที่ใดก็ได้หรือเลือกตัวเลือก มุมมองคือ: วิธีใช้ เบ็ดเตล็ด ความแตกต่าง และข้อผิดพลาด
• Emoji Generation : เมื่อเปิดมุมมองเบ็ดเตล็ดในครั้งแรก จะใช้เวลาสักครู่ในขณะที่ไอคอนถูกโหลด
• เครื่องมือเลือก : Color-Picker และ Icon-Picker ใส่โค้ดใน Paste ดังนั้นอย่าตกใจหากดูเหมือนว่าไม่มีอะไรเกิดขึ้น คลิกปุ่มวางเพื่อดูโค้ด
• การตรวจจับข้อผิดพลาด : ตัวแก้ไขนี้ไม่มีการตรวจจับข้อผิดพลาดแบบเรียลไทม์ (ขณะที่คุณพิมพ์) ข้อผิดพลาดจะถูกค้นพบเมื่อคุณคลิกเรียกใช้ ข้อความแสดงข้อผิดพลาดจะปรากฏขึ้นและเมื่อข้อผิดพลาดถูกยกเลิก (โดยการคลิกที่ใดก็ได้บนมุมมองนั้น) เคอร์เซอร์จะถูกวางตำแหน่งในโค้ดที่เกิดข้อผิดพลาดโดยอัตโนมัติ บางครั้งข้อความแสดงข้อผิดพลาดไม่ได้ทำให้ชัดเจนเมื่อคุณลืมพาเรนหรืออักขระบล็อกอื่นที่ต้องใช้คู่ที่ตรงกัน เพื่อช่วยในเรื่องนี้ กระบวนการเสริมจะนับอักขระบล็อกทั้งหมด อย่างไร้เดียงสา เพื่อให้แน่ใจว่ามีการนับเลขคู่และแสดงข้อความเพิ่มเติมในมุมมองข้อผิดพลาด
• ฟังก์ชัน Diff: ฟังก์ชัน Diff นั้นไร้ เดียงสา และจะไม่ให้ผลลัพธ์ที่แม่นยำ ได้รับการออกแบบมาเพื่อให้เป็นเพียงการบ่งชี้ความคืบหน้าโดยประมาณนับตั้งแต่เปิดไฟล์หรือบันทึกครั้งล่าสุด
• กลไกการบันทึก: ฟังก์ชันการบันทึกในตัวแก้ไขถูกจำกัดด้วยข้อจำกัดของ HTML เพื่อเป็นวิธีแก้ปัญหา ไฟล์ที่มีการประทับเวลา ใหม่ จะถูกสร้างขึ้นทุกครั้งที่คุณบันทึก หากคุณกำลังบันทึกลงในโฟลเดอร์ดาวน์โหลด สิ่งสำคัญคือต้องทำให้ไม่มีไฟล์จากวัตถุประสงค์อื่น เนื่องจากอาจทำให้เปิดงานของคุณใหม่ได้อย่างรวดเร็วได้ยาก นอกจากนี้ ให้ลบไฟล์ HTML ของตัวแก้ไขรุ่นเก่าเป็นระยะ โดยเก็บเฉพาะเวอร์ชันล่าสุดเท่านั้น
• ธีม : ตัวแก้ไขนำเสนอทั้งธีมสว่างและธีมมืดเพื่อประสบการณ์การรับชมที่ปรับแต่งได้ คุณสามารถสลับระหว่างธีมต่างๆ ได้โดยการปัดขึ้นที่ปุ่มเบ็ดเตล็ด คุณยังสามารถ เปลี่ยนแปลง หรือเพิ่มมากขึ้นได้