ตัวอย่างในบทความนี้แบ่งปันรหัสที่เกี่ยวข้องของเกม JS Snake สำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> เกมงู </title> <style>*{margin: 0; Padding: 0;} ส่วนหัว {display: block; มาร์จิ้น: 0 อัตโนมัติ; ความกว้าง: 500px; TEXT-ALGING: CENTER;} ส่วนหัว H1 {FONT-FAMILY: Arial; Font-Weight: BOLD;} ส่วนหัว #NewGameButton {display: block; มาร์จิ้น: 20px auto; ความกว้าง: 100px; Padding: 10px 10px; พื้นหลังสี: #8F7A66; Font-Family: Arial; สี: สีขาว; แนวชายแดน: 10px; การกำหนดข้อความ: ไม่มี;} ส่วนหัว #NewGameButton: โฮเวอร์ {พื้นหลังสี: #9F8B77;} ส่วนหัว P {FONT-FAMILY: Arial; ขนาดตัวอักษร: 25px; ระยะขอบ: 20px auto;} canvas {display: block; เส้นขอบ: สีดำสองเท่าขนาดกลาง; มาร์จิ้น: 4px auto;} </style> </head> <body> <ส่วนหัว> <h1> เกมงู </h1> <a href = "JavaScript: newGame ();" id = "newGameButton"> เกมใหม่ </a> <p> คะแนน: <span id = "คะแนน"> 0 </span> </p> </header> <canvas id = "Canvas"> เบราว์เซอร์ของคุณไม่รองรับองค์ประกอบ <code> </canvas> <script> var canvas = document.getElementById ("canvas"); var ctx = canvas.getContext ("2d"); var snake = new Array (); // จำลองร่างกายงู var ด้วยคิว dir = "ขวา"; // ใช้เพื่อควบคุมทิศทางของหัวงูขนาด var = 20; // ความกว้างของร่างกายงู var foodx = 0; // x พิกัดของอาหาร var foody = 0; // พิกัด y ของอาหาร var headx = 0; // x พิกัดของหัวงู var heady = 0; // พิกัด y ของหัวงู var maxwidth = 200; // ความสูงของผ้าใบ var maxHeight = 200; // ความกว้างของ Canvas var time = 400; // ความเร็วของคะแนน Snake var = 0; // คำนวณคะแนนคะแนน VAR ของผู้เล่น = NULL; canvas.width = maxWidth; canvas.height = maxHeight; window.onload = function () {newGame ();}; document.getElementById ("newGameButton") คลิก (ฟังก์ชั่น () {newGame ();}); // ใช้คิวเพื่อจำลองร่างกายงู dir = "ขวา"; // ใช้เพื่อควบคุมทิศทางของหัวงูหัว = 0; // x พิกัดของหัวงูหัว = 0; // พิกัด y ของคะแนนหัวงู = 0; window.clearinterval (ช่วงเวลา); ช่วงเวลา = null; // เริ่มต้น Canvas CTX.ClearRect (0, 0, MaxWidth, MaxHeight); // วาดงู drawsnake (); // port food setfood (); // ย้าย Snake Interval = window.setInterval (ย้ายเวลา);} ฟังก์ชั่นย้าย () {switch (dir) {case "up": heady = heady-size; break; กรณี "ขวา": headx = headx+size; break; กรณี "ลง": heady = size+size; break; กรณี "ซ้าย": headx = headx-size; break; } if (headx> maxWidth-size || heady> maxheight-size || headx <0 || heady <0) {Alert ("คะแนนของคุณคือ:"+คะแนน+"คะแนนทำงานหนัก! เหตุผลสำหรับความล้มเหลว: ฉันวิ่งเข้าไปในผนัง ...... "); window.location.reload (); } สำหรับ (var i = 1; i <snake.length; i ++) {ถ้า (งู [i] [0] == งู [0] [0] && งู [i] [1] == งู [0] [1]) {แจ้งเตือน ("คะแนนของคุณคือ:" คะแนน+" window.location.reload (); }} if (snake.length == maxWidth *maxHeight) {alert ("สุดยอดมาก! ~"); window.location.reload (); } MoveIn (headx, hewy); // ย้ายหนึ่งกริด} document.onkeydown = function (e) {// เปลี่ยนทิศทางของงู var code = e.kecompode - 37; สวิตช์ (รหัส) {กรณีที่ 1: dir = "up"; break; // ในกรณีที่ 2: dir = "ขวา"; break; // กรณีที่ถูกต้อง 3: dir = "down"; break; // down case 0: dir = "ซ้าย"; break; // ซ้าย}} // =============================================================================================================== - - - - - - Snake.push ([headx, heady]); // การวาดสวิตช์ตัวงู (dir) {case "up": drawbody (headx, heady + size, headx, hewy + 2 * ขนาด); หยุดพัก; กรณี "ขวา": drawbody (headx - size, heady, headx - 2 *, heady); หยุดพัก; กรณี "ลง": drawbody (headx, heady - size, headx, heady - 2 * ขนาด); หยุดพัก; กรณี "ซ้าย": drawbody (headx + size, heady, headx + 2 *, heady); หยุดพัก; }} ฟังก์ชั่น DrawBody (x1, y1, x2, y2) {ctx.fillrect (x1, y1, ขนาด, ขนาด); ctx.fillrect (x2, y2, ขนาด, ขนาด); Snake.push ([x1, y1]); Snake.push ([x2, y2]);} // ======================================================================================== - - - - - - - Foody, ขนาด, ขนาด);} ฟังก์ชั่น foodinsnake () {สำหรับ (var i = 0; i <snake.length; i ++) {ถ้า (foodx == งู [i] [0] && foody == งู [i] [1]) {return true; } } กลับ false;} // ========================================================================================================================= - - - ctx.fillrect (x, y, ขนาด, ขนาด); // re-draw หัวงู // เพิ่มหัวงูใหม่ลงในอาร์เรย์งู var newsnake = [[x, y]]; งู = newsnake.concat (งู); ถ้า (false == eatfood ()) {// ถ้าคุณไม่กินอาหารให้ลด Tail Tail หนึ่ง var var snaketail = snake.pop (); // รับตำแหน่งหางงู ctx.clearrect (snaketail [0], snaketail [1], ขนาด, ขนาด); ctx.fillstyle = "block"; ctx.fillrect (foodx, foody, ขนาด, ขนาด); setfood (); คะแนน ++; //$("#score").Text(Score); document.getElementById ("คะแนน"). innerhtml = คะแนน; กลับมาจริง; } return false;} </script> </html>ภาพการทำซ้ำ:
แนวคิด:
ฟังก์ชั่น newGame () {รีเซ็ตข้อมูลของงูและเศษส่วน; ช่วงเวลาที่ชัดเจน เริ่มต้นผืนผ้าใบ วาดงู; วางอาหาร; ใช้ตัวจับเวลา (setInterval) เพื่อย้ายงู (ฟังก์ชั่นย้าย); } ฟังก์ชั่นย้าย () {เปลี่ยนตำแหน่งของละติจูดถัดไปของหัวงูตามทิศทาง; ตรวจสอบว่าเกมจบลงและเหตุผลของการสิ้นสุด (รวมถึงการชนะหรือแพ้); งูเคลื่อนที่หนึ่งละติจูด (ฟังก์ชั่น movein); } ตรวจสอบคีย์ทิศทางของแป้นพิมพ์และแก้ไขค่าของตัวแปรส่วนกลาง (ใช้เพื่อจัดเก็บทิศทาง); ฟังก์ชั่น movein () {เพิ่มละติจูดลงในละติจูดก่อนหน้าของหัวงูเป็นหัวงูตัวใหม่และเพิ่มพิกัดของหัวงูเป็นองค์ประกอบแรกของอาร์เรย์ที่แสดงถึงงู; ถ้า (ไม่กินอาหาร) {ลบละติจูดไปยังหางงูและทำการเปลี่ยนแปลงที่สอดคล้องกันในผืนผ้าใบ -ควรสังเกตว่าหากคุณต้องการตั้งค่าความกว้างและความสูงในผืนผ้าใบใน JS มันจะแตกต่างจากการตั้งค่าคุณสมบัติ CSS อื่น ๆ เล็กน้อย
Canvas.width = MaxWidth; Canvas.height = MaxHeight;
บรรณาธิการได้เตรียมหัวข้อที่ยอดเยี่ยมสำหรับทุกคน: บทสรุปของเกม JavaScript คลาสสิก
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้การเขียนโปรแกรม JavaScript