Saya menonton beberapa episode video Canvas di MOOC sebelumnya, dan saya selalu ingin berlatih menulis sesuatu. Saya merasa Snake relatif sederhana. Ketika saya masih kuliah, saya juga menulis versi karakter bahasa C.
Efek akhirnya adalah sebagai berikut (jika gambar terlalu besar akan memakan waktu terlalu lama. Software untuk merekam gif memiliki batas waktu...)
Mulailah dengan menentukan area permainan. Hanya ada dua elemen di layar Ular: tubuh ular dan apel, dan keduanya dapat terdiri dari kotak persegi. Tambahkan celah antar kotak. Mengapa menambah kesenjangan? Bisa dibayangkan ketika Anda berhasil mengisi semua kotak, jika tidak ada celah, itu akan menjadi persegi besar yang kokoh... Anda tidak tahu seperti apa bentuk tubuh ular itu.
Menggambar.
Koordinat pojok kiri atas grid adalah (0, 0), absis bertambah ke kanan, dan ordinat bertambah ke bawah. Arah ini sama dengan Canvas.
Setiap kita menggambar grid, kita harus memulainya dari pojok kiri atas. Kita selalu mengetahui bahwa koordinat pojok kiri atas Canvas adalah (0, 0). Dengan asumsi panjang sisi grid adalah GRID_WIDTH dan lebarnya dari gapnya adalah GAP_WIDTH, kita bisa mendapatkan (i, j)th Koordinat sudut kiri atas grid (i*(GRID_WIDTH+GAP_WIDTH)+GAP_WIDTH, j*(GRID_WIDTH+GAP_WIDTH)+GAP_WIDTH) .
Asumsikan tubuh ular terdiri dari tiga kotak biru. Kita tidak bisa hanya menggambar tiga kotak, tapi juga dua celah ungu. Jika tidak, seperti disebutkan sebelumnya, Anda tidak akan tahu seperti apa bentuk tubuh ular. Seperti terlihat pada gambar di bawah ini, meski bisa dimainkan tanpa membuat celah, pengalamannya pasti akan berbeda.
Gambarkan celah di antara kisi-kisi yang berdekatan tanpa membuat celah
Sekarang kita bisa mencoba menggambar ular. Tubuh ular sebenarnya adalah kumpulan grid. Setiap grid diwakili oleh array yang berisi dua informasi posisi.
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>blog_snack</title> <style> #canvas { background-color: #000; head><body> <canvas id=canvas></canvas> <script> const GRID_WIDTH = 10; // Panjang sisi grid const GAP_WIDTH = 2; // Panjang sisi celah const ROW = 10; // Berapa jumlah baris grid & berapa jumlah grid pada setiap baris let canvas = document.getElementById('canvas'); = GRID_WIDTH * ROW + GAP_WIDTH * ( ROW + 1); canvas.width = GRID_WIDTH * ROW + GAP_WIDTH * (ROW + 1); = kanvas.getContext('2d'); biarkan camilan = [ [2, 3], [2, 4], [2, 5], [3, 5], [4, 5], [4, 4], [5, 4], [5, 5] ]; // Inisialisasi satu