كيفية كتابة لعبة 2048 في جافا سكريبت: تعليمات بسيطة

أصبحت ألعاب جافا سكريبت شائعة مؤخرا ، ومن أشهرها لعبة 2048. هذه لعبة ألغاز مثيرة تحتاج فيها إلى توصيل نفس الأرقام للحصول على أرقام ذات قيمة أكبر. إذا كنت تريد معرفة كيفية إنشاء مثل هذه الألعاب والتعمق في عالم البرمجة ، فهذه المقالة مناسبة لك.

بادئ ذي بدء ، سوف نحتاج إلى فهم أساسي لجافا سكريبت ، فضلا عن معرفة أساسيات هتمل و كس. إذا كانت لديك هذه المهارات بالفعل ، فيمكنك البدء فورا في إنشاء لعبة. إذا لم يكن كذلك ، فمن المستحسن أن تعلم أساسيات جافا سكريبت و هتمل / كس.

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

1. المبادئ الأساسية للعبة 2048
2. الأدوات اللازمة لكتابة لعبة جافا سكريبت
3. إنشاء حقل اللعب وعرض القيم الأولية
4. معالجة إجراءات المستخدم
5. خوارزمية لدمج وتحويل القيم في الملعب
6. توليد قيم جديدة والتحقق من إمكانية التحرك
7. عرض الحالة الراهنة للعبة والتحقق من الفوز / الخسارة
8. إضافة القدرة على إعادة تعيين اللعبة وتنفيذ القدرة على حفظ التقدم
9. سؤال وجواب
10. أي منصة يجب أن تستخدم لكتابة 2048 لعبة في جافا سكريبت?
11. ما هي المكونات الرئيسية ل 2048 لعبة جافا سكريبت?
12. هل من الممكن استخدام مكتبة جاهزة لإنشاء لعبة 2048 في جافا سكريبت?
13. ما هي أفضل الأدوات والمكتبات لاستخدامها لإنشاء 2048 لعبة في جافا سكريبت?
14. كم من الوقت يمكن أن يستغرق لإنشاء 2048 لعبة في جافا سكريبت?
15. هل من الممكن إضافة ميزة إلغاء الخطوة إلى 2048 لعبة في جافا سكريبت?

المبادئ الأساسية للعبة 2048

لعبة 2048 هي لعبة ألغاز تحتاج فيها إلى دمج الكتل بنفس الأرقام للحصول على كتلة برقم 2048. الملعب الرئيسي هو مربع مقسم إلى خلايا ، يمكن أن يحتوي كل منها على كتلة برقم أو تكون فارغة.

القواعد الأساسية للعبة:

1. بشكل افتراضي ، تظهر كتلتان بأرقام عشوائية 2 أو 4 في الملعب.
2. يمكن للاعب تحريك الكتل في أحد الاتجاهات الأربعة: لأعلى أو لأسفل أو لليسار أو لليمين.
3. ينتج عن كل إزاحة للكتل دمج الكتل بنفس الأرقام الموجودة بجانب بعضها البعض. نتيجة لهذا الاندماج ، تظهر كتلة جديدة تحتوي على مجموع الأرقام الأصلية.
4. إذا لم يتم دمج الكتل أثناء الإزاحة ، فإنها تتحرك في أقرب وقت ممكن إلى الاتجاه المحدد.
5. بعد كل نوبة ، تظهر كتلة جديدة برقم عشوائي 2 أو 4 على الخلية الحرة.
6. الهدف من اللعبة هو الحصول على كتلة برقم 2048. إذا كانت جميع الخلايا مشغولة بالكتل ولم تكن التعويضات الأخرى ممكنة ، فسيتم اعتبار اللعبة مفقودة.

تتطلب اللعبة 2048 من اللاعب التفكير المنطقي والتخطيط الاستراتيجي من أجل تحريك الكتل بشكل صحيح وتعظيم النتيجة. اللعبة بسيطة للغاية وفي نفس الوقت تسبب الإدمان.

الأدوات اللازمة لكتابة لعبة جافا سكريبت

لكتابة لعبة في جافا سكريبت ، ستحتاج إلى بعض الأدوات التي ستساعد في تبسيط وتسريع عملية التطوير. وهنا هي الأدوات الأساسية التي سوف تحتاج إليها:

