W3 Games-এর জন্য গেম বানান ও প্রকাশ করুন

১এক নজরে

W3 Games-এ গেম মানে একটা স্ট্যাটিক HTML5 গেম: HTML, JavaScript (বা WebAssembly), CSS, ছবি, শব্দ ইত্যাদি ফাইল, যা ব্রাউজারে চলে। প্ল্যাটফর্ম আপনার ZIP নিরাপদে রাখে, রিভিউয়ের পর একটা আলাদা ফ্রেমে চালায় এবং প্লে গণনা, লিডারবোর্ড, রিভিউ-রেটিং ও বিজ্ঞাপনের ব্যবস্থা নিজেই করে।

২অ্যাকাউন্ট ও অনুমোদন

1. ডেভেলপার রেজিস্ট্রেশন ফর্মে নিজের ও স্টুডিওর তথ্য দিন। পাসওয়ার্ড কমপক্ষে ১০ অক্ষর, অক্ষর ও সংখ্যা মিশিয়ে। শর্তে নিশ্চিত করতে হবে যে আপনি যে গেম আপলোড করবেন তার অধিকার আপনার আছে।
2. আবেদন জমা হলে আপনি লগইন করতে পারবেন, কিন্তু গেম বানানো ও আপলোড বন্ধ থাকবে যতক্ষণ না অ্যাডমিন আপনার প্রোফাইল অনুমোদন করেন।
3. অনুমোদনের পর "Developer portal" খুলে যাবে: ড্যাশবোর্ড, My games, Create game ও Analytics। আবেদন প্রত্যাখ্যাত হলে কারণসহ আপনার স্ট্যাটাস পেজে দেখাবে।

৩গেমের ফাইল ও ZIP

ZIP-এর কাঠামো

আপনার গেমের সব ফাইল একটা ZIP-এ দিন। প্রবেশ-ফাইল (entry file) হলো যে HTML ফাইলটা গেম খোলে, সাধারণত index.html। এটা ZIP-এর একদম উপরের স্তরে রাখুন; একটা ফোল্ডারের ভেতরে রাখলে আপলোড ফর্মে সেই পথ লিখতে হবে (যেমন build/index.html)।

my-game.zip
 ├─ index.html        ← entry file
 ├─ game.js
 ├─ style.css
 ├─ guide.html        ← ঐচ্ছিক ইউজার গাইড
 └─ assets/
     ├─ sprites.png
     └─ music.mp3

HTML-এর ভেতরে সব ফাইল সম্পর্কিত (relative) পথে লিখুন: assets/sprites.png, ./game.js। /assets/... (স্ল্যাশ দিয়ে শুরু) লিখবেন না, কারণ গেমটা সাইটের একটা উপ-পথ থেকে চলে।

সীমা (বর্তমান মান)

• ZIP সর্বোচ্চ 50 MB।
• ZIP-এর ভেতরে সর্বোচ্চ 2,000টি ফাইল।
• খোলার পর মোট সাইজ সর্বোচ্চ 100 MB।
• ভার্সন নম্বর 1.0.0 ধরনের হতে হবে (1.2.0-beta.1-ও চলে)। একই গেমে একই ভার্সন দুবার দেওয়া যায় না।
• প্রবেশ-ফাইলের নামে শুধু ইংরেজি অক্ষর, সংখ্যা, . _ / - চলে এবং শেষে .html বা .htm থাকতে হবে।

যা ZIP-এ থাকলে আপলোড বাতিল হয়

• সার্ভার-সাইড বা চালানোর মতো ফাইল: .php, .php3, .php4, .php5, .php7, .phtml, .phar, .cgi, .pl, .py, .sh, .exe, .dll, .so, .bat, .cmd।
• .htaccess, .user.ini, web.config।
• পথে .. বা পুরো পথ (/etc/.., C:\...), symbolic link, একই নামের দুই ফাইল।
• সীমার বেশি ফাইল বা সাইজ।

৪Sandbox ও নিরাপত্তা

