Yılan Oyunu - ( HTML & Javascript & Tailwindcss )

Kreathex · 2025-03-30T21:08:11+00:00

Özellikler: Dark Mod ve Gelişmiş Grafikler: Yılan, beyaz renkte ve yem yeşil renkte. Gelişmiş gölge efektleri ve yumuşak kenarlar, oyunun daha gerçekçi ve hoş görünmesini sağlıyor. Zorluk Seçenekleri: Kolay, orta ve zor zorluk seviyeleri ile oyun deneyimini özelleştirebilirsiniz. Skor Tablosu: Kolayca skorunuzu takip edebileceğiniz bir skor tablosu mevcut. Duvarlar ve Engeller: Yılan alanı genişletildi ve duvarlarla zorluk eklenerek oyun deneyimi daha da geliştirildi. Bu açık kaynak kodu ile yılan oyununu kendi ihtiyaçlarınıza göre özelleştirebilir ve paylaşabilirsiniz. Oynamaya hemen başlayın ve bu nostaljik eğlencenin tadını çıkarın. Yılan Oyunu body { background-color: #1a202c; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; overflow: hidden; } canvas { border: 4px solid #2d3748; margin: auto; display: block; background-color: #1a202c; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7); } .game-over { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; padding: 20px; background-color: rgba(0, 0, 0, 0.8); border-radius: 10px; text-align: center; color: white; animation: fadeIn 0.5s ease-out; } .game-over.active { display: block; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .snake-body { fill: #FFFFFF; border-radius: 5px; /* Yumuşak kenarlar */ } .food { fill: #48BB78; border-radius: 5px; /* Yumuşak kenarlar */ } .walls { fill: #2d3748; } .score-board { position: absolute; top: 10px; left: 10px; padding: 10px; background-color: rgba(0, 0, 0, 0.7); border-radius: 5px; color: white; font-size: 18px; } Oyun Bitti! Skorunuz: 0 Yeniden Başla Yılan Oyunu Zorluk Seçin: Kolay Orta Zor Skor: 0 Skor: 0 const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const scoreDisplay = document.getElementById('score'); const finalScore = document.getElementById('finalScore'); const gameOver = document.getElementById('gameOver'); const difficultySelect = document.getElementById('difficulty'); let tileSize = 20; let snake = [{ x: 300, y: 300 }]; let direction = { x: 0, y: 0 }; let food = generateFood(); let score = 0; let gameSpeed = 200; function generateFood() { let x, y; do { x = Math.floor(Math.random() * (canvas.width / tileSize)) * tileSize; y = Math.floor(Math.random() * (canvas.height / tileSize)) * tileSize; } while (isCollisionWithWalls(x, y) || isCollisionWithSnake(x, y)); return { x, y }; } function isCollisionWithWalls(x, y) { return x = canvas.width - tileSize || y = canvas.height - tileSize; } function isCollisionWithSnake(x, y) { return snake.some(segment => segment.x === x && segment.y === y); } const setSpeed = (difficulty) => { if (difficulty === 'easy') gameSpeed = 200; else if (difficulty === 'medium') gameSpeed = 150; else if (difficulty === 'hard') gameSpeed = 100; }; difficultySelect.addEventListener('change', (e) => { setSpeed(e.target.value); }); const drawSnake = () => { ctx.fillStyle = '#FFFFFF'; ctx.shadowColor = '#000'; ctx.shadowBlur = 10; snake.forEach(segment => { ctx.fillRect(segment.x, segment.y, tileSize, tileSize); }); }; const drawFood = () => { ctx.fillStyle = '#48BB78'; ctx.shadowColor = '#000'; ctx.shadowBlur = 10; ctx.fillRect(food.x, food.y, tileSize, tileSize); }; const drawWalls = () => { ctx.fillStyle = '#2d3748'; ctx.fillRect(0, 0, canvas.width, tileSize); // üst duvar ctx.fillRect(0, canvas.height - tileSize, canvas.width, tileSize); // alt duvar ctx.fillRect(0, 0, tileSize, canvas.height); // sol duvar ctx.fillRect(canvas.width - tileSize, 0, tileSize, canvas.height); // sağ duvar }; const moveSnake = () => { const head = { x: snake[0].x + direction.x * tileSize, y: snake[0].y + direction.y * tileSize }; snake.unshift(head); if (head.x === food.x && head.y === food.y) { score += 10; scoreDisplay.textContent = score; food = generateFood(); animateFoodEaten(); } else { snake.pop(); } }; const checkCollision = () => { const head = snake[0]; if (head.x = canvas.width - tileSize || head.y = canvas.height - tileSize) { return true; } for (let i = 1; i { if (checkCollision()) { gameOver.classList.add('active'); finalScore.textContent = score; return; } ctx.clearRect(0, 0, canvas.width, canvas.height); drawWalls(); drawFood(); moveSnake(); drawSnake(); setTimeout(gameLoop, gameSpeed); }; window.addEventListener('keydown', (e) => { switch (e.key) { case 'ArrowUp': if (direction.y === 0) direction = { x: 0, y: -1 }; break; case 'ArrowDown': if (direction.y === 0) direction = { x: 0, y: 1 }; break; case 'ArrowLeft': if (direction.x === 0) direction = { x: -1, y: 0 }; break; case 'ArrowRight': if (direction.x === 0) direction = { x: 1, y: 0 }; break; } }); setSpeed(difficultySelect.value); gameLoop(); const restartGame = () => { snake = [{ x: 300, y: 300 }]; direction = { x: 0, y: 0 }; score = 0; scoreDisplay.textContent = score; gameOver.classList.remove('active'); gameLoop(); }; const animateFoodEaten = () => { const foodX = food.x; const foodY = food.y; ctx.fillStyle = '#48BB78'; ctx.shadowColor = '#000'; ctx.shadowBlur = 10; ctx.fillRect(food.x, food.y, tileSize, tileSize); ctx.clearRect(foodX, foodY, tileSize, tileSize); };

Konuyu Başlatan Kreathex
Başlangıç tarihi 31 Mart 2025
Cevaplar 0
Görüntüleme 14

WebmasterForum.Net içerisinde paylaşım yapmakta tamamen özgürsünüz! Detaylar için İçerik Oluşturma Duyurusu! konumuza göz atabilirsiniz.

JavaScript devre dışı. Daha iyi bir deneyim için, önce lütfen tarayıcınızda JavaScript'i etkinleştirin.

Kreathex

Kayıtlı Üye

31 Mart 2025

Özellikler:

Dark Mod ve Gelişmiş Grafikler: Yılan, beyaz renkte ve yem yeşil renkte. Gelişmiş gölge efektleri ve yumuşak kenarlar, oyunun daha gerçekçi ve hoş görünmesini sağlıyor.
Zorluk Seçenekleri: Kolay, orta ve zor zorluk seviyeleri ile oyun deneyimini özelleştirebilirsiniz.
Skor Tablosu: Kolayca skorunuzu takip edebileceğiniz bir skor tablosu mevcut.
Duvarlar ve Engeller: Yılan alanı genişletildi ve duvarlarla zorluk eklenerek oyun deneyimi daha da geliştirildi.

Bu açık kaynak kodu ile yılan oyununu kendi ihtiyaçlarınıza göre özelleştirebilir ve paylaşabilirsiniz. Oynamaya hemen başlayın ve bu nostaljik eğlencenin tadını çıkarın.

Kod:

İçeriği sadece üyelerimiz görebilir.

Etkileşim için üye olun ya da giriş yapın!

Kayıt ol

Bize katılım kolay ve ücretsizdir!

Üye ol

Giriş Yap

Zaten bir hesabınız var mı? Buradan giriş yapın.

Bu konuyu görüntüleyenler

Toplam: 1 (Kullanıcı: 0, ziyaretçi: 1)

Benzer Konular

İndir Steam’de Yeni RPG Oyunu Kısa Süreliğine Ücretsiz - Hemen İndir!

Cevaplar: 0

Görüntüleme: 24

4 Nisan 2025

Graveworm

Oyunculardan Tam Not Alan Açık Dünya Hayatta Kalma Oyunu, Steam'de Kısa Süreliğine Ücretsiz Oldu

Cevaplar: 0

Görüntüleme: 27

29 Mart 2025

bewanted

Çözüldü

HTML wigdet bölümüne nasıl icon eklerim ?

Cevaplar: 8

Görüntüleme: 92

12 Nisan 2025

raccoon

Paylaş:

Vk Facebook X (Twitter) Bluesky LinkedIn Reddit Pinterest Tumblr WhatsApp Telegram Skype E-posta Google Link

Dikkat

Telif içerik, reklam, ban, premium hesaplar ve diğer istek, öneri, şikayet konularının tamamı için [email protected] adresine e-posta gönderebilirsiniz.

Karanlık (Dark Mode) Temayı nasıl kullanabilirim?

WebmasterForum.Net

"WebmasterForum.Net" 5651 Sayılı Kanun kapsamında BTK tarafından onaylı Yer Sağlayıcı'dır.

T.C.K'nın 5651 Sayılı yasasına göre BTK Tarafından onaylı ve yer sağlayıcı konumunda olan web sitelerinin bünyesinde barınan içerikleri kontrol etme sorumluluğu bulunmuyor. Ancak sitemiz her zaman etik ve kişilik haklarına saygılı olmayı bir ilke edinmiştir! Rahatsız olduğunuz bir içeriği lütfen bize bildiriniz. Saygılarımızla, WF Yönetim!
Forum İstatistikleri

Konular

954

Mesajlar

2.628

Görüntüleme

76.790

Kullanıcılar

361

Son üye

businessmedya
Online istatistikleri

Çevrim içi kullanıcılar

5

Çevrim içi ziyaretçiler

47

Toplam ziyaretçi

52

Robots

136

Toplamlar, gizli ziyaretçiler içerebilir.
Bilgilendirme

Geri

Üst

Yılan Oyunu - ( HTML & Javascript & Tailwindcss )

Kreathex

Bu konuyu görüntüleyenler

Benzer Konular

Dikkat

WebmasterForum.Net

Forum İstatistikleri

Online istatistikleri

Bilgilendirme