บทความนี้แนะนำ H5 Canvas เพื่อให้ได้เกมงูโลภแบ่งปันกับทุกคนดังนี้:
เอฟเฟกต์มีดังนี้ แนวคิดการใช้งาน:PS: นี่เป็นเพียงการคิด
1. วาดงูก่อน <! </head> <body> <canvas id = canvas width = 800 height = 500> </body> </body> <script> var canvas = document.getElementById ('Canvas'); ('2d'); color = color;} // วิธีการวาด block rect.prototype.draw = function () {context.beginpath (); . W, this.h); // วาดสี่สแควร์บล็อกตั้งค่าเป็นสีเทาสำหรับ (var i = 0; i <4; i ++) {var rect = ใหม่ rect (i*20,0,20,20, สีเทา); การใช้ push (บวกในภายหลัง) เพื่อให้หัวงูปรากฏขึ้นที่ตำแหน่งแรกของอาร์เรย์ snakearray.splice (0,0, rect);} // head = snakearray [0]; สิ่งที่ใช้กันทั่วไปหลังจากที่สองถูกตั้งค่าเป็นคุณลักษณะดังนั้นการเรียกในภายหลังว่า snakearray [0]; (ด้วยลูกศรขวาของปุ่มกด) this.direction = 39;} // วิธีการทาสีงูงู prototype.draw = function () {สำหรับ (var i = 0; i <this.snakearray.length; i ++) { this.snakearray [i] .draw ();} // วิธีการเคลื่อนไหวของงูงูงู prototype.move = function () {// นี่คือส่วนหลักวิธีการเคลื่อนไหวของงู // 1 วาดสี่เหลี่ยมสีเทา ซ้อนทับตำแหน่งกับหัวงู // 2 แทรกบล็อกนี้ไปยังตำแหน่งด้านหลังหัวงูในอาร์เรย์ // 3 ตัดส่วนท้ายของปลาย // 4 ย้ายหัวงูไปในทิศทางของทิศทางการตั้งค่า . หนึ่งกริด var rect = ใหม่ rect (this.head.x, this.head.y, this.head.w, this.head.h, grey); / ตรวจสอบว่าจะกินอาหารฟังก์ชั่นการตัดสินใจของ iseat จะถูกเขียนขึ้นในตอนท้าย // เมื่อคุณกินมันอาหารจะได้รับตำแหน่งอีกครั้ง getRandomFood ();} else {this.snakearray.pop ();} // ตั้งทิศทางการเคลื่อนไหวของหัวงู, 37 ซ้าย, 38, 39 ขวา, 40 ตะเข็บ (ทิศทางนี้) {กรณี 37: นี่ x- = this.head.w break; .y += this.head.h break; .y> Canvas.Height || this.head.y <0) {ClearInterval (ตัวจับเวลา);} // ปังตัวเองวงจรเริ่มต้นจาก 1 หลีกเลี่ยงการเปรียบเทียบหัวงูและหัวงูสำหรับ i = 1; (ตัวจับเวลา);}}} // วาดงูงูเริ่มต้น = งูใหม่ () งูดอว์ (); {context.clearRect (0,0, Canvas.width, Canvas.head); ทำให้งูไม่สามารถหันไปหา document.onkeydown = function (e) {var ev = e || window.event; Snake.direction = 37;} break;} กรณีที่ 38: {ถ้า (Snake.direction! == 40) {Snake.direction = 38;} break;} กรณีที่ 39: {if.direction! == 37) {งู ทิศทาง = 39;} break;} กรณี 40: {ถ้า (Snake.direction! == 38) {Snake.direction = 40;} Bream; ช่วง var = max-min; มันหนักหน่วงจากนั้นสร้าง VaritativeNake = TRUE ใหม่; คำสั่งจะไม่ดำเนินการข้อความต่อไปนี้ issnake = false; 20, 20, สีเขียว); y == rect.y) {// ถ้าการตัดสินใจถูก re -coealed ตั้งค่าเป็นจริงเพื่อให้หมายเลขสุ่มเป็น re -to isonsnake = true; อาหารวัตถุมีวิธีการดึงกลับ rect;} // กำหนดว่าการกินอาหารนั่นคือพิกัดหัวงูและพิกัดอาหารของฟังก์ชั่นคือ () {ถ้า (snake.head.x == food.x && งู .. head.y == food.y) {return true;} else {return false;} </script> </html>ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้