প্লেয়ারের নিরাপত্তার জন্য আপনার গেম পেজের ভেতরের একটা sandboxed iframe-এ চলে (sandbox="allow-scripts allow-pointer-lock") এবং আপনার HTML ফাইলের সাথে একটা কড়া Content-Security-Policy পাঠানো হয়। এর মানে গেমটা এমন একটা "অচেনা উৎস" থেকে চলে যার কাছে সাইটের কোনো তথ্যে প্রবেশাধিকার নেই।

ফাইলের সাথে যে হেডার যায়

Content-Security-Policy (শুধু HTML ফাইলে):
  default-src 'self' data: blob:;
  script-src 'self' 'unsafe-inline' 'unsafe-eval' blob:;
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: blob:;  media-src 'self' data: blob:;
  font-src 'self' data:;       connect-src 'self' data: blob:;
  object-src 'none'; base-uri 'none'; form-action 'none';
  sandbox allow-scripts allow-pointer-lock

৫স্কোর ও লিডারবোর্ড

গেম নিজে সার্ভারে কিছু পাঠায় না। গেম পেজকে postMessage দিয়ে স্কোর জানায়; পেজ সেটা প্ল্যাটফর্মের API-তে জমা দেয়। আপনাকে শুধু একটা বার্তা পাঠাতে হবে, যখন একটা রান শেষ হয়:

window.parent.postMessage(
    { type: 'W3_GAME_SCORE', score: 1250, mode: 'classic' },
    '*'
);

স্কোর কীভাবে লিডারবোর্ডে যায়

1. স্কোর জমা হলে সেটা "পেন্ডিং" থাকে। ক্লায়েন্টের পাঠানো সংখ্যা কখনো সরাসরি বিশ্বাস করা হয় না।
2. অ্যাডমিন যাচাই করে "verified" করলে তবেই গেম পেজের লিডারবোর্ডে আসে।
3. লিডারবোর্ড বড় স্কোর আগে সাজায়। প্রতি প্লেয়ারের (লগইন না থাকলে প্রতি সেশনের) শুধু সেরা স্কোর দেখায়।

ভালো স্কোর ডিজাইনের টিপস

• বড় = ভালো হতে হবে। সময়-ভিত্তিক গেমে (কম সময় ভালো) স্কোর বানান এভাবে: Math.max(0, 600000 - timeInMs)।
• রান শেষে একবার পাঠান, প্রতি সেকেন্ডে নয়। প্ল্যাটফর্ম প্রতি আইপি থেকে মিনিটে প্রায় ১০টা স্কোর নেয়, বেশি পাঠালে বাকিগুলো বাদ যায়।
• স্কোর শুধু তখনই নেওয়া হয় যখন প্লেয়ারের সেশন সচল (গেম পেজ প্রতি 30 সেকেন্ডে নিজে নিজে সংকেত পাঠায়, আপনাকে কিছু করতে হয় না)।
• সহজে ঠকানো যায় এমন স্কোর (যেমন শুধু ক্লিক গণনা) রাখলে অ্যাডমিন বেশি স্কোর বাতিল করবেন। যতটা পারেন গেমের ভেতরের যুক্তি দিয়ে স্কোর হিসাব করুন।
• গেম আলাদা করে খুললে (লোকাল টেস্টে) window.parent === window হয়। তখন বার্তা পাঠানো বন্ধ রাখুন, স্টার্টার কিটের submitScore() সেটা নিজে সামলায়।

৬প্লে ট্র্যাকিং ও অ্যানালিটিক্স

এর জন্য আপনার গেমে কোনো কোড লাগে না। প্ল্যাটফর্ম নিজে গণনা করে:

• গেম পেজ খুললে একটা প্লে গোনা হয়।
• পেজ বন্ধ বা ছাড়লে সেশন সম্পন্ন হয় এবং খেলার সময় যোগ হয়।
• স্কোর জমার সংখ্যাও দৈনিক হিসাবে থাকে।

