ความคิดเห็น: ความยากลำบากของเกมคือวิธีจำลองการเคลื่อนไหวของงูโลภ เห็นได้ชัดว่ามันง่ายถ้ามันเป็นแค่สี่เหลี่ยมจัตุรัส อย่างไรก็ตามวิธีการควบคุมความยาวของงูหลังจากที่มันจะยาวขึ้น? นี่คือการแนะนำสั้น ๆ เกี่ยวกับการใช้งานเฉพาะ เพื่อนที่สนใจสามารถอ้างถึงได้ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ
คำแนะนำการใช้งานเกม
ใช้ปุ่มลูกศรเพื่อควบคุมการเคลื่อนไหวของงูขึ้นและลงซ้ายและขวา งูตะกละจะเพิ่มขึ้นหนึ่งความยาวหลังจากกินอาหาร
การใช้งานเกม
ความยากลำบากของเกมคือวิธีจำลองการเคลื่อนไหวของงูโลภ เห็นได้ชัดว่ามันง่ายถ้ามันเป็นแค่สี่เหลี่ยมจัตุรัส แต่จะควบคุมความยาวของงูได้อย่างไรหลังจากนั้นจะยาวนานขึ้น
แล้วการเคลื่อนไหวของแต่ละตารางล่ะ?
หากคุณสังเกตการเคลื่อนไหวของงูคุณจะพบว่าจากหัวไปจนถึงหางของงูตำแหน่งของแต่ละตารางในช่วงเวลาต่อมาคือสี่เหลี่ยมจัตุรัสก่อนหน้าในช่วงเวลาปัจจุบัน
ที่ตั้ง. ดังนั้นสิ่งที่เราต้องทำคือควบคุมการเคลื่อนไหวของหัวงูตะกละ ตำแหน่งของชิ้นส่วนอื่น ๆ สามารถอะนาล็อกได้
อีกประเด็นสำคัญคือ
หลังจากงูกินอาหารควรวางบล็อกที่เพิ่มเข้ามาใหม่ที่ไหน?
คำตอบคือในช่วงเวลาต่อมาบล็อกที่เพิ่มเข้ามาใหม่ควรปรากฏที่ตำแหน่งหางของช่วงเวลาปัจจุบัน
ดังนั้นหลังจากกินอาหารควรเพิ่มสี่เหลี่ยมก่อนที่จะอัปเดตแต่ละตำแหน่งของงูและตำแหน่งของมันจะถูกตั้งค่าที่ตำแหน่งหางของช่วงเวลาปัจจุบัน
จากนั้นในขณะนี้ตำแหน่งของบล็อกทั้งหมดยกเว้นบล็อกใหม่จะได้รับการปรับปรุง
index.html
งู
Var Canvas;
var ctx;
ตัวจับเวลา var;
// มาตรการ
var x_cnt = 15;
var y_cnt = 15;
VAR UNIT = 48;
var box_x = 0;
var box_y = 0;
var box_width = 15 * ยูนิต;
var box_height = 15 * ยูนิต;
var bound_left = box_x;
var bound_right = box_x + box_width;
var bound_up = box_y;
var bound_down = box_y + box_height;
// ภาพ
var image_sprite;
// วัตถุ
var งู;
อาหาร var;
var food_x;
var food_y;
// ฟังก์ชั่น
ฟังก์ชันบทบาท (SX, SY, SW, SH, ทิศทาง, สถานะ, ความเร็ว, ภาพ, ภาพ, ธง)
-
this.x = sx;
this.y = sy;
this.w = sw;
this.h = sh;
this.direction = ทิศทาง;
this.status = สถานะ;
this.peed = ความเร็ว;
this.image = image;
this.flag = Flag;
-
ฟังก์ชั่นการถ่ายโอน (ปุ่ม)
-
สวิตช์ (ปุ่ม)
-
กรณีที่ 37:
กลับ 1;
กรณีที่ 38:
กลับ 3;
กรณีที่ 39:
กลับ 2;
กรณีที่ 40:
กลับ 0;
-
-
ฟังก์ชัน addfood ()
-
//food_x=box_x+math.floor(math.random()*(box_width-unit));
//food_y=box_y+math.floor(math.random()*(box_height-unit));
food_x = หน่วย * math.floor (math.random () * x_cnt);
food_y = หน่วย * math.floor (math.random () * y_cnt);
อาหาร = บทบาทใหม่ (food_x, food_y, หน่วย, หน่วย, 0, 0, image_sprite, true);
-
ฟังก์ชั่นเล่น (เหตุการณ์)
-
VAR KYCODE;
if (event == null)
-
keycode = window.event.keycode;
window.event.preventdefault ();
-
อื่น
-
keycode = event.keycode;
Event.preventDefault ();
-
var cur_direction = transfer (keycode);
งู [0] .direction = cur_direction;
-
ฟังก์ชั่นอัปเดต ()
-
// เพิ่มชิ้นส่วนใหม่ลงในงูก่อนที่จะขยับงู
ถ้า (งู [0] .x == food.x && งู [0] .y == food.y)
-
ความยาว var = งูความยาว;
var tail_x = งู [ความยาว - 1] .x;
var tail_y = งู [ความยาว - 1] .y;
var tail = บทบาทใหม่ (tail_x, tail_y, หน่วย, หน่วย, งู [ความยาว - 1] .direction, 0, 0, image_sprite, true);
Snake.push (หาง);
addfood ();
-
// แก้ไขแอตทริบิวต์
// ย้ายหัว
สวิตช์ (งู [0] .Direction)
-
กรณี 0: // ลง
งู [0] .y += หน่วย;
ถ้า (งู [0] .y> bound_down - หน่วย)
งู [0] .y = bound_down - หน่วย;
หยุดพัก;
กรณีที่ 1: // ซ้าย
งู [0] .x -= หน่วย;
ถ้า (งู [0] .x <bound_left)
งู [0] .x = bound_left;
หยุดพัก;
กรณีที่ 2: // ขวา
งู [0] .x += หน่วย;
ถ้า (งู [0] .x> bound_right - หน่วย)
งู [0] .x = bound_right - หน่วย;
หยุดพัก;
กรณีที่ 3: // ขึ้น
งู [0] .y -= หน่วย;
ถ้า (งู [0] .y <bound_up)
งู [0] .y = bound_up;
หยุดพัก;
-
// ย้ายส่วนอื่นของงู
สำหรับ (var i = snake.length-1; i> = 0; i--)
-
ถ้า (i> 0)
//snake [ฉันเหมือนกัน. direction=snake atryi-1hint.direction;
-
งู [i] .x = งู [i - 1] .x;
งู [i] .y = งู [i - 1] .y;
-
-
-
ฟังก์ชั่น drawscene ()
-
ctx.clearrect (box_x, box_y, box_width, box_height);
ctx.strokestyle = "RGB (0,0,0";
ctx.strokerect (box_x, box_y, box_width, box_height);
// การตรวจจับการชนกัน
// วาดภาพ
สำหรับ (var i = 0; i <snake.length; i ++)
-
ctx.drawimage (image_sprite, งู [i] .x, งู [i] .y);
-
ctx.drawimage (image_sprite, food.x, food.y);
-
ฟังก์ชั่น init ()
-
canvas = document.getElementById ("ฉาก");
ctx = canvas.getContext ('2d');
// ภาพ
image_sprite = ภาพใหม่ ();
image_sprite.src = "images/sprite.png";
image_sprite.onload = function ()
-
// ojects
Snake = new Array ();
var head = บทบาทใหม่ (0 * หน่วย, 0 * หน่วย, หน่วย, หน่วย, 5, 0, 1, image_sprite, true);
Snake.push (หัว);
window.addeventListener ('keydown', เล่น, เท็จ);
addfood ();
setInterval (อัปเดต, 300); //บันทึก
setInterval (drawscene, 30);
-
การอ่านที่เกี่ยวข้อง: เกมงู HTML5 ใช้งานได้อย่างสมบูรณ์แบบโดยใช้รหัส 63 บรรทัด