ตัวอย่างการใช้งานเกมเขาวงกตแคนวาสง่ายๆ อย่างรวดเร็ว

(ฉันค่อนข้างหมกมุ่นอยู่กับรูปแบบการออกแบบเมื่อเร็ว ๆ นี้ และมันน่าเบื่อนิดหน่อยที่ต้องเผชิญหน้ากับ js ล้วน ๆ ตลอดเวลา -_- ดังนั้นฉันจึงเขียนสิ่งที่น่าสนใจเพื่อเพิ่มสีสัน)

ตอนนี้ผืนผ้าใบไม่ใช่เรื่องใหม่ แต่เนื่องจากไม่ได้ใช้กันทั่วไปในธุรกิจประจำวัน จึงไม่มีการฝึกฝนมากนัก วันนี้ฉันจะแบ่งปันวิธีการใช้เขาวงกตผืนผ้าใบแบบง่ายๆ ตัวอย่างนี้มาจาก "กลโกง html5" รุ่นที่สอง และโค้ดได้รับการปรับเปลี่ยนเล็กน้อย

เนื่องจากมีขั้นตอนตรงกลางเมื่อใช้ Canvas เพื่อรับข้อมูลรูปภาพ จึงต้องใช้สภาพแวดล้อมเซิร์ฟเวอร์ เลยเขียนตัวอย่างไว้ก่อนแล้วโยนลงเซิฟเวอร์เพื่อให้ทุกคนได้สัมผัสกับเอฟเฟกต์ก่อน (ใช้ความรู้สึกของความสำเร็จเป็นแรงผลักดัน 555)

คลิกฉันเพื่อสัมผัส

ที่อยู่คอมไพล์

การนำเกมเล็กๆ นี้ไปใช้ไม่ใช่เรื่องยาก ให้เราคิดถึงองค์ประกอบพื้นฐานของเกมเขาวงกตกัน

ก่อนอื่นต้องมีแผนที่ แล้วก็ต้องมีตัวร้ายที่เคลื่อนไหวได้ เราใช้คาวานเพื่อวาดสองคนนี้

ต่อไปเป็นโปรแกรมการเคลื่อนย้ายวัตถุ โปรแกรมนี้ประกอบด้วย 2 ส่วนหลักๆ คือ

1. ปล่อยให้วัตถุเคลื่อนที่ตามคำแนะนำที่เราระบุ

2. ตรวจสอบว่าวัตถุสัมผัสผนังหรือทางออก

วาดแผนที่เขาวงกตและภาพเคลื่อนไหว

ขั้นตอนหลักในการวาดแผนที่คือ:

1. รับภาพแผนที่
2. ใช้คาเวนเพื่อวาดภาพ

สามารถรับการสร้างแผนที่เขาวงกตได้ด้วยความช่วยเหลือของเครื่องสร้างเขาวงกตออนไลน์จาก Google

เช่นเดียวกับการวาดภาพคนร้าย เพียงมองหาภาพคนร้าย แต่สิ่งที่คุณต้องใส่ใจคือคุณต้องหาภาพสี่เหลี่ยมจัตุรัสเพราะเราจะต้องทำการตรวจจับการชนกันของมือถือในภายหลังและสี่เหลี่ยม ง่ายต่อการตัดสิน

