Tower Defense yang dibuat dengan antigravity hanya dalam 3 hari

Awalnya saya menggunakan claude code dan cursor, tetapi setelah resign tahun lalu saya beralih ke antigravity mulai November dan setiap hari membuat berbagai proyek toy web service. Lalu tiba-tiba 3 hari yang lalu (1/2), saya jadi ingin mencoba membuat game tower defense.
Sebagai web frontend developer, saya malas membungkusnya menjadi aplikasi, jadi saya putuskan agar game ini hanya berjalan di lingkungan browser desktop. Karena pengerjaan berbasis canvas dan file gambar sepertinya akan memakan terlalu banyak waktu, saya memulai dengan ide memanfaatkan emoji semaksimal mungkin.

Awalnya saya ingin menyelesaikannya dalam sehari, tetapi saat proses membuatnya ternyata seru, jadi sambil terus memperbaiki dan menambahkan ini-itu, akhirnya memakan waktu sampai 3 hari. T_T

Tech stack dasarnya adalah sebagai berikut.

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

Setelah melalui berbagai revisi, pada akhirnya logika game ditetapkan seperti berikut.

1. Daya serang tower

Tower akan meningkat levelnya melalui merge, dan setiap naik level jangkauan (Range) bertambah 10, sementara efisiensi daya serang disesuaikan menjadi 1,8x (untuk balancing).

• Rumus: Damage = floor(BaseDamage * (1.8 ^ (Level - 1)))
  • Lv 1: 10
  • Lv 2: 18
  • Lv 3: 32
  • Lv 4: 57

2. Pola kemunculan musuh (Wave Logic)

Berbagai pola wave diterapkan untuk menghilangkan kesan monoton.

• Wave biasa (Horde Mix): Musuh tier saat ini (70%) dan musuh tier sebelumnya (30%) akan muncul secara campuran.
• Wave bos (Every 6th): Bos akan memunculkan 1 musuh terkuat dari era tersebut, dengan anak buah yang mengawalnya di sekelilingnya.
  • Jumlah musuh pada wave bos: Wave / 6 (1 ekor di wave 6, 2 ekor di wave 12...)

4. Hadiah gold (Active)

Gold diperoleh saat mengalahkan musuh atau menyelesaikan wave.

ps. Lingkungan mobile tidak terlalu dipertimbangkan. Event sentuh sudah ditambahkan, dan meski berjalan cukup baik di fold atau pad, saya tidak terlalu mempertimbangkan layar kecil~

ps. Jika ada hal yang bisa ditingkatkan atau bug, beri tahu lewat komentar dan akan saya terapkan saat ada waktu.

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

[wancomplete]

Saya juga baru-baru ini sempat mencoba membuat game dan menggunakan https://verse8.io. Karena platform itu bahkan bisa langsung membuat gambar dan animasi sprite 2D, saya jadi tidak perlu menghabiskan waktu untuk pengerjaan aset dan bisa fokus hanya pada logika game. Selain itu, karena bisa langsung deploy dari platformnya, saya benar-benar merasa sangat nyaman karena tidak perlu repot memikirkan hosting terpisah.

[huiya]

Menarik sekali. Penggunaan emoji yang aktif terasa sangat segar.
Saya tidak terlalu sering memainkan game tower defense, jadi saya tidak yakin apakah ini pendapat yang tepat, tetapi rasanya aneh bahwa waktu wave dan waktu persiapan tidak dipisahkan, sehingga posisi tower masih bisa diubah bahkan saat wave sedang datang.
Dalam kasus ekstrem, terasa seperti jangkauan menjadi tidak berarti karena posisi bisa terus diubah agar menyerang setiap saat.

[cybrshin]

Terima kasih sudah memainkannya dengan seru.
Saat membuatnya, saya juga merasa aneh bahwa posisinya bisa dipindahkan, tapi sepertinya itu justru bisa menjadi kelebihan game ini sekaligus elemen yang dinamis dan bisa dikendalikan, jadi saya biarkan seperti itu.
Sebenarnya, kalau ingin memindahkannya dengan cepat, itu sangat sulit kalau towernya tidak di-merge.
Soal keseimbangan game, seperti apakah perlu ditambahkan penalti untuk pemindahan, sepertinya akan terus menjadi poin yang perlu dipikirkan.

[huiya]

Ah, ternyata Anda sudah mempertimbangkan semuanya. Saya tadi kurang berpikir panjang.

[cybrshin]

Bukan. Terima kasih atas masukannya.

[waylake]

Halo, saya memainkannya dengan senang hati, dan saya ingin memberikan masukan terkait keamanan.

• Saat ini HMAC secret (kunci untuk penandatanganan) terekspos di frontend
  • Dari frontend, gold, wave, lives, dan towers bisa diubah secara langsung

Saya memberi tahu ini karena bisa ada masalah terkait paket harga Vercel dan Supabase.

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]

Ah, terima kasih~

[roxie]

Tidak masuk akal... wave 700............???

[cybrshin]

Bisa kok, hehe