میں نے حال ہی میں صرف CSS گیمز بنانے کی خوشی دریافت کی۔ یہ ہمیشہ دلچسپ ہوتا ہے کہ کس طرح HTML اور CSS پورے آن لائن گیم کی منطق کو سنبھالنے کے قابل ہیں، لہذا مجھے اسے آزمانا پڑا! اس طرح کے گیمز عام طور پر چیک باکس ہیک پر انحصار کرتے ہیں جہاں ہم HTML ان پٹ کی چیک شدہ/غیر چیک شدہ حالت کو :checked سی ایس ایس میں سیوڈو کلاس۔ ہم اس ایک مجموعہ کے ساتھ بہت سے جادو کر سکتے ہیں!
درحقیقت، میں نے خود کو چیلنج کیا کہ چیک باکس کے بغیر ایک پورا گیم بناؤں۔ مجھے یقین نہیں تھا کہ یہ ممکن ہو گا، لیکن یہ یقینی طور پر ہے، اور میں آپ کو دکھانے جا رہا ہوں کہ کیسے۔
ہم اس مضمون میں مطالعہ کریں گے پہیلی کھیل کے علاوہ، میں نے بنایا ہے خالص CSS گیمز کا مجموعہ، ان میں سے اکثر چیک باکس ہیک کے بغیر۔ (وہ بھی دستیاب ہیں۔ CodePen پر.)
ہم شروع کرنے سے پہلے کھیلنا چاہتے ہیں؟
میں ذاتی طور پر فل سکرین موڈ میں گیم کھیلنے کو ترجیح دیتا ہوں، لیکن آپ اسے نیچے کھیل سکتے ہیں۔ اسے یہاں کھولو.
ٹھنڈا ہے نا؟ میں جانتا ہوں، یہ سب سے بہترین پہیلی گیم نہیں ہے جسے آپ نے کبھی دیکھا ہے لیکن یہ کسی ایسی چیز کے لیے بالکل بھی برا نہیں ہے جو صرف CSS اور HTML کی چند لائنوں کا استعمال کرتی ہے۔ آپ آسانی سے گرڈ کے سائز کو ایڈجسٹ کر سکتے ہیں، مشکل کی سطح کو کنٹرول کرنے کے لیے سیلز کی تعداد کو تبدیل کر سکتے ہیں، اور جو بھی تصویر آپ چاہیں استعمال کر سکتے ہیں!
ہم اس ڈیمو کو ایک ساتھ دوبارہ بنانے جا رہے ہیں، پھر کچھ کِکس کے لیے آخر میں اس میں تھوڑا سا اضافی چمک ڈالیں۔
ڈریگ اینڈ ڈراپ کی فعالیت
اگرچہ سی ایس ایس گرڈ کے ساتھ پہیلی کی ساخت کافی سیدھی ہے، لیکن پہیلی کے ٹکڑوں کو گھسیٹنے اور چھوڑنے کی صلاحیت قدرے مشکل ہے۔ مجھے اسے مکمل کرنے کے لیے ٹرانزیشنز، ہوور ایفیکٹس، اور بہن بھائی سلیکٹرز کے امتزاج پر انحصار کرنا پڑا۔
اگر آپ اس ڈیمو میں خالی باکس پر ہوور کرتے ہیں، تو تصویر اس کے اندر چلی جاتی ہے اور وہیں رہتی ہے چاہے آپ کرسر کو باکس سے باہر لے جائیں۔ چال یہ ہے کہ منتقلی کا ایک بڑا دورانیہ اور تاخیر شامل کی جائے — اتنی بڑی کہ تصویر کو اپنی ابتدائی پوزیشن پر واپس آنے میں کافی وقت لگے۔
img {
transform: translate(200%);
transition: 999s 999s; /* very slow move on mouseout */
}
.box:hover img {
transform: translate(0);
transition: 0s; /* instant move on hover */
}صرف کی وضاحت کرنا transition-delay کافی ہے، لیکن تاخیر اور دورانیہ دونوں پر بڑی قدروں کا استعمال کرنے سے یہ امکان کم ہو جاتا ہے کہ کوئی کھلاڑی تصویر کو پیچھے ہٹتا دیکھے۔ اگر آپ انتظار کریں۔ 999s + 999s - جو تقریباً 30 منٹ ہے - پھر آپ تصویر کو حرکت میں دیکھیں گے۔ لیکن آپ ایسا نہیں کریں گے، ٹھیک ہے؟ میرا مطلب ہے، کوئی بھی موڑ کے درمیان اتنا لمبا وقت نہیں لے گا جب تک کہ وہ کھیل سے دور نہ ہوں۔ لہذا، میں اسے دو ریاستوں کے درمیان سوئچ کرنے کے لیے ایک اچھی چال سمجھتا ہوں۔
کیا آپ نے دیکھا کہ تصویر کو منڈانے سے بھی تبدیلیاں آتی ہیں؟ اس کی وجہ یہ ہے کہ تصویر باکس عنصر کا حصہ ہے، جو ہمارے لیے اچھا نہیں ہے۔ ہم شامل کر کے اسے ٹھیک کر سکتے ہیں۔ pointer-events: none تصویر پر لیکن ہم اسے بعد میں نہیں گھسیٹ سکیں گے۔
اس کا مطلب ہے کہ ہمیں اندر ایک اور عنصر متعارف کرانا ہے۔ .box:
وہ اضافی div (ہم ایک کلاس استعمال کر رہے ہیں۔ .a) تصویر کے طور پر وہی علاقہ لے گا (CSS گرڈ کا شکریہ اور grid-area: 1 / 1) اور وہ عنصر ہوگا جو ہوور اثر کو متحرک کرتا ہے۔ اور یہ وہ جگہ ہے جہاں بہن بھائی سلیکٹر کھیل میں آتا ہے:
.a {
grid-area: 1 / 1;
}
img {
grid-area: 1 / 1;
transform: translate(200%);
transition: 999s 999s;
}
.a:hover + img {
transform: translate(0);
transition: 0s;
}پر منڈلا رہا ہے۔ .a عنصر تصویر کو منتقل کرتا ہے، اور چونکہ یہ باکس کے اندر تمام جگہ لے رہا ہے، ایسا لگتا ہے کہ ہم اس کے بجائے باکس پر منڈلا رہے ہیں! تصویر کو ہوور کرنا اب کوئی مسئلہ نہیں ہے!
آئیے اپنی تصویر کو باکس کے اندر گھسیٹیں اور چھوڑیں اور نتیجہ دیکھیں:
کیا تم نے وہ دیکھا؟ آپ پہلے تصویر کو پکڑیں اور اسے باکس میں منتقل کریں، کچھ بھی پسند نہیں۔ لیکن ایک بار جب آپ تصویر کو جاری کرتے ہیں تو آپ ہوور اثر کو متحرک کرتے ہیں جو تصویر کو حرکت دیتا ہے، اور پھر ہم ڈریگ اینڈ ڈراپ فیچر کی نقل کرتے ہیں۔ اگر آپ ماؤس کو باکس کے باہر چھوڑ دیتے ہیں، تو کچھ نہیں ہوتا۔
ہمم، آپ کا تخروپن کامل نہیں ہے کیونکہ ہم باکس کو ہوور بھی کر سکتے ہیں اور وہی اثر حاصل کر سکتے ہیں۔
سچ ہے اور ہم اسے درست کریں گے۔ ہمیں ہوور اثر کو غیر فعال کرنے کی ضرورت ہے اور اسے صرف اس صورت میں اجازت دینے کی ضرورت ہے جب ہم باکس کے اندر تصویر جاری کریں۔ ہم اپنے طول و عرض کے ساتھ کھیلیں گے۔ .a ایسا کرنے کے لئے عنصر.
اب، باکس کو منڈانے سے کچھ نہیں ہوتا۔ لیکن اگر آپ تصویر کو گھسیٹنا شروع کر دیتے ہیں تو .a عنصر ظاہر ہوتا ہے، اور باکس کے اندر جاری ہونے کے بعد، ہم ہوور اثر کو متحرک کر سکتے ہیں اور تصویر کو منتقل کر سکتے ہیں۔
آئیے کوڈ کو الگ کریں:
.a {
width: 0%;
transition: 0s .2s; /* add a small delay to make sure we catch the hover effect */
}
.box:active .a { /* on :active increase the width */
width: 100%;
transition: 0s; /* instant change */
}
img {
transform: translate(200%);
transition: 999s 999s;
}
.a:hover + img {
transform: translate(0);
transition: 0s;
}تصویر پر کلک کرنے سے فائر ہوجاتا ہے۔ :active سیوڈو کلاس جو بناتا ہے۔ .a عنصر پوری چوڑائی (یہ ابتدائی طور پر برابر ہے۔ 0)۔ فعال حالت برقرار رہے گی۔ فعال جب تک ہم تصویر جاری نہیں کرتے۔ اگر ہم باکس کے اندر تصویر جاری کرتے ہیں، .a عنصر واپس جاتا ہے width: 0، لیکن ہم ہوور اثر کو اس کے ہونے سے پہلے ٹرگر کریں گے اور تصویر باکس کے اندر گر جائے گی! اگر آپ اسے باکس کے باہر چھوڑ دیتے ہیں تو کچھ نہیں ہوتا۔
ایک چھوٹا سا نرالا ہے: خالی باکس پر کلک کرنے سے تصویر بھی حرکت میں آتی ہے اور ہماری خصوصیت ٹوٹ جاتی ہے۔ فی الحال، :active سے منسلک ہے۔ .box عنصر، تو اس پر یا اس کے بچوں میں سے کسی پر کلک کرنے سے یہ ایکٹیویٹ ہو جائے گا۔ اور ایسا کرنے سے، ہم دکھاتے ہیں۔ .a عنصر اور ہوور اثر کو متحرک کرنا۔
ہم اس کے ساتھ کھیل کر اسے ٹھیک کر سکتے ہیں۔ pointer-events. یہ ہمیں کے ساتھ کسی بھی تعامل کو غیر فعال کرنے کی اجازت دیتا ہے۔ .box بچوں کے عناصر کے ساتھ تعامل کو برقرار رکھتے ہوئے
.box {
pointer-events: none;
}
.box * {
pointer-events: initial;
}ابھی ہماری ڈریگ اینڈ ڈراپ فیچر بہترین ہے۔ جب تک آپ اسے ہیک کرنے کا طریقہ تلاش نہ کر لیں، تصویر کو منتقل کرنے کا واحد طریقہ اسے گھسیٹ کر باکس کے اندر چھوڑنا ہے۔
پہیلی گرڈ کی تعمیر
ہم نے ڈریگ اینڈ ڈراپ فیچر کے لیے جو کچھ کیا اس کے مقابلے میں پہیلی کو اکٹھا کرنا آسان محسوس کرنے والا ہے۔ ہم پہیلی بنانے کے لیے CSS گرڈ اور بیک گراؤنڈ ٹرکس پر انحصار کرنے جا رہے ہیں۔
سہولت کے لیے پگ میں لکھا ہوا ہمارا گرڈ یہ ہے:
- let n = 4; /* number of columns/rows */
- let image = "https://picsum.photos/id/1015/800/800";
g(style=`--i:url(${image})`)
- for(let i = 0; i < n*n; i++)
z
a
b(draggable="true") کوڈ عجیب لگ سکتا ہے لیکن یہ سادہ HTML میں مرتب ہوتا ہے:
<g style="--i: url(https://picsum.photos/id/1015/800/800)">
<z>
<a></a>
<b draggable="true"></b>
</z>
<z>
<a></a>
<b draggable="true"></b>
</z>
<z>
<a></a>
<b draggable="true"></b>
</z>
<!-- etc. -->
</g>میں شرط لگاتا ہوں کہ آپ سوچ رہے ہیں کہ ان ٹیگز کے ساتھ کیا ہو رہا ہے۔ ان عناصر میں سے کسی کا بھی کوئی خاص معنی نہیں ہے — مجھے صرف یہ معلوم ہوتا ہے کہ کوڈ کا استعمال کرتے ہوئے لکھنا بہت آسان ہے۔ <z> کے ایک گروپ کے مقابلے میں <div class="z"> یا جو کچھ بھی
اس طرح میں نے ان کا نقشہ تیار کیا ہے:
<g>ہمارا گرڈ کنٹینر ہے جس پر مشتمل ہے۔N*N<z>عناصر.<z>ہماری گرڈ اشیاء کی نمائندگی کرتا ہے۔ کا کردار ادا کرتا ہے۔.boxعنصر جو ہم نے پچھلے حصے میں دیکھا تھا۔<a>ہوور اثر کو متحرک کرتا ہے۔<b>ہماری تصویر کے ایک حصے کی نمائندگی کرتا ہے۔ ہم لاگو کرتے ہیںdraggableاس پر انتساب کیونکہ اسے ڈیفالٹ کے ذریعے گھسیٹا نہیں جا سکتا۔
ٹھیک ہے، آئیے اپنے گرڈ کنٹینر کو رجسٹر کرتے ہیں۔ <g>. یہ CSS کے بجائے Sass میں ہے:
$n : 4; /* number of columns/rows */
g {
--s: 300px; /* size of the puzzle */
display: grid;
max-width: var(--s);
border: 1px solid;
margin: auto;
grid-template-columns: repeat($n, 1fr);
}ہم دراصل اپنے گرڈ بچوں کو بنانے جا رہے ہیں۔ <z> عناصر - گرڈ بھی اور دونوں ہیں۔ <a> اور <b> اسی گرڈ کے علاقے میں:
z {
aspect-ratio: 1;
display: grid;
outline: 1px dashed;
}
a {
grid-area: 1/1;
}
b {
grid-area: 1/1;
}جیسا کہ آپ دیکھ سکتے ہیں، کچھ بھی پسند نہیں ہے — ہم نے ایک مخصوص سائز کے ساتھ ایک گرڈ بنایا ہے۔ باقی سی ایس ایس جس کی ہمیں ضرورت ہے وہ ڈریگ اینڈ ڈراپ فیچر کے لیے ہے، جس کے لیے ہمیں بورڈ کے ارد گرد تصادفی طور پر ٹکڑوں کو رکھنے کی ضرورت ہے۔ میں اس کے لیے ایک بار پھر ساس کا رخ کرنے جا رہا ہوں، اس سہولت کے لیے کہ ایک فنکشن کے ساتھ تمام پہیلی کے ٹکڑوں کو لوپ کرنے اور اسٹائل کرنے کے قابل ہونے کے لیے:
b {
background: var(--i) 0/var(--s) var(--s);
}
@for $i from 1 to ($n * $n + 1) {
$r: (random(180));
$x: (($i - 1)%$n);
$y: floor(($i - 0.001) / $n);
z:nth-of-type(#{$i}) b{
background-position: ($x / ($n - 1)) * 100% ($y / ($n - 1)) * 100%;
transform:
translate((($n - 1) / 2 - $x) * 100%, (($n - 1)/2 - $y) * 100%)
rotate($r * 1deg)
translate((random(100)*1% + ($n - 1) * 100%))
rotate((random(20) - 10 - $r) * 1deg)
}
}آپ نے محسوس کیا ہوگا کہ میں ساس استعمال کر رہا ہوں۔ random() فنکشن اس طرح ہم پہیلی کے ٹکڑوں کے لیے بے ترتیب پوزیشن حاصل کرتے ہیں۔ یاد رکھیں کہ ہم کریں گے۔ غیر فعال اس پوزیشن کے اوپر منڈلاتے وقت <a> عنصر کو گھسیٹنے اور اس کے متعلقہ کو چھوڑنے کے بعد <b> گرڈ سیل کے اندر عنصر۔
z a:hover ~ b {
transform: translate(0);
transition: 0s;
}اسی لوپ میں، میں پہیلی کے ہر ٹکڑے کے لیے بیک گراؤنڈ کنفیگریشن کی بھی وضاحت کر رہا ہوں۔ یہ سب منطقی طور پر بیک گراؤنڈ کی طرح ایک ہی تصویر کا اشتراک کریں گے، اور اس کا سائز پورے گرڈ کے سائز کے برابر ہونا چاہیے (اس کی وضاحت --s متغیر)۔ اسی کا استعمال کرتے ہوئے background-image اور کچھ ریاضی، ہم اپ ڈیٹ کرتے ہیں background-position تصویر کا صرف ایک ٹکڑا دکھانے کے لیے۔
یہی ہے! ہماری صرف سی ایس ایس پہیلی گیم تکنیکی طور پر مکمل ہو چکی ہے!
لیکن ہم ہمیشہ بہتر کر سکتے ہیں، ٹھیک ہے؟ میں نے آپ کو دکھایا پہیلی کے ٹکڑے کی شکلوں کا گرڈ کیسے بنایا جائے۔ ایک اور مضمون میں. آئیے اسی خیال کو لیں اور اسے یہاں لاگو کریں، کیا ہم؟
پہیلی کے ٹکڑے کی شکلیں۔
یہ ہمارا نیا پہیلی کھیل ہے۔ ایک جیسی فعالیت لیکن زیادہ حقیقت پسندانہ شکلوں کے ساتھ!
یہ گرڈ پر شکلوں کی ایک مثال ہے:
اگر آپ قریب سے دیکھیں گے تو آپ دیکھیں گے کہ ہمارے پاس نو مختلف پزل پیس شکلیں ہیں۔ چار کونے، چار کنارے، اور باقی سب کے لیے ایک.
پہیلی کے ٹکڑوں کا گرڈ جو میں نے دوسرے مضمون میں بنایا ہے جس کا میں نے حوالہ دیا ہے کچھ زیادہ سیدھا ہے:
ہم وہی تکنیک استعمال کر سکتے ہیں جو مختلف شکلیں بنانے کے لیے CSS ماسک اور گریڈیئنٹس کو یکجا کرتی ہے۔ اگر آپ ناواقف ہیں۔ mask اور میلان، میں جانچ پڑتال کی انتہائی سفارش کرتا ہوں۔ وہ آسان کیس اگلے حصے میں جانے سے پہلے تکنیک کو بہتر طور پر سمجھنے کے لیے۔
سب سے پہلے، ہمیں عناصر کے ہر گروپ کو نشانہ بنانے کے لیے مخصوص سلیکٹرز کا استعمال کرنے کی ضرورت ہے جو ایک ہی شکل کا حامل ہو۔ ہمارے نو گروپس ہیں، اس لیے ہم آٹھ سلیکٹرز استعمال کریں گے، نیز ایک ڈیفالٹ سلیکٹر جو ان سب کو منتخب کرتا ہے۔
z /* 0 */
z:first-child /* 1 */
z:nth-child(-n + 4):not(:first-child) /* 2 */
z:nth-child(5) /* 3 */
z:nth-child(5n + 1):not(:first-child):not(:nth-last-child(5)) /* 4 */
z:nth-last-child(5) /* 5 */
z:nth-child(5n):not(:nth-child(5)):not(:last-child) /* 6 */
z:last-child /* 7 */
z:nth-last-child(-n + 4):not(:last-child) /* 8 */یہ ایک اعداد و شمار ہے جو دکھاتا ہے کہ یہ ہمارے گرڈ پر کیسے نقشہ بناتا ہے:
اب شکلوں سے نمٹتے ہیں۔ آئیے صرف ایک یا دو شکلیں سیکھنے پر توجہ مرکوز کریں کیونکہ وہ سب ایک ہی تکنیک کا استعمال کرتے ہیں — اور اس طرح، سیکھتے رہنے کے لیے آپ کے پاس کچھ ہوم ورک ہے!
گرڈ کے بیچ میں پہیلی کے ٹکڑوں کے لیے، 0:
mask:
radial-gradient(var(--r) at calc(50% - var(--r) / 2) 0, #0000 98%, #000) var(--r)
0 / 100% var(--r) no-repeat,
radial-gradient(var(--r) at calc(100% - var(--r)) calc(50% - var(--r) / 2), #0000 98%, #000)
var(--r) 50% / 100% calc(100% - 2 * var(--r)) no-repeat,
radial-gradient(var(--r) at var(--r) calc(50% - var(--r) / 2), #000 98%, #0000),
radial-gradient(var(--r) at calc(50% + var(--r) / 2) calc(100% - var(--r)), #000 98%, #0000);کوڈ پیچیدہ نظر آسکتا ہے، لیکن آئیے ایک وقت میں ایک گریڈینٹ پر توجہ مرکوز کرتے ہیں کہ کیا ہو رہا ہے:
دو گراڈینٹ دو دائرے بناتے ہیں (ڈیمو میں سبز اور جامنی رنگ کا نشان لگایا گیا ہے)، اور دو دوسرے گراڈینٹس وہ سلاٹ بناتے ہیں جن سے دوسرے ٹکڑے جڑتے ہیں (ایک نشان زدہ نیلا زیادہ تر شکل کو بھرتا ہے جبکہ سرخ نشان والا اوپر والے حصے کو بھرتا ہے)۔ ایک CSS متغیر، --r, سرکلر شکلوں کا رداس سیٹ کرتا ہے۔
مرکز میں پہیلی کے ٹکڑوں کی شکل (نشان زد 0 مثال میں) بنانا سب سے مشکل ہے کیونکہ اس میں چار میلان استعمال ہوتے ہیں اور چار گھماؤ ہوتے ہیں۔ باقی تمام ٹکڑے کم میلان کو جگاتے ہیں۔
مثال کے طور پر، پہیلی کے اوپری کنارے کے ساتھ پہیلی کے ٹکڑے (نشان شدہ 2 مثال میں) چار کے بجائے تین میلان استعمال کرتا ہے:
mask:
radial-gradient(var(--r) at calc(100% - var(--r)) calc(50% + var(--r) / 2), #0000 98%, #000) var(--r) calc(-1 * var(--r)) no-repeat,
radial-gradient(var(--r) at var(--r) calc(50% - var(--r) / 2), #000 98%, #0000),
radial-gradient(var(--r) at calc(50% + var(--r) / 2) calc(100% - var(--r)), #000 98%, #0000);ہم نے پہلے (اوپر) گریڈینٹ کو ہٹا دیا اور دوسرے گریڈینٹ کی قدروں کو ایڈجسٹ کیا تاکہ یہ پیچھے رہ جانے والی جگہ کا احاطہ کرے۔ اگر آپ دو مثالوں کا موازنہ کریں گے تو آپ کوڈ میں کوئی بڑا فرق محسوس نہیں کریں گے۔ واضح رہے کہ ہم ایک ہی شکل بنانے کے لیے مختلف پس منظر کی ترتیب تلاش کر سکتے ہیں۔ اگر آپ گریڈیئنٹس کے ساتھ کھیلنا شروع کر دیتے ہیں تو آپ یقینی طور پر اس سے مختلف ہوں گے جو میں نے کیا تھا۔ آپ کچھ ایسا بھی لکھ سکتے ہیں جو زیادہ جامع ہو — اگر ایسا ہے تو، تبصروں میں اس کا اشتراک کریں!
شکلیں بنانے کے علاوہ، آپ یہ بھی پائیں گے کہ میں نیچے کی طرح عناصر کی چوڑائی اور/یا اونچائی بڑھا رہا ہوں:
height: calc(100% + var(--r));
width: calc(100% + var(--r));پہیلی کے ٹکڑوں کو جڑنے کے لیے اپنے گرڈ سیل کو اوور فلو کرنے کی ضرورت ہے۔
فائنل ڈیمو
یہاں ایک بار پھر مکمل ڈیمو ہے۔ اگر آپ اس کا موازنہ پہلے ورژن سے کریں گے تو آپ کو گرڈ بنانے کے لیے ایک ہی کوڈ کا ڈھانچہ اور ڈریگ اینڈ ڈراپ فیچر کے علاوہ شکلیں بنانے کے لیے کوڈ نظر آئے گا۔
ممکنہ اضافہ
مضمون یہاں ختم ہوتا ہے لیکن ہم مزید خصوصیات کے ساتھ اپنی پہیلی کو بڑھاتے رہ سکتے ہیں! اے اے ٹائمر کے بارے میں کیا خیال ہے؟ یا جب کھلاڑی پہیلی کو ختم کرتا ہے تو شاید کسی قسم کی مبارکباد؟
میں مستقبل کے ورژن میں ان تمام خصوصیات پر غور کر سکتا ہوں، لہذا میرے GitHub ریپو پر نظر رکھیں.
اپ ریپنگ
اور سی ایس ایس ایک پروگرامنگ زبان نہیں ہے۔، وہ کہتے ہیں. ہا!
میں اس سے کچھ #HotDrama بھڑکانے کی کوشش نہیں کر رہا ہوں۔ میں یہ اس لیے کہتا ہوں کہ ہم نے کچھ واقعی مشکل منطقی چیزیں کیں اور راستے میں بہت سی سی ایس ایس خصوصیات اور تکنیکوں کا احاطہ کیا۔ ہم نے CSS گرڈ، ٹرانزیشنز، ماسکنگ، گریڈیئنٹس، سلیکٹرز اور بیک گراؤنڈ پراپرٹیز کے ساتھ کھیلا۔ کچھ ساس چالوں کا ذکر نہ کرنا جو ہم اپنے کوڈ کو ایڈجسٹ کرنے میں آسان بنانے کے لیے استعمال کرتے تھے۔
مقصد گیم بنانا نہیں تھا بلکہ CSS کو دریافت کرنا اور نئی خصوصیات اور چالیں دریافت کرنا تھا جنہیں آپ دوسرے پروجیکٹس میں استعمال کر سکتے ہیں۔ CSS میں آن لائن گیم بنانا ایک چیلنج ہے جو آپ کو CSS کی خصوصیات کو بڑی تفصیل سے دریافت کرنے اور انہیں استعمال کرنے کا طریقہ سیکھنے پر مجبور کرتا ہے۔ اس کے علاوہ، یہ بہت مزے کی بات ہے کہ جب سب کچھ کہا جاتا ہے اور کیا جاتا ہے تو ہمیں کھیلنے کے لیے کچھ ملتا ہے۔
چاہے CSS ایک پروگرامنگ لینگویج ہے یا نہیں، اس حقیقت کو تبدیل نہیں کرتا کہ ہم ہمیشہ جدید چیزیں بنا کر اور تخلیق کر کے سیکھتے ہیں۔
