مثال على التنفيذ السريع للعبة متاهة قماشية بسيطة

(لقد كنت مهووسًا بعض الشيء بأنماط التصميم مؤخرًا، ومن الممل بعض الشيء أن أواجه لغة js النقية طوال الوقت -_-. لذلك كتبت شيئًا مثيرًا للاهتمام لإضفاء الإثارة عليه)

القماش ليس جديدًا الآن، ولكن نظرًا لأنه ليس شائع الاستخدام في الأعمال اليومية، فلا يوجد الكثير من التدريب عليه اليوم، وسأشارككم كيفية تنفيذ متاهة قماشية بسيطة. هذا المثال مأخوذ من الإصدار الثاني من "غش HTML5"، وقد تم تعديل الكود قليلاً.

نظرًا لوجود خطوة في المنتصف عند استخدام اللوحة القماشية للحصول على معلومات الصورة، يجب استخدام بيئة الخادم. لذلك قمت أولاً بكتابة عينة وألقيتها على الخادم حتى يتمكن الجميع من تجربة التأثير أولاً (استخدم حس الإنجاز كقوة دافعة هاهاها)

انقر لي للتجربة

عنوان بوابة

ليس من الصعب تنفيذ هذه اللعبة الصغيرة، فلنفكر في العناصر الأساسية للعبة المتاهة.

أولاً بالطبع، يجب أن تكون هناك خريطة، ومن ثم يجب أن يكون هناك شرير متحرك. نستخدم الكافانات لرسم هذين الشخصين؛

التالي هو برنامج تحريك الأشياء. يتضمن هذا البرنامج بشكل أساسي جانبين:

1. دع الكائن يتحرك وفقًا للتعليمات التي نحددها؛

2. اكتشف ما إذا كان الجسم يلامس الحائط أو يخرج.

رسم خريطة المتاهة والأشكال المتحركة

الخطوات الأساسية في رسم الخريطة هي:

1. الحصول على صورة للخريطة
2. استخدم الكافانات لرسم الصور.

يمكن الحصول على إنشاء خريطة المتاهة بمساعدة مولد المتاهة عبر الإنترنت من Google.

الأمر نفسه ينطبق على رسم الشرير، ما عليك سوى البحث عن صورة الشرير، ومع ذلك، ما عليك الانتباه إليه هنا هو أنك بحاجة إلى العثور على صورة مربعة، لأننا سنحتاج إلى إجراء اكتشاف الاصطدام المحمول لاحقًا. من الأسهل الحكم.

بعد ذلك، سنكتب الوظائف الرئيسية لرسم المتاهات والأشرار.

 function drawMaze(mazeFile, beginX, beginY) { 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 = beginX y = startY context.drawImage(imgFace, x, y) context.stroke() } imgMaze.src = mazeFile}

mazeFile هو عنوان صورة المتاهة، وstartX وstartY هما إحداثيات نقطة البداية. هناك طريقتان لتقديم الصور هنا والسبب هو أنني لا أغير صور الشرير كثيرًا، لذلك أكتبها مباشرة على الصفحة، والمقصود أن تكون خريطة المتاهة متغيرة، لذا أقدمها js.إذا كنت تريد ذلك، فلا توجد مشكلة إذا قمت باستيراده مباشرة باستخدام js. الأجزاء الأخرى بسيطة نسبيًا ولن يتم وصفها مرة أخرى.

المبادئ الأساسية للحركة هي:

يقبل إدخال المستخدم المحدد (في هذه الحالة، يستجيب لمفاتيح الاتجاه) ويحوله إلى تعليمات الحركة المقابلة. ثم تحقق بشكل دوري من تعليمات الحركة وارسم موضع الهدف المقابل. أعط مثالا بسيطا:

