Cara bermain Pelukis Pixel
- Baca instruksi level. Posisi, ukuran, dan warna yang dibutuhkan disebut di sana.
- Tulis kode yang memakai
ctx. Gambarmu diperbarui sesaat setelah kamu berhenti mengetik. - Target tampil samar di kanvas dan utuh di gambar kecil di bawahnya. Angka kemiripan naik saat gambarmu makin dekat.
- Tekan Cek jawaban atau Ctrl + Enter. Jawaban diterima kalau kemiripannya minimal 95% (98% di level Senyum, yang detailnya kecil).
- Kalau buntu, buka Petunjuk. Petunjuk pertama mengarahkan, petunjuk terakhir hampir menjawab.
- Level yang sudah selesai tetap tercentang saat kamu kembali dengan browser yang sama.
Yang kamu pelajari
- Level 1
fillRect
Menggambar kotak terisi dari sudut kiri atas
(x, y)dengan lebar dan tinggi tertentu. - Level 2
fillStyle
Warna isi untuk semua bentuk yang digambar sesudahnya.
- Level 4
strokeRect, strokeStyle, lineWidth
Menggambar garis tepi, lengkap dengan warna dan tebalnya.
- Level 5
beginPath, arc, fill
Lingkaran dan busur digambar sebagai jalur, lalu diisi atau diberi garis tepi.
- Level 6
moveTo, lineTo, closePath
Menyusun bentuk bebas seperti segitiga dari titik ke titik.
- Level 9
Perulangan for
Menggambar banyak bentuk yang polanya sama dengan satu baris
fillRect.
Kanvas tidak mengingat bentuk, hanya piksel
Setelah fillRect jalan, kotaknya berubah jadi piksel biasa. Kanvas tidak menyimpan objek kotak yang bisa dipindah, jadi yang digambar belakangan selalu menimpa yang lebih dulu. Karena itu rumah digambar dari dinding, atap, lalu pintu.
Pengaturan seperti fillStyle dan lineWidth juga tidak menempel ke bentuk. Nilainya berlaku untuk semua yang digambar sesudahnya sampai kamu menggantinya.
Tanya jawab
Apakah harus daftar akun untuk bermain?
Tidak. Semua level bisa dimainkan tanpa akun. Kemajuanmu disimpan di browser yang kamu pakai, jadi akan hilang kalau data browser dihapus.
Apakah Pelukis Pixel cocok untuk pemula?
Cocok kalau kamu sudah mengenal pemanggilan fungsi di JavaScript, misalnya console.log(1). Perulangan for baru dipakai di dua level terakhir dan dijelaskan di petunjuknya.
Bagaimana jawabanku dicek?
Gambarmu dibandingkan piksel demi piksel dengan gambar target. Kode yang berbeda tetap benar selama hasilnya sama, misalnya segitiga yang titiknya ditulis dari kanan ke kiri.
Kenapa kemiripannya belum 100% padahal gambarnya terlihat sama?
Tepi bentuk miring dan lingkaran dihaluskan (antialias), jadi selisih satu piksel di tepi menurunkan sedikit angkanya. Karena itu batas lulusnya 95%, bukan 100%. Di level Senyum batasnya 98% karena mata dan mulutnya kecil dibanding wajah.
Apakah kodeku aman dijalankan?
Kodemu dijalankan di iframe terpisah yang tidak bisa membaca halaman, cookie, atau akun Mahir.dev, dan tidak bisa mengakses jaringan. Kode yang berjalan lebih dari 1 detik, misalnya perulangan tanpa akhir, dihentikan otomatis.