ต่อไปเราจะเขียนฟังก์ชั่นหลักในการวาดเขาวงกตและผู้ร้าย

 ฟังก์ชั่น DrawMaze(mazeFile, beginningX, beginningY) { var imgMaze = new Image() imgMaze.onload = function () { // การปรับขนาดผ้าใบ canvas.width = imgMaze.width canvas.height = imgMaze.height // วาดใบหน้าที่ยิ้มแย้ม var imgFace = document.getElementById(face) context.drawImage(imgMaze, 0, 0) x = beginningX y = การเริ่มต้น Y context.drawImage (imgFace, x, y) context. stroke() } imgMaze.src = mazeFile}

mazeFile คือที่อยู่รูปภาพของเขาวงกต, beginningX และ beginningY คือพิกัดของจุดเริ่มต้น มีสองวิธีในการแนะนำรูปภาพที่นี่ เหตุผลก็คือ ฉันไม่ได้เปลี่ยนรูปภาพของผู้ร้ายบ่อย ๆ ดังนั้นฉันจึงเขียนลงในเพจโดยตรง หากคุณต้องการที่จะ ไม่มีปัญหาหากคุณนำเข้าโดยตรงโดยใช้ js ส่วนอื่นๆ ค่อนข้างเรียบง่ายและจะไม่อธิบายอีก

หลักการสำคัญของการเคลื่อนไหวคือ:

ยอมรับอินพุตของผู้ใช้ที่ระบุ (ในกรณีนี้ ให้ตอบสนองต่อปุ่มทิศทาง) และแปลงเป็นคำสั่งการเคลื่อนไหวที่สอดคล้องกัน จากนั้นตรวจสอบคำแนะนำในการเคลื่อนไหวเป็นระยะและวาดตำแหน่งเป้าหมายที่เกี่ยวข้อง ยกตัวอย่างง่ายๆ:

ตัวอย่างเช่น ทุกครั้งที่กดปุ่มทิศทางขึ้น ระบบจะบันทึกว่าควรเลื่อนขึ้น จากนั้นทุกๆ 100 มิลลิวินาที จะตรวจสอบคำสั่งการเคลื่อนไหวปัจจุบัน วาดตำแหน่งเป้าหมายที่ควรเคลื่อนที่ และทำซ้ำขั้นตอนนี้ รหัสนั้นค่อนข้างง่าย:

 // ย้ายฟังก์ชัน function processKey(e) { dx = 0 dy = 0 // ขึ้น ลง ซ้ายและขวา การตรวจจับคีย์ทิศทาง if (e.keyCode === 38) { dy = -1 } if (e.keyCode = == 40) { dy = 1 } ถ้า (e.keyCode === 37) { dx = -1 } ถ้า (e.keyCode === 39) { dx = 1 }}// ฟังก์ชั่นวาดเฟรม DrawFrame() { if (dx != 0 || dy != 0) { // context.clearRect(x,y,canvas.width,canvas.height) // วาดบริบทของวิถีการเคลื่อนที่ BeginPath(); context.fillStyle = rgb(254,244,207) context.rect(x, y, 15, 15) บริบท.เติม() x += dx y += dy // การตรวจจับการชน if (checkForCollision()) { x -= dx y -= dy dx = 0 dy = 0 } //วาดตำแหน่งที่ผู้ร้ายควรเคลื่อนที่ var imgFace = document.getElementById( ' ใบหน้า') context.drawImage (imgFace, x, y) ถ้า (canvas.height - y < 17) { // isFirst = false alert('Congratulations on finish the game') return false } // หากรีเซ็ตที่นี่ มันจะกลายเป็นการเคลื่อนไหวที่ไม่อัตโนมัติ กล่าวคือ ทุกครั้งที่กดปุ่มทิศทาง มันจะก้าวไปข้างหน้าเพียงก้าวเดียวเท่านั้น ตั้งแต่ประสบการณ์ปัจจุบัน ไม่ดี เราจะไม่รีเซ็ตตอนนี้/ / dx = 0 // dy = 0 } setTimeout(drawFrame, 20)}

ในโค้ดข้างต้น ฟังก์ชันการเคลื่อนไหวค่อนข้างง่าย ฟังก์ชันที่สำคัญกว่าสำหรับการวาดเฟรมคือฟังก์ชันการตรวจจับการชนกัน ซึ่งจะอธิบายในรายละเอียดด้านล่าง

ในการตรวจสอบว่าวัตถุชนกับกำแพงหรือไม่ โดยปกติจะต้องบันทึกข้อมูลแผนที่ลงในหน่วยความจำก่อน จากนั้นจึงตรวจสอบว่าวัตถุชนกับกำแพงปัจจุบันหรือไม่เมื่อเคลื่อนย้ายวัตถุ อย่างไรก็ตาม เนื่องจากพื้นหลังของแผนที่ของเราเป็นสีดำและ เขาวงกตสีขาว เราสามารถใช้สีตรวจจับการชนได้ วิธีการเฉพาะคือ:

รับตำแหน่งพิกัดของวัตถุปัจจุบันและใช้ Canvas เพื่อตรวจสอบว่าสีของตำแหน่งนี้บนแผนที่ปัจจุบันเป็นสีดำหรือไม่ หากเป็นเช่นนั้น เรียกว่าเป็นกำแพงและไม่ควรดำเนินการใดๆ ต่อไปนี้เป็นรหัส:

 ฟังก์ชั่น checkForCollision () { var imageData = context.getImageData (x - 1, y - 1, 15 + 2, 15 + 2) varpixel = imageData.data สำหรับ (var i = 0, len =pixels.length; i < len ; i++) { var red = พิกเซล [i], สีเขียว = พิกเซล [i + 1] สีน้ำเงิน = พิกเซล [i + 2] อัลฟา = พิกเซล [i + 3] // ตรวจสอบว่ามันชนผนังสีดำหรือไม่ถ้า (สีแดง === 0 && สีเขียว === 0 && สีน้ำเงิน === 0) { return true } } return false}

ที่นี่ 15 คือความกว้างของตัวร้าย เราตรวจพบช่วง 1px ทั้งสองด้านของตัวร้าย (ตรงกับ getImageData(x - 1, y - 1, 15 + 2, 15 + 2) ในโค้ด คุณสามารถคิดเกี่ยวกับ เหตุใดจึงเป็น + ที่นี่ 2) หากเป็นสีดำแสดงว่าตรวจพบการชน

ในโค้ดนี้ ฉันได้เพิ่มฟังก์ชันอื่นๆ บางอย่าง เช่น การแจ้งคำตอบ เป็นต้น สำหรับการเปลี่ยนแผนที่นั้นค่อนข้างง่าย: เก็บที่อยู่ไฟล์ พิกัดจุดเริ่มต้น ตอบเส้นทางรูปภาพ ฯลฯ ที่สอดคล้องกับแผนที่ในวัตถุ จากนั้นตั้งค่าอาร์เรย์แผนที่ สลับแผนที่และแสดงผลอีกครั้งเมื่อคลิก ยังมีบางพื้นที่ที่ควรค่าแก่การปรับปรุง เช่น:

1. ประสบการณ์การตรวจจับการชนทำได้ไม่ดีในมุม
2. มีการติดตามเมื่อทำงานในสถานการณ์ปัจจุบัน ฉันจะลบการติดตามในโหมดรับสายได้อย่างไร

นักศึกษาที่สนใจสามารถทดลองนำไปปฏิบัติได้ด้วยตนเอง

ตัวอย่างนี้ค่อนข้างง่ายและไม่มีข้อกำหนดสูงสำหรับ js มันค่อนข้างดีที่จะเล่นกับมัน

แล้วก็ยังลงท้ายเหมือนเดิมทุกครั้ง หากมีข้อผิดพลาดประการใด โปรดชี้แนะ หากเป็นประโยชน์โปรดกดไลค์และบันทึกไว้ด้วย โปรดขออนุญาตก่อนพิมพ์ซ้ำและระบุแหล่งที่มาด้วย หากมีคำถามใดๆ คุณสามารถสื่อสารผ่านข้อความส่วนตัวได้ หน้าแรก มีที่อยู่อีเมลแล้ว~ หลุดไป

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network