1. محرر النصوص: يمكنك استخدام أي محرر نصوص لكتابة شفرة جافا سكريبت. الخيارات الشعبية هي فيسوال ستوديو كود ، أتوم ، سامية النص و المفكرة++.
2. المتصفح: ستحتاج أيضا إلى متصفح لاختبار لعبتك في جافا سكريبت. فمن المستحسن استخدام أحدث الإصدارات من كروم ، فايرفوكس ، سفاري أو حافة المتصفحات ، لأنها تدعم وظائف جافا سكريبت الحديثة.
3. أتش تي أم أل و كس: لإنشاء واجهة المستخدم من اللعبة في جافا سكريبت ، وسوف تحتاج إلى معرفة هتمل و كس. يتم استخدام هتمل لإنشاء ترميز صفحة ويب ، ويستخدم كس لنمط هذا الترميز.
4. جافا سكريبت: الأداة الرئيسية لكتابة لعبة جافا سكريبت هي ، بالطبع ، لغة برمجة جافا سكريبت نفسها. وسوف تحتاج إلى معرفة جيدة من المفاهيم الأساسية وبناء الجملة من جافا سكريبت.

ومن الجدير بالذكر أيضا أن كتابة لعبة 2048 في جافا سكريبت تتطلب استخدام بعض المكتبات والأطر الإضافية، مثل:

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

باستخدام هذه الأدوات والمكتبات ، ستتمكن من تطوير لعبة جافا سكريبت بشكل أكثر كفاءة. حظا سعيدا في إنشاء لعبة 2048!

إنشاء حقل اللعب وعرض القيم الأولية

عند إنشاء لعبة 2048 في جافا سكريبت ، تحتاج إلى إنشاء حقل اللعب وعرض القيم الأولية.

1. خلق الملعب:
• .
• حدد عدد الصفوف والأعمدة في الجدول المقابل لحجم الملعب.
• .
• تعيين معرفات فريدة لكل خلية بحيث يمكن بعد ذلك الوصول إليها عبر جافا سكريبت.
2. عرض القيم الأولية:
• وتحديد معرف فريد من الجدول.
• لتعيين محتويات الخلية. يمكن تعيين القيم الأولية إلى الصفر أو اختيار بعض الأرقام بشكل عشوائي من مجموعة محددة مسبقا.

مثال على إنشاء ملعب وعرض القيم الأولية:

وبالتالي ، سيتم إنشاء حقل اللعب وسيتم عرض القيم الأولية في الخلايا المقابلة.

معالجة إجراءات المستخدم

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

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

نموذج التعليمات البرمجية لمعالجة إجراءات المستخدم:

// معالج لحدث ضغطة المفاتيح

وثيقة.أدفنتليستينر ('كيدون' ، وظيفة (الحدث) {

// تحديد المفتاح المضغوط

فار رمز المفتاح = حدث.كيكود;

// تنفيذ الإجراءات المناسبة

التبديل (رمز المفتاح) {

الحالة 37: / / المفتاح الأيسر

موفيليفت();

استراحة;

الحالة 38: / / مفتاح أعلى

موفوب();

استراحة;

الحالة 39: / / المفتاح الأيمن

موفيرايت();

استراحة;

الحالة 40: / / مفتاح أسفل

موفيدون();

استراحة;

}

});

// وظيفة تحريك الرقائق إلى اليسار

وظيفة موفيليفت () {

// الرمز الخاص بك لتحريك الرقائق إلى اليسار

}

// وظيفة تحريك الرقائق لأعلى

وظيفة موفيوب () {

// الرمز الخاص بك لتحريك الرقائق لأعلى

}

// وظيفة تحريك الرقائق إلى اليمين

وظيفة موفيرايت () {

// الرمز الخاص بك لنقل الرقائق إلى اليمين

}

// وظيفة تحريك الرقائق لأسفل

وظيفة موفدون () {

// الكود الخاص بك لتحريك الرقائق لأسفل

}

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

خوارزمية لدمج وتحويل القيم على

ساحة اللعب 2048 هي لعبة تحتاج فيها إلى توصيل الكتل بنفس الأرقام للحصول على كتلة رقمية ذات قيمة أعلى. للقيام بذلك ، يتم استخدام خوارزمية لدمج القيم وتحويلها ، والتي تعمل على النحو التالي:

1. التحول في الاتجاه المحدد. على سبيل المثال ، إذا اختار المستخدم التحول إلى اليسار ، فعندئذ:
2. دمج القيم:
3. إنشاء كتلة جديدة:
4. التحقق من نهاية اللعبة:

وبالتالي ، فإن خوارزمية دمج وتحويل القيم تسمح للاعب بتحريك الكتل في جميع أنحاء الملعب ودمجها للوصول إلى القيمة القصوى 2048 والفوز باللعبة.

توليد قيم جديدة والتحقق من إمكانية التحرك

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

عند إنشاء قيم جديدة في الحقل ، نحتاج إلى تحديد خلية فارغة عشوائية وتعبئتها إما بالقيمة 2 أو القيمة 4. للقيام بذلك ، يمكننا استخدام الرياضيات.وظيفة عشوائية () للحصول على رقم عشوائي من 0 إلى 1 ، وبناء على هذا الرقم ، حدد القيمة التي ستحصل عليها الخلية الجديدة.

