ตัวอย่างในบทความนี้แบ่งปันการสาธิตของเกม JS Snake ซึ่งเสร็จสิ้นโดย JS และ CSS สำหรับการอ้างอิงของคุณกับคุณ เนื้อหาเฉพาะมีดังนี้
<! doctype html> <html> <meta charset = "utf-8"> <head> <style>*{margin: 0; Padding: 0;} .content {ตำแหน่ง: Absolute; ความกว้าง: 500px; ความสูง: 500px; พื้นหลังสี: #212121; } .Colo {WIDTH: 48PX; ความสูง: 48px; พื้นหลังสี: #E6E6E6; ชายแดน: 1px Solid #466F85; ลอย: ซ้าย; } .head {/*พื้นหลังสี: #49df85;*/background-image: url (./ img/22.jpg); แนวชายแดน: 10px; ขนาดพื้นหลัง: 100%; ตำแหน่ง: สัมบูรณ์; ความสูง: 48px; ความกว้าง: 48px; } .fruit {/*พื้นหลังสี: #49df85;*/background-image: url (./ img/fruit.jpg); ขนาดพื้นหลัง: 100%; ตำแหน่ง: สัมบูรณ์; ความสูง: 48px; ความกว้าง: 48px; } .Score {font-family: 'bold'; ซ้าย: 600px; ตำแหน่ง: สัมบูรณ์; ความสูง: 50px; ความกว้าง: 200px; พื้นหลังสี: #212121; สี: #FFF; } .newbody {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 48px; ความสูง: 48px; พื้นหลัง-ภาพ: url (./ img/33.jpg); ขนาดพื้นหลัง: 100%; } .BTN {FONT-FAMILY: 'BOLD'; ซ้าย: 600px; ด้านบน: 100px; ตำแหน่ง: สัมบูรณ์; ความสูง: 50px; ความกว้าง: 100px; พื้นหลังสี: #1193FF; สี: #FFF; TEXT-ALIGN: CENTER; ระดับความสูง: 50px; ขนาดตัวอักษร: 20px; เคอร์เซอร์: ตัวชี้; แนวชายแดน: 15px; } </style> </head> <body> <div id = "content"> </div> <div id = "หยุด"> หยุดเกม </div> <div style = "top: 180px" id = "start"> เริ่มเกม </div> <div style = "top: 380px" id = "gameway" type = "text/javascript"> // เพิ่มสถานะ var stop = document.getElementById ('หยุด'); var start = document.getElementById ("เริ่มต้น"); var gameway = document.getElementById ('gameWay'); start.onclick = function () {head.value = '2'; เหตุการณ์ = setInterval (ย้าย, 200);} stop.onclick = function () {clearInterval (เหตุการณ์);} // var content = document.getElementById ("เนื้อหา"); สำหรับ (var i = 0; i <100; i ++) {var div = document.createElement ("div"); div.className = "colo"; เนื้อหา. AppendChild (div); } var scoreid = document.getElementById ("คะแนน"); var scorenum = 0; var scorecon = document.createElement ("p"); // var scoretext = document.createTextNode (scorenum); // scorecon.appendchild (scoretext); scoreid.appendchild (scorecon); var head = null; // บันทึกหัวของงู var fruit = null; // บันทึกผลไม้ var dir = null; // บันทึกทิศทางของตัวงู var = new Array (); // บันทึกส่วนที่เพิ่มของร่างกายของงู var bodynum = 0; // บันทึกจำนวนศพที่สร้างขึ้น // สุ่มสร้างหัวและผลไม้ลงในฟังก์ชันเนื้อหา createType (ประเภท) {ถ้า (type == 1) {// สร้างหมายเลขสุ่ม var row = parseint (math.random () * 6 +2); var col = parseint (math.random () * 6 +2); head = document.createElement ("div"); head.className = "head"; head.style.top = แถว*50+"px"; head.style.left = col*50+"px"; content.appendchild (หัว); // head.style.top =; // head.style.left =; } if (type == 2) {// สร้างหมายเลขสุ่ม var row = parseInt (math.random () * 6 +2); var col = parseint (math.random () * 6 +2); Fruit = Document.createElement ("Div"); Fruit.className = "Fruit"; Fruit.style.width = "50"; Fruit.style.height = "50"; Fruit.style.backgroundColor = "#ea2000"; fruit.style.top = แถว*50+"px"; Fruit.style.left = col*50+"px"; เนื้อหา AppendChild (ผลไม้); }} // เรียกเมธอด prop ที่สร้างขึ้น createType (1); createType (2); // ฟังก์ชั่นการเคลื่อนไหวของหัวงูทิศทาง var direction = อาร์เรย์ใหม่; // บันทึกทิศทางของแต่ละตัวที่สร้างขึ้นใหม่ // หมายเลขแปลง var numss = 0; // ฟังก์ชั่นเหตุการณ์การเลื่อนอัตโนมัติย้าย () {ถ้า (head.value! = "") {switch (head.value) {case '1': head.style.top = head.offsettop-50+"px"; หยุดพัก; กรณี '2': head.style.top = head.offsettop+50+"px"; หยุดพัก; กรณี '3': head.style.left = head.offsetleft-50+"px"; หยุดพัก; กรณี '4': head.style.left = head.offsetleft+50+"px"; หยุดพัก; }} console.log (head.offsettop); if (head.offSettop> 500) {แจ้งเตือน ("เกินขอบเขต! โปรดเล่นซ้ำ"); } // ถ้า (head == null) {// ถ้า (head.style.top <0 || head.style.top> 500 || head.style.left <0 || head.style.left> 500) {// Alert ("เกินขอบเขต! //} if (body.length! = 0) {สำหรับ (var i = body.length-1; i> = 0; i-) {ถ้า (i == 0) {body [0] .value = head.value; } else {body [i] .value = body [i-1] .value; }}} // แปลงทิศทาง // ถ้าเหตุการณ์หลังจากผลไม้ถูกกินสำเร็จถ้า (head.style.top == fruit.style.top && head.style.left == fruit.style.left) {var row = parseint (math.random () * 6 +2); var col = parseint (math.random () * 6 +2); fruit.style.top = แถว*50+"px"; Fruit.style.left = col*50+"px"; // บันทึก scorenum = scorenum+1; document.getElementByTagname ('P') [0] .innerText = ""; document.getElementByTagname ('P') [0] .innerText = Scorenum; // สร้าง Body Part BodyAdd (head.style.top, head.style.left, head.value); } // ควบคุมร่างกายเพื่อติดตามส่วนการเคลื่อนไหวของศีรษะ // เมื่อคุณมีร่างกายคุณต้องเปลี่ยนค่าของร่างกายแบบไดนามิกถ้า (body.length> 0) {var body01 = document.getElementById ('body01'); body01.style.top = head.offsettop+"px"; body01.style.left = head.offsetleft+"px"; สวิตช์ (head.value) {case '1': body01.style.top = head.offsettop+50+"px"; body01.style.left = head.offsetleft+"px"; หยุดพัก; กรณี '2': body01.style.top = head.offsettop-50+"px"; body01.style.left = head.offsetleft+"px"; หยุดพัก; กรณี '3': body01.style.left = head.offsetleft+50+"px"; body01.style.top = head.offsettop+"px"; หยุดพัก; กรณี '4': body01.style.left = head.offsetleft-50+"px"; body01.style.top = head.offsettop+"px"; หยุดพัก; }} if (body.length> 1) {body [bodynum-1] .value = body [bodynum-2] .value; สำหรับ (var i = 1; i <body.length; i ++) {var nu = i+1; var bodyid = document.getElementById ('body0'+nu); var body_id = document.getElementById ('body0'+i); bodyid.style.top = body_id.offsettop+"px"; bodyid.style.left = body_id.offsetleft+"px"; สวิตช์ (body [bodynum- (body.length-i)]. ค่า) {กรณี '1': bodyid.style.top = body_id.offsettop+50+"px"; bodyid.style.left = body_id.offsetleft+"px"; หยุดพัก; กรณี '2': bodyid.style.top = body_id.offsettop-50+"px"; bodyid.style.left = body_id.offsetleft+"px"; หยุดพัก; กรณี '3': bodyid.style.left = body_id.offsetleft+50+"px"; bodyid.style.top = body_id.offsettop+"px"; หยุดพัก; กรณี '4': bodyid.style.left = body_id.offsetleft-50+"px"; bodyid.style.top = body_id.offsettop+"px"; หยุดพัก; }}}} // สร้าง document time button.onkeydown = function () {var code = event.keycode; สวิตช์ (รหัส) {// UP CASE 38: head.value = '1'; หยุดพัก; // down case 40: head.value = '2'; หยุดพัก; // กรณีซ้าย 37: head.value = '3'; หยุดพัก; // กรณีที่ 39 ไปทางขวา: head.value = '4'; หยุดพัก; console.log (head.value); }} // body เพิ่มฟังก์ชั่นเหตุการณ์ bodyadd (บน, ซ้าย, dir) {ถ้า (dir! = "") {dir = dir; } else {dir = head.value; } // สร้างร่างกายเป็นครั้งแรกถ้า (bodynum == 0) {var newbody = document.createElement ('div'); newBody.className = "newBody"; newbody.id = "body01"; สวิตช์ (dir) {case '1': newbody.style.top = head.offsettop-50+'px'; newbody.style.left = head.offsetleft+"px"; หยุดพัก; กรณี '2': newbody.style.top = head.offsettop+50+'px'; newbody.style.left = head.offsetleft+"px"; หยุดพัก; กรณี '3': newbody.style.left = head.offsetleft-50+'px'; newbody.style.top = head.offsettop+"px"; หยุดพัก; กรณี '4': newbody.style.left = head.offsetleft+50+'px'; newbody.style.top = head.offsettop+"px"; หยุดพัก; } content.appendchild (newbody); bodynum = bodynum+1; Body.push (Newbody); } else {// สร้าง var newBody = document.createElement ('div'); newBody.className = "newBody"; newbody.id = "body0"+(body.length+1); สวิตช์ (dir) {case '1': newbody.style.top = body [body.length-1] .offsettop-50+'px'; newbody.style.left = body [body.length-1] .offsetleft+"px"; หยุดพัก; กรณี '2': newbody.style.top = body [body.length-1] .offsettop+50+'px'; newbody.style.left = body [body.length-1] .offsetleft+"px"; หยุดพัก; กรณี '3': newbody.style.left = body [body.length-1] .offsetleft-50+'px'; newbody.style.top = body [body.length-1] .offsettop+"px"; หยุดพัก; กรณี '4': newbody.style.left = body [body.length-1] .offsetleft+50+'px'; newbody.style.top = body [body.length-1] .offsettop+"px"; หยุดพัก; } content.appendchild (newbody); bodynum = bodynum+1; Body.push (Newbody); } // body.push (เนื้อหา);} // เกินขอบเขตให้รีเซ็ตฟังก์ชั่นเหตุการณ์ข้อมูลเริ่มต้น () {// รีเซ็ตผลไม้ var row = parseint (math.random () * 6 +2); var col = parseint (math.random () * 6 +2); fruit.style.top = แถว*50+"px"; Fruit.style.left = col*50+"px"; // บันทึกคะแนน Document.getElementsByTagname ('P') [0] .innerText = ""; // รีเซ็ตงู gluttonous} เหตุการณ์ var; เหตุการณ์ = setInterval (ย้าย, 200); // เพิ่มการดำเนินการ // var btn = document.getElementById ('btn'); // btn.onclick = function () {// clearinterval (เหตุการณ์); //} // </script> </body>มันยังคงได้รับการปรับปรุงและฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น