ฉันเคยดูวิดีโอ Canvas บน MOOC มาสองสามตอนแล้ว และฉันก็อยากฝึกเขียนอะไรบางอย่างอยู่เสมอ ฉันรู้สึกว่า Snake ค่อนข้างเรียบง่าย เมื่อตอนที่ฉันเรียนมหาวิทยาลัย ฉันยังเขียนภาษา C ในรูปแบบตัวอักษรด้วย โดยไม่คาดคิด ฉันยังพบปัญหามากมาย
ผลลัพธ์ที่ได้จะเป็นดังนี้ (หากภาพใหญ่เกินไปก็จะใช้เวลานานเกินไป ซอฟต์แวร์สำหรับบันทึก GIF มีเวลาจำกัด...)
เริ่มต้นด้วยการกำหนดพื้นที่เกม มีเพียงสององค์ประกอบบนหน้าจอของ Snake: ตัวงูและแอปเปิ้ล และทั้งสององค์ประกอบสามารถประกอบด้วยตารางสี่เหลี่ยมได้ เพิ่มช่องว่างระหว่างช่องสี่เหลี่ยม ทำไมต้องเพิ่มช่องว่าง? คุณสามารถจินตนาการได้ว่าเมื่อคุณเติมกริดทั้งหมดสำเร็จ หากไม่มีช่องว่าง มันจะเป็นสี่เหลี่ยมจัตุรัสทึบขนาดใหญ่... คุณไม่มีทางรู้เลยว่าตัวงูจะเป็นอย่างไร
วาดภาพ.
พิกัดของมุมซ้ายบนของตารางคือ (0, 0) ค่าแอบซิสซาจะเพิ่มขึ้นทางด้านขวา และพิกัดจะเพิ่มขึ้นลง ทิศทางนี้เหมือนกับ Canvas
ทุกครั้งที่เราวาดตาราง เราต้องเริ่มจากมุมซ้ายบน เรารู้อยู่เสมอว่าพิกัดของมุมซ้ายบนของ Canvas คือ (0, 0) สมมติว่าความยาวด้านของตารางคือ GRID_WIDTH และความกว้าง ของช่องว่างคือ GAP_WIDTH เราจะได้ (i, j)th พิกัดมุมซ้ายบนของตาราง (i*(GRID_WIDTH+GAP_WIDTH)+GAP_WIDTH, เจ*(GRID_WIDTH+GAP_WIDTH)+GAP_WIDTH) .
สมมติว่าร่างกายของงูประกอบด้วยตารางสีน้ำเงินสามช่อง เราไม่สามารถวาดเพียงสามตารางได้ แต่ยังมีช่องว่างสีม่วงสองช่องด้วย ไม่เช่นนั้น คุณจะไม่รู้ว่าร่างกายของงูมีลักษณะอย่างไร ดังที่แสดงในภาพด้านล่างแม้ว่าจะสามารถเล่นได้โดยไม่ต้องเว้นช่องว่าง แต่ประสบการณ์จะแตกต่างออกไปอย่างแน่นอน
วาดช่องว่างระหว่างกริดที่อยู่ติดกันโดยไม่ต้องวาดช่องว่าง
ตอนนี้เราลองวาดงูได้แล้ว จริงๆ แล้วตัวงูคือชุดของกริด แต่ละกริดจะแสดงด้วยอาร์เรย์ที่มีข้อมูลตำแหน่งสองตำแหน่ง งูทั้งหมดสามารถแสดงด้วยอาร์เรย์สองมิติ
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>blog_snack</title> <style> #canvas { สีพื้นหลัง: #000 } </style></; head><body> <canvas id=canvas></canvas> <script> const GRID_WIDTH = 10; // ความยาวด้านของตาราง const GAP_WIDTH = 2; // ความยาวด้านข้างของช่องว่าง const ROW = 10; // มีกริดทั้งหมดกี่แถวและมีกี่กริดในแต่ละแถว ให้ canvas = document.getElementById('canvas'); = GRID_WIDTH * ROW + GAP_WIDTH * ( ROW + 1); canvas.width = GRID_WIDTH * ROW + GAP_WIDTH * (ROW + 1); = canvas.getContext('2d'); ให้ของว่าง = [ [2, 3], [2, 4], [2, 5], [3, 5], [4, 5], [4, 4], [5, 4], [5, 5] ]; // เริ่มต้นหนึ่งรายการ