सिर्फ 3 दिनों में antigravity से बनाया गया Tower Defense

पहले मैं Claude Code और Cursor का इस्तेमाल करता था, लेकिन पिछले साल नौकरी छोड़ने के बाद नवंबर से antigravity पर स्विच करने के बाद मैं हर दिन तरह-तरह के toy web service प्रोजेक्ट बना रहा था। फिर अचानक 3 दिन पहले (1/2) मुझे लगा कि एक Tower Defense गेम बनाकर देखना चाहिए।
मूल रूप से मैं web frontend developer हूँ, इसलिए इसे app में wrap करना झंझट लगा। मैंने तय किया कि यह सिर्फ desktop browser environment में ही चले, और canvas आधारित behavior व image file का काम बहुत समय लेगा, इसलिए emoji का जितना हो सके उतना इस्तेमाल करने के आइडिया से शुरुआत की।

इसे एक दिन में खत्म करने का सोचा था, लेकिन बनाते-बनाते इतना मज़ा आने लगा कि यह सुधारते और नई चीज़ें जोड़ते-जोड़ते 3 दिन लग गए। टीटी

बेसिक tech stack इस प्रकार है।

• Frontend: Next.js 14+ (App Router), TypeScript, HTML5 Canvas
• Backend: FastAPI, Python 3.9+, Pydantic
• Database: Supabase (PostgreSQL)
• Deployment: Vercel

कई तरह के बदलावों के बाद अंततः game logic इस प्रकार तय किया गया।

1. टावर attack power

टावर merge के ज़रिए level बढ़ने पर हर बार range 10 बढ़ती है, लेकिन attack power efficiency को 1.8x पर adjust किया गया है (balance के लिए)।

• सूत्र: Damage = floor(BaseDamage * (1.8 ^ (Level - 1)))
  • Lv 1: 10
  • Lv 2: 18
  • Lv 3: 32
  • Lv 4: 57

2. दुश्मन प्रकट होने का पैटर्न (Wave Logic)

एकरसता हटाने के लिए अलग-अलग wave pattern लागू किए गए हैं।

• सामान्य wave (Horde Mix): मौजूदा tier के दुश्मन (70%) और पिछले tier के दुश्मन (30%) मिलकर आते हैं।
• Boss wave (Every 6th): boss wave में उस युग का सबसे शक्तिशाली दुश्मन 1 आता है, और उसके आसपास छोटे minion guard करते हैं।
  • boss wave में दुश्मनों की संख्या: Wave / 6 (wave 6 में 1, wave 12 में 2...)

4. गोल्ड reward (Active)

दुश्मनों को हराने या wave clear करने पर gold मिलता है।

ps. mobile environment को खास तौर पर ध्यान में नहीं रखा गया था। touch event जोड़े हैं, इसलिए Fold या Pad पर यह ठीक चलता है, लेकिन छोटे स्क्रीन के लिए बहुत ज़्यादा optimization नहीं किया।

ps. अगर कोई improvement point या bug हो तो comment में बताइए, समय मिलने पर उन्हें reflect करूँगा।

https://tower.dsp.ai.kr/

[wancomplete]

मैंने भी हाल ही में गेम बनाते समय https://verse8.io इस्तेमाल करके देखा, और इसने इमेज से लेकर 2D sprite animation तक सीधे बना दिए, इसलिए assets पर समय लगाए बिना मैं सिर्फ game logic पर फोकस कर पाया। ऊपर से platform पर सीधे deploy भी हो जाता है, इसलिए अलग से hosting की चिंता नहीं करनी पड़ी और यह सच में बहुत सुविधाजनक था।

[huiya]

मज़ेदार है। Emoji का सक्रिय रूप से इस्तेमाल किया गया होना काफ़ी नया-सा लगता है.
मैं Tower Defense गेम ज़्यादा नहीं खेलता/खेलती, इसलिए पता नहीं यह सही राय है या नहीं, लेकिन Wave Time और Preparation Time अलग नहीं हैं, इसलिए Wave आने के दौरान भी Tower की जगह बदली जा सकती है — यह थोड़ा अजीब लगता है.
चरम स्थिति में, जगह लगातार बदलते हुए हर पल हमला कराया जा सकता है, इसलिए Range का कोई मतलब नहीं रह जाता, ऐसा महसूस होता है.

[cybrshin]

मज़े से खेलने के लिए धन्यवाद।
मुझे भी बनाते समय लगा था कि पोज़िशन बदलना थोड़ा अजीब है, लेकिन मुझे यह भी लगा कि वही इस गेम की एक खासियत और ऐसा dynamic, control किया जा सकने वाला तत्व बन सकता है, इसलिए मैंने उसे वैसे ही रहने दिया।
असल में, अगर जल्दी शिफ्ट करना हो तो tower को merge किए बिना यह सच में बहुत मुश्किल है।
शिफ्ट करने पर अलग से penalty जोड़नी चाहिए या नहीं, इस तरह की game balance से जुड़ी बातें शायद आगे भी सोचने वाले points रहेंगी।

[huiya]

अरे, आपने तो यह सब पहले ही सोच लिया था। मेरी सोच थोड़ी कम पड़ गई थी।

[cybrshin]

नहीं। आपकी राय के लिए धन्यवाद।

[waylake]

नमस्ते, मैंने इसे मज़े से खेला। सुरक्षा से जुड़ा फ़ीडबैक दे रहा हूँ.

• अभी HMAC secret (signing key) फ़्रंटएंड में exposed है
  • फ़्रंट से सीधे gold, wave, lives, towers को बदला जा सकता है

Vercel और Supabase की billing plan से जुड़ी समस्या हो सकती है, इसलिए बता रहा हूँ.

const state = {  
  towers: [],    
  gold: 9999,  
  wave: 1,       
  lives: 1       
};  
  
const state_raw = JSON.stringify(state);  
const user_id = "11111";  
const secret = "11111";  
  
(async () => {  
  const key = await crypto.subtle.importKey(  
    "raw",  
    new TextEncoder().encode(secret),  
    { name: "HMAC", hash: "SHA-256" },  
    false,  
    ["sign"]  
  );  
  const signatureBuffer = await crypto.subtle.sign(  
    "HMAC",  
    key,  
    new TextEncoder().encode(state_raw)  
  );  
  const signature = Array.from(new Uint8Array(signatureBuffer))  
    .map(b => b.toString(16).padStart(2, "0")).join("");  
    
  fetch("https://tower.dsp.ai.kr/api/sync";, {  
    method: "POST",  
    headers: {  
      "Content-Type": "application/json",  
      "Accept": "*/*"  
    },  
    body: JSON.stringify({  
      user_id,  
      state_raw,  
      signature  
    })  
  })  
  .then(res => res.text())  
  .then(console.log)  
  .catch(console.error);  
})();  
  

[cybrshin]

अरे, धन्यवाद~

[roxie]

नहीं, ये तो बिल्कुल समझ से बाहर है... 700 wave...............???

[cybrshin]

मुमकिन है haha