"Developer portal" → Analytics ও আপনার গেমের পেজে মোট প্লে, গত ৩০ দিনের দৈনিক হিসাব, গড় রেটিং ও রিভিউ সংখ্যা দেখতে পাবেন। প্লেয়াররা গেম পেজে ১–৫ স্টার ও মন্তব্য দেয়; অ্যাডমিন অনুমোদন করলে তা প্রকাশ হয়।

৭ইন-গেম বিজ্ঞাপন

গেমের ভেতরে যে বিজ্ঞাপন দেখান (রাস্তার পাশের বিলবোর্ড, গাড়ির গায়ের ব্যানার, লোডিং স্ক্রিনের স্পনসর ইত্যাদি) তা কোডে বসাবেন না। "Developer portal" → আপনার গেম → In-game ads থেকে বিজ্ঞাপন যোগ, বদল, বন্ধ বা মুছতে পারবেন; অ্যাডমিনও পারেন। নতুন ভার্সন আপলোড না করেই গেম পরেরবার লোড হলে বদল দেখাবে।

আপনার গেম বিজ্ঞাপনের তালিকা এই সম্পর্কিত ঠিকানা থেকে পড়ে:

const response = await fetch('w3/sponsors.json', { cache: 'no-store' });
const data = await response.json();
// data.sponsors : চালু বিলবোর্ডের তালিকা (ক্রম অনুযায়ী)
// data.truck    : একটা বিশেষ ব্যানার (বা null)

{
  "sponsors": [
    { "name": "Fresh Tyres", "tagline": "Grip in the rain",
      "background": "#112233", "color": "#ffffff",
      "logo": "https://.../games/my-game/content/w3/sponsor-logo/12",
      "link": "https://example.com" }
  ],
  "truck": null
}

• তালিকা খালি থাকলে কোনো বিজ্ঞাপন দেখাবেন না; আর fetch ব্যর্থ হলে (লোকাল টেস্টে) কোনো সমস্যা ছাড়াই চালিয়ে যান।
• লোগো ছবি লোড করার সময় আগে image.crossOrigin = 'anonymous' দিন, তারপর image.src। নইলে ছবি canvas বা WebGL টেক্সচারে বসাতে গেলে sandbox-এ ত্রুটি হয়।
• প্রতিটি বিজ্ঞাপনে নাম (৮০ অক্ষর), ট্যাগলাইন (১২০ অক্ষর), বোর্ডের ও লেখার রং, লোগো (PNG, JPG, WebP; সর্বোচ্চ 2 MB), লিংক ও ক্রম থাকে।

৮ইউজার গাইড

প্লেয়ারদের জন্য গেমের একটা গাইড থাকলে গেম পেজে "User guide" বাটন আসে। দুইভাবে দিতে পারেন (দুটোই একসাথেও চলে):

1. লেখা: গেমের ফর্মে "How to play / user guide" ঘরে লিখুন (সর্বোচ্চ ৮,০০০ অক্ষর)। ফাঁকা লাইন দিয়ে অনুচ্ছেদ ভাগ করুন, আর # শিরোনাম লিখলে সেটা উপশিরোনাম হয়। যেকোনো সময় এডিট করে বদলানো যায়।
2. guide.html ফাইল: ZIP-এ প্রবেশ-ফাইলের পাশে একটা guide.html রাখলে সেটা গাইড পেজে দেখানো হয় (চাইলে নিজের ডিজাইনে)। এটা বদলাতে নতুন ভার্সন আপলোড করতে হয়। পেজটা ?embed=1 সহ একটা ফ্রেমে খোলে, তাই চাইলে সেই অবস্থায় নিজের শিরোনাম লুকাতে পারেন।

গাইডে লিখুন: গেমের লক্ষ্য, নিয়ন্ত্রণ (কিবোর্ড ও ফোন), স্কোর কীভাবে হয়, কিছু টিপস। স্টার্টার কিটে একটা নমুনা guide.html আছে।

৯গেমের তথ্য (Create game ফর্ম)

১০ভার্সন ও রিভিউ প্রক্রিয়া