على سبيل المثال، في كل مرة يتم الضغط على مفتاح الاتجاه لأعلى، يتم تسجيل أنه يجب أن يتحرك لأعلى، ثم يتحقق كل 100 مللي ثانية من أمر الحركة الحالية، ويرسم موقع الهدف حيث يجب أن يتحرك، ويكرر هذه العملية. الكود أيضًا بسيط نسبيًا:

 // نقل الوظيفة functionprocessKey(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 }}// رسم الإطار function 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) context.fill() x += dx y += dy // كشف التصادم if (checkForCollision()) { x -= dx y -= dy dx = 0 dy = 0 } // ارسم الموقع الذي يجب أن يتحرك فيه الشرير var imgFace = document.getElementById( 'face') context.drawImage(imgFace, x, y) if (canvas.height - y < 17) { // isFirst = false تنبيه ("تهانينا على إكمال اللعبة") return false } // إذا تمت إعادة التعيين هنا، فستصبح حركة غير تلقائية، أي أنه في كل مرة يتم الضغط على مفتاح الاتجاه، فإنه سيتقدم خطوة واحدة فقط للأمام منذ التجربة الحالية ليس جيدًا، لن نقوم بإعادة ضبطه الآن/ / dx = 0 // dy = 0 } setTimeout(drawFrame, 20)}

في الكود أعلاه، وظيفة الحركة بسيطة نسبيًا، والوظيفة الأكثر أهمية لرسم الإطارات هي وظيفة اكتشاف الاصطدام، والتي سيتم شرحها بالتفصيل أدناه.

لاكتشاف ما إذا كان كائن ما يصطدم بجدار، فمن الضروري عادةً حفظ معلومات الخريطة في الذاكرة أولاً، ثم اكتشاف ما إذا كان يصطدم بجدار حالي عند تحريك الكائن. ومع ذلك، نظرًا لأن خلفية خريطتنا سوداء اللون متاهة بيضاء، يمكننا استخدام اللون للكشف عن الاصطدامات. الطريقة المحددة هي:

احصل على الموضع الإحداثي للكائن الحالي واستخدم اللوحة القماشية لاكتشاف ما إذا كان لون هذا الموضع على الخريطة الحالية أسودًا، ويُقال إنه جدار ولا ينبغي تنفيذ الحركة، وفيما يلي الكود:

 دالة checkForCollision() { var imageData = context.getImageData(x - 1, y - 1, 15 + 2, 15 + 2) var بكسل = imageData.data for (var i = 0, len = Pixels.length; i < len ; i++) { فار أحمر = بكسل [i]، أخضر = بكسل [i + 1] أزرق = بكسل [i + 2] ألفا = بكسل [i + 3] // تحقق مما إذا كان يصطدم بجدار أسود if (red === 0 && green === 0 && blue === 0) { return true } } return false}

هنا، 15 هو عرض الشرير. نكتشف نطاق 1 بكسل على جانبي الشرير (المتوافق مع getImageData(x - 1, y - 1, 15 + 2, 15 + 2) في الكود. يمكنك التفكير في ذلك لماذا هو + هنا 2)، إذا كان أسود، فهذا يعني اكتشاف الاصطدام.

أضفت في الكود بعض الوظائف الأخرى، مثل المطالبة بالإجابات، وما إلى ذلك. أما بالنسبة لتغيير الخريطة، فهو بسيط نسبيًا: قم بتخزين عنوان الملف، وإحداثيات نقطة البداية، ومسار صورة الإجابة، وما إلى ذلك المطابق للخريطة في كائن، ثم قم بتعيين مصفوفة خريطة، وقم بتبديل الخريطة وإعادة عرضها عند النقر عليها. لا تزال هناك بعض المجالات التي تستحق التحسين، مثل:

1. تجربة الكشف عن الاصطدام ليست جيدة في المنعطفات؛
2. توجد آثار عند التشغيل في الوضع الحالي. كيف يمكنني إزالة الآثار في وضع الإجابة؟

يمكن للطلاب المهتمين محاولة تنفيذه بأنفسهم.

هذا المثال بسيط نسبيًا ولا يحتوي على متطلبات عالية لـ js، ومن الجيد اللعب به.

وبعد ذلك تظل نفس النهاية في كل مرة. إذا كان هناك أي أخطاء في المحتوى، يرجى الإشارة إليها، إذا كان ذلك مفيدًا لك، فنحن نرحب بك لإبداء إعجابك بها وحفظها. يرجى طلب الإذن قبل إعادة الطباعة والإشارة إلى المصدر إذا كان لديك أي أسئلة، فنحن نرحب بتواصلك معنا عبر الرسائل الخاصة. الصفحة الرئيسية حصلت على عنوان بريد إلكتروني ~ هرب

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.