يتضمن التحقق من إمكانية التحرك التحقق من الخلايا الفارغة وفحص الخلايا المجاورة للحصول على قيمة متساوية. إذا لم تكن هناك خلايا فارغة ولا توجد خلايا مجاورة لها نفس القيم ، فإن اللعبة قد انتهت ويحتاج المستخدم إلى إبلاغه بها.

Ниже приведен код, который демонстрирует, как можно реализовать генерацию новых значений и проверку возможности хода:

function generateNewValue(table) {

var emptyCells = [];

for(var i = 0; i < table.length; i++) {

for(var j = 0; j < table[i].length; j++) {

if(table[i][j] === 0) {

emptyCells.push({row: i, column: j});

}

}

}

if(emptyCells.length === 0) {

return false;

}

var randomIndex = Math.floor(Math.random() * emptyCells.length);

var randomNumber = Math.random() < 0.9 ? 2 : 4;

var randomCell = emptyCells[randomIndex];

table[randomCell.row][randomCell.column] = randomNumber;

return true;

}

function checkMovePossible(table) {

for(var i = 0; i < table.length; i++) {

for(var j = 0; j < table[i].length; j++) {

if(table[i][j] === 0) {

return true;

}

if(i < table.length - 1 && table[i][j] === table[i + 1][j]) {

return true;

}

if(j < table[i].length - 1 && table[i][j] === table[i][j + 1]) {

return true;

}

}

}

return false;

}

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

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

عرض الحالة الراهنة للعبة والتحقق من الفوز / الخسارة

في لعبة 2048 ، سنستخدم طاولة 4 4 4 لعرض الحالة الحالية لملعب اللعب. ستحتوي كل خلية في الجدول على قيمة يمكن أن تكون فارغة أو قوة 2.

وفيما يلي وظيفة التي تعرض الحالة الراهنة للعبة:

وظيفة ريندرغام () {

فار غاميكونتينر = وثيقة.جيتليمنتبيد ("لعبة الحاويات");

جيم كونتينر.إينرتمل = "";

for (var i = 0; i < gameBoard.length; i++) {

var row = document.createElement("tr");

for (var j = 0; j < gameBoard[i].length; j++) {

var cell = document.createElement("td");

if (gameBoard[i][j] !== 0) {

cell.innerHTML = gameBoard[i][j];

}

row.appendChild(cell);

}

gameContainer.appendChild(row);

}

}

renderGame();

Эта функция очищает контейнер с id «game-container» и заполняет его таблицей, используя текущее состояние игрового поля. Если значение ячейки не равно нулю, то оно отображается внутри ячейки.

Теперь добавим функциональность для проверки на победу и проигрыш:

function checkWin() {

for (var i = 0; i < gameBoard.length; i++) {

for (var j = 0; j < gameBoard[i].length; j++) {

if (gameBoard[i][j] === 2048) {

return true;

}

}

}

return false;

}

function checkLoss() {

for (var i = 0; i < gameBoard.length; i++) {

for (var j = 0; j < gameBoard[i].length; j++) {

if (gameBoard[i][j] === 0) {

return false;

}

if (i !== 0 && gameBoard[i][j] === gameBoard[i - 1][j]) {

return false;

}

if (j !== 0 && gameBoard[i][j] === gameBoard[i][j - 1]) {

return false;

}

if (i !== gameBoard.length - 1 && gameBoard[i][j] === gameBoard[i + 1][j]) {

return false;

}

if (j !== gameBoard[i].length - 1 && gameBoard[i][j] === gameBoard[i][j + 1]) {

return false;

}

}

}

return true;

}

function playGame() {

// логика игры

renderGame();

if (checkWin()) {

// игра закончена, победа

console.log("Вы победили!");

} else if (checkLoss()) {

// игра закончена, проигрыш

وحدة التحكم.سجل ("لقد فقدت!");

} آخر {

// استمر في اللعب

}

}

لعبة اللعب();

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

تتحقق وظيفة المراجعة () مما إذا كان يمكن متابعة اللعبة. إذا لم تكن هناك خلايا فارغة في الملعب وكان من المستحيل دمج الخلايا في الخلايا المجاورة ، فإن الوظيفة تعود بشكل صحيح ، مما يعني خسارة. خلاف ذلك ، فإنه يعود كاذبة.

تسمى وظيفة اللعب () في كل مرة بعد دور اللاعب وتتحقق من الحالة الحالية للعبة. إذا فاز اللاعب (تشيكوين () يعود صحيحا) ، فإن الرسالة " لقد فزت!"يتم عرض. إذا فقد اللاعب (المراجعة () يعود صحيحا) ، فإن الرسالة " لقد فقدت!"يتم عرض. إذا لم تنته اللعبة بعد ، فإننا نواصل اللعب.