• গেম প্রথমে Draft থাকে। প্রথম ZIP আপলোড করলে সেটা রিভিউয়ের লাইনে যায়।
• অ্যাডমিন ভার্সনটা অনুমোদন বা প্রত্যাখ্যান করেন। প্রত্যাখ্যান করলে কারণ ও মন্তব্য আপনার গেমের পেজে "Review note" হিসেবে দেখায়। ঠিক করে নতুন ভার্সন নম্বরে আবার আপলোড দিন।
• অনুমোদিত ভার্সন অ্যাডমিন প্রকাশ করলে গেম লাইভ হয়। পরের ভার্সন প্রকাশ হলে আগেরটা আর চালু থাকে না, কিন্তু রেকর্ডে থাকে।
• অনুমোদিত বা প্রকাশিত ভার্সন মোছা যায় না; অনুমোদনের অপেক্ষায় থাকা বা প্রত্যাখ্যাত ভার্সন মোছা যায়।
• লাইভ গেমের তথ্য বদলালে (নাম, বিবরণ, ছবি, ক্যাটাগরি ইত্যাদি) নতুন তথ্য অ্যাডমিনের অনুমোদনের অপেক্ষায় থাকে; ততক্ষণ পাবলিক পেজে আগেরটাই দেখায়। ড্রাফট গেমের তথ্য সাথে সাথে বদলায়।
• লাইভ গেম আপনি মুছতে পারবেন না; সরাতে অ্যাডমিনকে বলতে হবে। অ্যাডমিন নীতি লঙ্ঘনের কারণে গেম সাসপেন্ডও করতে পারেন, তখন কারণ আপনার পেজে দেখায়।

রিভিউ-এ যা দেখা হয়

• গেমটা sandbox-এ ঠিকভাবে চলে কি না (লোড হয়, ক্র্যাশ নেই, বাইরের সংযোগ নেই)।
• বিষয়বস্তু আপনার দেওয়া বয়সসীমার সাথে মেলে কি না; আপত্তিকর, বিপজ্জনক বা বিভ্রান্তিকর কিছু নেই।
• ছবি, শব্দ, মডেল, ফন্টের জন্য আপনার অনুমতি বা উপযুক্ত লাইসেন্স আছে এবং ক্রেডিট দেওয়া হয়েছে।
• তথ্য ও থাম্বনেইল গেমটাকে ঠিকভাবে বোঝায়।

১১ডিজাইন ও পারফরম্যান্স

• সব ডিভাইসে চলবে: প্লেয়ারদের বড় অংশ ফোনে খেলে। <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> দিন, স্ক্রিনের মাপ বদলালে (resize) গেম মানিয়ে নিক, আর কিবোর্ড ও টাচ দুটোই রাখুন। শুধু কিবোর্ডে চলা গেম ফোনে অকেজো।
• তীক্ষ্ণ ক্যানভাস: devicePixelRatio ধরে ক্যানভাসের আসল পিক্সেল সাইজ সেট করুন (স্টার্টার কিটে আছে)।
• শব্দ: ব্রাউজার ব্যবহারকারীর প্রথম ক্লিক/ট্যাপের আগে শব্দ চালায় না। "Start" বোতামে শব্দ চালু করুন। মিউট বোতাম রাখুন।
• লোডিং: বড় গেমে প্রগ্রেস বার দেখান। ছবি স্প্রাইট-শিটে, শব্দ মোবাইল-বান্ধব সাইজে, মডেল ও টেক্সচার ছোট করে দিন। সব ফাইল মিলে যত ছোট, প্লেয়ার তত দ্রুত খেলা শুরু করে।
• ফোকাস: গেম শুরুর আগে প্লেয়ারকে একবার ক্লিক করতে দিন (Start বোতাম), যাতে কিবোর্ড ইনপুট গেমে আসে। পেজ স্ক্রল ঠেকাতে event.preventDefault() ব্যবহার করুন (Space, তীর চিহ্ন)।
• বিরতি: ট্যাব আড়ালে গেলে (visibilitychange) গেম থামান বা requestAnimationFrame-এর সময়-ব্যবধান সীমিত করুন।
• মেমরি: কম-দামি ফোনে চলার জন্য টেক্সচার ও অডিও বাফার মোট কয়েক শ MB-এর নিচে রাখুন; প্রয়োজন শেষে মুছুন।
• ভাষা: ইংরেজি ও বাংলা দুটোই জানা প্লেয়ার আছে। বাংলা লিখলে ZIP-এর ভেতরে ফন্ট (যেমন Noto Sans Bengali, .woff2) দিন, কারণ বাইরের ফন্ট ব্লক।

