تعليق: يحتوي Tetris على 7 أجزاء ، ويشغل كل جزء رقمًا مختلفًا للمستطيل ، لذلك قم بإنشاء فئة مكون ، ثم قم بإنشاء صفيف لتخزين 7 أجزاء. يحتوي كل جزء على الصفيف لتخزين رقم وموضع المستطيل الذي يشغله المكون. فيما يلي مقدمة مفصلة
المبادئ الأساسية لتنفيذ هذه اللعبة:منطقة اللعبة هي منطقة محدودة الحجم. تحتوي منطقة اللعبة في هذه اللعبة على 21 × 25 مستطيلة ، كل عرض مستطيل هو 10 وحدات ، والارتفاع هو 6 وحدات (وحدة المطلقة من القماش ثابتة ، غير بكسل).
قم بإنشاء فئة Rusblock لاحتواء البيانات والسلوكيات المقابلة ، وإنشاء صفيف ثنائي الأبعاد [21] [25] لتسجيل المستطيلات الملحوظة في منطقة اللعبة.
يحتوي Tetris على 7 أجزاء ، ويشغل كل جزء رقمًا مختلفًا وموقعًا للمستطيل ، لذلك قم بإنشاء فئة مكون ، ثم قم بإنشاء صفيف لتخزين 7 أجزاء. يحتوي كل جزء على الصفيف لتخزين رقم وموضع المستطيل الذي يشغله المكون. عندما ينتهي الجزء المتساقط ، سيتم إنشاء جزء جديد ، وسيتم تعيين المستطيل المميز للجزء إلى مجموعة منطقة اللعبة.
في وظيفة حلقة اللعبة ، تتم طباعة الأجزاء المتساقطة ، والأجزاء الثابتة بالفعل ، وطباعة الأجزاء المتساقطة.
المعرفة الأساسية:
HTML5 CSS JS
تتضمن هذه اللعبة ثلاثة ملفات:
Rusblock.html: إعداد العناصر
rusblock.css: مجموعة النمط
Rusblock.js: السيناريو التحكم
الخطوة 1: إعدادات الواجهة وإعداد المواد
Rusblock.html
<! doctype html>
<html>
<head>
<title> rusblock </title>
<link rel = typesheet type = text/css href = rusblock.css>
<script type = text/javaScript>
وظيفة sharegame () {
var url =؟ link = + document.url + & title = rusblock ؛
window.showmodaldialog ([url]) ؛
}
</script>
</head>
<body onKeyup = Action (event)>
<audio loop = loop id = pracked-udioplayer preload = auto>
<المصدر src = الصوت/الخلفية. mp3 ″ type = audio/mp3 ″/>
</audio>
<Audio ID = Gameover-Audioplayer preload = auto>
<المصدر src = audio/gameover.ogg type = audio/ogg>
</audio>
<Audio id = Score-Audioplayer preload = auto>
<المصدر SRC = Audio/Score.mp3 ″ type = Audio/MP3 ″/>
</audio>
<div id = area>
<div id = button-area>
<h1 id = game-name> rusblock </h1>
<button id = button-game-start OnClick = GameStart ()> ابدأ </button>
<button id = button-game-end onClick = gameend ()> end </utton>
<معرف النموذج = مستوى اللعبة الشكل>
<حدد معرف = تحديد مستوى اللعبة>
<قيمة الخيار = 500 ″ محدد = محدد> سهلة </option>
<قيمة الخيار = 300 ″> العادي </option>
<قيمة الخيار = 200 ″> HARD </OPECT>
</select>
</form>
<button onClick = sharegame () id = button-game-shar
</div>
<canvas id = game-canvas> </tanvas>
<div id = score-area>
<H2> SCORE </h2>
<p id = game-score> 0 </p>
</div>
</div>
<script type = text/javaScript src = rusblock.js> </script>
</body>
</html>
الخطوة 2: الأسلوب
rosblock.css
جسم {
لون الخلفية: رمادي.
محاذاة النص: المركز ؛
Font-Family: "Times New Roman" ؛
صورة الخلفية: url () ؛
}
H1#Game-Name {
خلفية اللون: أبيض.
العرض: 100 ٪ ؛
حجم الخط: x-large ؛
}
H2 ،#Score-Score {
حجم الخط: x-large ؛
خلفية اللون: أبيض.
}
#منطقة اللعبة {
الموقف: مطلق ؛
اليسار: 10 ٪ ؛
العرض: 80 ٪ ؛
الارتفاع: 99 ٪ ؛
}
Canvas#game-canvas {
خلفية اللون: أبيض.
العرض: 80 ٪ ؛
الارتفاع: 98 ٪ ؛
تعويم: اليسار.
}
#زر الزر ،#SCORE-AREA {
العرض: 10 ٪ ؛
الارتفاع: 100 ٪
تعويم: اليسار.
}
#-button-game-start ،#button-game-end ،#button-game-share ،#حدد مستوى اللعبة {
العرض: 100 ٪ ؛
الارتفاع: 10 ٪ ؛
حجم الخط: أكبر ؛
عرض اليمين الحدودي: 3px ؛
خلفية اللون: أبيض.
}
#حدد مستوى اللعبة {
العرض: 100 ٪ ؛
الارتفاع: 100 ٪
حجم الخط: x-large ؛
لون الحدود: رمادي.
}
الخطوة 3: اكتب رمز JS
Rusblock.JS
تدرج الأعضاء من قبل Rusblock Class:
بيانات:
ncurrentcomid: معرف مكون الإسقاط الحالي
Astate [21] [25]: صفيف يخزن حالة منطقة اللعبة
Currentcom: الجزء المتساقط حاليًا
NextCom: الجزء التالي
Ptindex: فهرس الجزء المتساقط حاليًا بالنسبة لمنطقة اللعبة
وظيفة:
NewNextCom (): إنشاء مكون جديد جديد
NextComtocurrentCom (): نقل البيانات من المكون التالي إلى المكون المتساقط حاليًا
Candown (): تحديد ما إذا كان المكون الحالي لا يزال بإمكانه السقوط
Cannew (): تحديد ما إذا كان يمكن إنشاء مكونات جديدة
اليسار (): ينتقل المكون الحالي إلى اليسار
يمين (): ينتقل المكون الحالي إلى اليمين
تدوير (): يدور المكون الحالي في اتجاه عقارب الساعة
Acceleratet (): المكون الحالي يتسارع إلى الأسفل
تختفي (): القضاء على الخط
CheckFail (): تحديد ما إذا كانت اللعبة تفشل
Invalidaterect (): قم بتحديث مساحة المكون الحالي
أكمل: تنزيل العرض التوضيحي