আমি কিভাবে একটি বিশুদ্ধ CSS পাজল গেম তৈরি করেছি

আমি সম্প্রতি শুধুমাত্র সিএসএস গেম তৈরির আনন্দ আবিষ্কার করেছি। এটি সর্বদা আকর্ষণীয় যে HTML এবং CSS একটি সম্পূর্ণ অনলাইন গেমের যুক্তি পরিচালনা করতে সক্ষম, তাই আমাকে এটি চেষ্টা করতে হয়েছিল! এই ধরনের গেমগুলি সাধারণত ol' চেকবক্স হ্যাকের উপর নির্ভর করে যেখানে আমরা একটি HTML ইনপুটের সাথে চেক করা/আনচেক করা অবস্থাকে একত্রিত করি :checked সিএসএস-এ ছদ্ম-শ্রেণী। আমরা সেই এক সংমিশ্রণে অনেক জাদু করতে পারি!

আসলে, আমি চেকবক্স ছাড়াই একটি সম্পূর্ণ গেম তৈরি করার জন্য নিজেকে চ্যালেঞ্জ করেছি। এটা সম্ভব হবে কিনা আমি নিশ্চিত ছিলাম না, কিন্তু এটা অবশ্যই, এবং আমি আপনাকে দেখাতে যাচ্ছি কিভাবে।

ধাঁধা খেলা ছাড়াও আমরা এই নিবন্ধে অধ্যয়ন করব, আমি তৈরি করেছি বিশুদ্ধ CSS গেমের সংগ্রহ, চেকবক্স হ্যাক ছাড়া তাদের অধিকাংশ. (এগুলিও উপলব্ধ কোডপেনে.)

আমরা শুরু করার আগে খেলতে চান?

আমি ব্যক্তিগতভাবে পূর্ণ স্ক্রীন মোডে গেম খেলতে পছন্দ করি, তবে আপনি এটি নীচে বা খেলতে পারেন এখানে এটি খুলুন.

কুল ডান? আমি জানি, এটি আপনার দেখা সেরা ধাঁধা খেলা নয়™ তবে এটি এমন কিছুর জন্য মোটেও খারাপ নয় যা শুধুমাত্র CSS এবং HTML এর কয়েকটি লাইন ব্যবহার করে। আপনি সহজেই গ্রিডের আকার সামঞ্জস্য করতে পারেন, অসুবিধা স্তর নিয়ন্ত্রণ করতে ঘরের সংখ্যা পরিবর্তন করতে পারেন এবং আপনি যা চান তা ব্যবহার করতে পারেন!

আমরা একসাথে সেই ডেমোটি রিমেক করতে যাচ্ছি, তারপর কিছু লাথির জন্য শেষে এটিতে একটু অতিরিক্ত ঝকঝকে রাখুন।

ড্র্যাগ অ্যান্ড ড্রপ কার্যকারিতা

যদিও CSS গ্রিডের সাথে ধাঁধাটির গঠন মোটামুটি সোজা, ধাঁধার টুকরো টেনে আনার ক্ষমতা একটু জটিল। এটি সম্পন্ন করার জন্য আমাকে ট্রানজিশন, হোভার ইফেক্ট এবং ভাইবোন নির্বাচকদের সমন্বয়ের উপর নির্ভর করতে হয়েছিল।

আপনি যদি সেই ডেমোতে খালি বাক্সের উপর কার্সার করেন, তাহলে ছবিটি এর ভিতরে চলে যায় এবং আপনি কার্সারটিকে বক্সের বাইরে সরিয়ে দিলেও সেখানেই থাকে। কৌশলটি হল একটি বড় স্থানান্তর সময়কাল এবং বিলম্ব যোগ করা — এত বড় যে ছবিটি তার প্রাথমিক অবস্থানে ফিরে আসতে অনেক সময় নেয়।

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) চিত্রের মতো একই এলাকা নেবে (সিএসএস গ্রিডকে ধন্যবাদ এবং 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 গ্রিড এবং ব্যাকগ্রাউন্ড ট্রিকসের উপর নির্ভর করতে যাচ্ছি।

এখানে আমাদের গ্রিড, সুবিধার জন্য Pug এ লেখা:

- 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;
}

আপনি দেখতে পাচ্ছেন, অভিনব কিছু নেই — আমরা একটি নির্দিষ্ট আকারের সাথে একটি গ্রিড তৈরি করেছি। আমাদের বাকি CSSটি ড্র্যাগ অ্যান্ড ড্রপ বৈশিষ্ট্যের জন্য প্রয়োজন, যার জন্য আমাদের বোর্ডের চারপাশে এলোমেলোভাবে টুকরোগুলি স্থাপন করতে হবে। আমি এর জন্য Sass-এ ফিরতে যাচ্ছি, আবার একটি ফাংশন দিয়ে সমস্ত ধাঁধার অংশ লুপ এবং স্টাইল করতে সক্ষম হওয়ার সুবিধার জন্য:

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)
   }
}

