🐍 Bekjon's Snake — VS Code Extension
Coding'dan dam olish uchun VS Code sidebar'iga o'rnatiladigan Snake o'yini.
Xususiyatlari
- 📍 Sidebar panel — chap tomonda doimiy turadi
- 💾 Best score saqlash — VS Code'ning o'z
globalState'ida (barcha workspace'larda umumiy)
- ⌨️ Klaviatura — WASD yoki o'q tugmalari
- 📱 D-pad — sichqonchada ham o'ynash mumkin
- ⏸️ Pauza —
P tugmasi
- 🚀 Daraja tizimi — har 5 ovqatdan keyin tezlashadi
- 🎨 VS Code teması — sidebar rangiga moslashadi
O'rnatish va ishga tushirish
1-qadam: dependency'larni o'rnatish
cd snake-vscode
npm install
2-qadam: TypeScript'ni compile qilish
npm run compile
3-qadam: Debug rejimida ishga tushirish
- Loyihani VS Code'da oching
F5 tugmasini bosing — yangi Extension Development Host oynasi ochiladi- Yangi oynaning chap tomonidagi activity bar'da 🐍 Snake ikonasini bosing
- Boshlash tugmasini bosing va o'ynang!
VSIX fayl sifatida paketlash (haqiqiy o'rnatish)
npm install -g @vscode/vsce
vsce package
Bu snake-game-1.0.0.vsix faylini yaratadi. O'rnatish:
code --install-extension snake-game-1.0.0.vsix
Yoki VS Code'da: Ctrl+Shift+P → Extensions: Install from VSIX...
Boshqaruv
| Tugma |
Vazifa |
↑ W |
Yuqori |
↓ S |
Pastga |
← A |
Chapga |
→ D |
O'ngga |
P |
Pauza |
R |
Restart |
Komandalar
Snake: Reset Best Score — eng yaxshi natijani 0'ga qaytarish (Ctrl+Shift+P)
Loyiha tuzilmasi
snake-vscode/
├── package.json # Extension manifest
├── tsconfig.json # TypeScript config
├── src/
│ └── extension.ts # Asosiy kod (WebviewViewProvider)
├── media/
│ └── snake-icon.svg # Sidebar ikonasi
└── out/ # Compile bo'lgan .js fayllar (npm run compile)
Texnik tushuntirish
WebviewViewProvider — sidebar ichidagi webview'ni boshqaradiglobalState — best score barcha workspace'larda saqlanadi (workspaceState o'rniga)postMessage / onDidReceiveMessage — webview va extension orasida ma'lumot almashish- CSP (Content Security Policy) — xavfsizlik uchun
nonce ishlatilgan
- VS Code teması —
var(--vscode-foreground) kabi CSS o'zgaruvchilari orqali
| |