১২লোকালি টেস্ট

আপলোডের আগে নিজের কম্পিউটারে W3 Games-এর মতো পরিবেশে চালিয়ে দেখুন:

1. গেমের ফোল্ডারে একটা ছোট সার্ভার চালু করুন (file:// থেকে খুললে মডিউল চলে না): npx http-server . --cors -c-1। --cors জরুরি: sandbox ফ্রেমের নিজের কোনো origin থাকে না, তাই ব্রাউজার সার্ভারের কাছে (CORS হেডারে) অনুমতি চায়। W3 Games প্রতিটি গেম-ফাইলে সেই হেডার দেয়; লোকাল সার্ভারকেও দিতে হবে। (সাধারণ python -m http.server এই হেডার দেয় না।)
2. একই ফোল্ডারে test.html বানান, যা আপনার গেমকে W3 Games-এর মতো sandbox ফ্রেমে খোলে:

<iframe src="index.html" sandbox="allow-scripts allow-pointer-lock"
        allow="fullscreen; gamepad" style="width:100%;height:90vh;border:0"></iframe>
<script>
  window.addEventListener('message', e => console.log('score message:', e.data));
</script>

3. /test.html খুলে একটা রান খেলুন। কনসোলে { type: "W3_GAME_SCORE", score: ..., mode: ... } দেখলে স্কোর পাঠানো ঠিক আছে।
4. কনসোলে SecurityError (স্টোরেজ), ব্লক হওয়া সংযোগ বা CSP ত্রুটি থাকলে W3 Games-এও একই সমস্যা হবে, আগে ঠিক করুন।

আপলোডের আগের চেকলিস্ট

• ☐ index.html ZIP-এর উপরের স্তরে আছে।
• ☐ সব পথ সম্পর্কিত; বাইরের কোনো URL (CDN, ফন্ট, API) নেই।
• ☐ কোনো .php বা নিষিদ্ধ ফাইল নেই; ফাইল সংখ্যা ও সাইজ সীমার মধ্যে।
• ☐ কোনো alert(), localStorage (try/catch ছাড়া), window.open নেই।
• ☐ কিবোর্ড ও টাচ দুটোয় চলে; ফোনের আকারে ঠিকঠাক দেখায়।
• ☐ রান শেষে একবার W3_GAME_SCORE যায়; স্কোর পূর্ণসংখ্যা, বড় = ভালো।
• ☐ থাম্বনেইল ও বিবরণ তৈরি; বয়সসীমা ও ক্যাটাগরি ঠিক; ক্রেডিট লেখা আছে।

১৩সাধারণ ভুল ও সমাধান

১৪স্টার্টার কিট

স্টার্টার কিট একটা ছোট কিন্তু পূর্ণ গেম ("Tap Target") যা উপরের সব নিয়ম মেনে বানানো। এতে আছে:

• index.html, game.js, style.css: মাউস, টাচ ও কিবোর্ডে চলা গেম, স্পষ্ট ক্যানভাস, Start/Play again স্ক্রিন।
• w3.js: তিনটা ছোট হেল্পার: submitScore(score, mode), loadSponsors(), storage (নিরাপদ স্টোরেজ)। এটা নিজের গেমে কপি করে নিন।
• guide.html: নমুনা ইউজার গাইড।
• README.txt: লোকাল টেস্ট ও আপলোডের ধাপ।

w3games-starter-game.zip নামান

প্রস্তুত? ডেভেলপার হিসেবে আবেদন করুন বা, আগেই অনুমোদিত হয়ে থাকলে, নতুন গেম তৈরি করুন।