إضافة القدرة على إعادة تعيين اللعبة وتنفيذ القدرة على حفظ التقدم

في هذا القسم ، سننظر في كيفية إضافة القدرة على إعادة تعيين اللعبة بحيث يمكن للمستخدم بدء اللعبة مرة أخرى ، وتنفيذ الوظيفة لحفظ تقدم اللعبة.

بادئ ذي بدء ، سنضيف زر "إعادة تعيين اللعبة" إلى ملعبنا. للقيام بذلك ، سوف نحتاج إلى عنصر.

رمز هتمل لزر إعادة الضبط:

إعادة تعيين اللعبة

الآن نحن بحاجة إلى إضافة وظيفة إعادة تعيين () ، والتي سوف إعادة تعيين اللعبة إلى حالتها الأولية:

وظيفة إعادة تعيين اللعبة () {

// مسح الوضع الحالي للعبة

// وتعيين القيم الأولية

}

بعد ذلك ، ضع في اعتبارك تنفيذ حفظ تقدم اللعبة. سوف نستخدم لوكالستوراج لتخزين بيانات اللعبة.

الخطوة الأولى هي إضافة زر "حفظ اللعبة". دعنا نستخدم العنصر لهذا:

حفظ اللعبة

الآن دعنا نضيف وظيفة حفظ اللعبة () ، والتي ستوفر الحالة الحالية للعبة في التخزين المحلي:

وظيفة حفظ اللعبة () {

// احصل على الوضع الحالي للعبة

// احفظ حالة اللعبة في التخزين المحلي

}

لحفظ حالة اللعبة في لوكالستوراج ، يمكنك استخدام طريقة سيتيتم() :

التخزين المحلي.سيتيتم ('جيم ستيت' ، جسون.سترينجيفي (جيم ستيت));

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

الآن دعونا نلقي نظرة على كيفية تحميل حالة اللعبة المحفوظة عند بدء اللعبة.

يمكننا استخدام الحدث" دومكونتينتلوديد " ، الذي يتم تشغيله عندما يتم تحميل شجرة دوم بالكامل ، لتحميل حالة اللعبة المحفوظة من لوكالستوراج:

وثيقة.أدفنتليستينر ('دومكونتينتلودد' ، وظيفة () {

// قم بتحميل حالة اللعبة من التخزين المحلي

// استعادة اللعبة بالحالة المحملة

});

لتحميل حالة اللعبة المحفوظة من لوكالستوراج ، يمكنك استخدام طريقة جيتيتم() :

فار سافيدجامستات = لوكالستوراج.جيتيتم ('جيم ستيت');

فار غاميستات = جسون.تحليل (حفظاللعبة);

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

الآن بعد أن قمنا بتنزيل حالة اللعبة المحفوظة ، يمكننا استعادة اللعبة باستخدام البيانات التي تلقيناها.

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

سؤال وجواب

أي منصة يجب أن تستخدم لكتابة 2048 لعبة في جافا سكريبت?

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

ما هي المكونات الرئيسية ل 2048 لعبة جافا سكريبت?

المكونات الرئيسية للعبة جافا سكريبت 2048 هي الملعب ، وعناصر البلاط ، ومنطق نقل وإضافة البلاط ، وواجهة المستخدم.

هل من الممكن استخدام مكتبة جاهزة لإنشاء لعبة 2048 في جافا سكريبت?

نعم ، هناك مكتبات جاهزة تبسط عملية إنشاء لعبة 2048 في جافا سكريبت. على سبيل المثال ، يمكنك استخدام مكتبة فيزر ، والتي توفر أدوات لإنشاء الألعاب.

ما هي أفضل الأدوات والمكتبات لاستخدامها لإنشاء 2048 لعبة في جافا سكريبت?

لإنشاء لعبة 2048 في جافا سكريبت ، يمكنك استخدام الأدوات والمكتبات مثل هتمل ، كس لإنشاء واجهة مستخدم ، جافا سكريبت لمنطق اللعبة وتفاعل المستخدم ، وكذلك المكتبات مثل رد فعل أو الزاوي لتبسيط عملية التنمية.

كم من الوقت يمكن أن يستغرق لإنشاء 2048 لعبة في جافا سكريبت?

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

هل من الممكن إضافة ميزة إلغاء الخطوة إلى 2048 لعبة في جافا سكريبت?

نعم ، يمكنك إضافة ميزة التراجع إلى لعبة 2048 في جافا سكريبت. للقيام بذلك ، تحتاج إلى حفظ محفوظات الحركات والسماح للمستخدم بإلغاء الحركات من خلال العودة إلى الحالات السابقة في الملعب.