আপনি হয়তো লক্ষ্য করেছেন যে আমি Sass ব্যবহার করছি random() ফাংশন এভাবেই আমরা ধাঁধার অংশগুলির জন্য এলোমেলো অবস্থানগুলি পেতে পারি। মনে রাখবেন যে আমরা করব অক্ষম যে অবস্থান যখন উপর হোভার <a> উপাদান টেনে আনা এবং তার সংশ্লিষ্ট ড্রপ করার পর <b> গ্রিড ঘরের ভিতরে উপাদান।

z a:hover ~ b {
  transform: translate(0);
  transition: 0s;
}

সেই একই লুপে, আমি ধাঁধার প্রতিটি অংশের জন্য পটভূমি কনফিগারেশনও সংজ্ঞায়িত করছি। তাদের সকলেই যৌক্তিকভাবে পটভূমির মতো একই চিত্র ভাগ করবে এবং এর আকার পুরো গ্রিডের আকারের সমান হওয়া উচিত (এর সাথে সংজ্ঞায়িত --s পরিবর্তনশীল)। একই ব্যবহার করে background-image এবং কিছু গণিত, আমরা আপডেট করি background-position ইমেজ শুধুমাত্র একটি টুকরা দেখানোর জন্য.

এটাই! আমাদের CSS-শুধু ধাঁধা গেমটি প্রযুক্তিগতভাবে সম্পন্ন হয়েছে!

কিন্তু আমরা সবসময় ভালো করতে পারি, তাই না? আমি আপনাকে দেখিয়েছি কিভাবে ধাঁধা টুকরা আকার একটি গ্রিড করা অন্য নিবন্ধে। আসুন একই ধারণাটি গ্রহণ করি এবং এটি এখানে প্রয়োগ করি, আমরা কি করব?

ধাঁধা টুকরা আকার

এখানে আমাদের নতুন ধাঁধা খেলা. একই কার্যকারিতা কিন্তু আরো বাস্তবসম্মত আকার সঙ্গে!

এটি গ্রিডের আকারগুলির একটি দৃষ্টান্ত:

আপনি যদি ঘনিষ্ঠভাবে তাকান তবে আপনি লক্ষ্য করবেন যে আমাদের নয়টি ভিন্ন ধাঁধা-পিস আকার রয়েছে: চার কোণে, দ্য চার প্রান্ত, এবং অন্য সব কিছুর জন্য একটি.

আমি উল্লেখ করেছি অন্য নিবন্ধে আমি তৈরি করা ধাঁধার টুকরোগুলির গ্রিডটি একটু বেশি সহজবোধ্য:

আমরা একই কৌশল ব্যবহার করতে পারি যা বিভিন্ন আকার তৈরি করতে 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 রেপোতে নজর রাখুন.

মোড়ক উম্মচন

এবং CSS ism একটি প্রোগ্রামিং ভাষা নয়, তারা বলে. হা!

আমি এর দ্বারা কিছু #HotDrama ছড়ানোর চেষ্টা করছি না। আমি এটা বলছি কারণ আমরা কিছু সত্যই চতুর লজিক স্টাফ করেছি এবং পথ ধরে প্রচুর CSS বৈশিষ্ট্য এবং কৌশল কভার করেছি। আমরা CSS গ্রিড, ট্রানজিশন, মাস্কিং, গ্রেডিয়েন্ট, সিলেক্টর এবং ব্যাকগ্রাউন্ড প্রোপার্টি নিয়ে খেলেছি। আমরা আমাদের কোড সামঞ্জস্য করা সহজ করতে ব্যবহার করা কয়েকটি Sass কৌশল উল্লেখ না করা।

লক্ষ্য ছিল গেমটি তৈরি করা নয়, কিন্তু CSS অন্বেষণ করা এবং নতুন বৈশিষ্ট্য এবং কৌশলগুলি আবিষ্কার করা যা আপনি অন্যান্য প্রকল্পে ব্যবহার করতে পারেন। CSS-এ একটি অনলাইন গেম তৈরি করা একটি চ্যালেঞ্জ যা আপনাকে CSS বৈশিষ্ট্যগুলি বিশদভাবে অন্বেষণ করতে এবং সেগুলি কীভাবে ব্যবহার করতে হয় তা শিখতে বাধ্য করে৷ এছাড়াও, এটা অনেক মজার যে আমরা যখন সব কিছু বলা এবং সম্পন্ন করা হয় তখন আমরা খেলতে কিছু পাই।

সিএসএস একটি প্রোগ্রামিং ভাষা হোক বা না হোক, আমরা যে সবসময় উদ্ভাবনী জিনিস তৈরি এবং তৈরি করে শিখি তা পরিবর্তন করে না।