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

R1Agency · 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 R1Agency
Başlangıç tarihi Pazartesi saat 00:08'de
Cevaplar 0
Görüntüleme 4

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.

R1Agency

Premium Üye

Pazartesi saat 00:08'de

Ö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:

 Kodlari sadece uyelerimiz gorebilir.

Cevap yazmak için giriş yap yada kayıt ol.

Bu konuyu görüntüleyenler

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

Benzer Konular

google doodle yılan oyunu

Cevaplar: 0

Görüntüleme: 1

22 Mart 2025

Mehmet

rüyada sırtında yılan görmek diyanet

Cevaplar: 0

Görüntüleme: 1

25 Mart 2025

Mehmet

rüyada mavi yılan görmek diyanet

Cevaplar: 0

Görüntüleme: 1

25 Mart 2025

Mehmet

rüyada kedi ve yılan görmek diyanet

Cevaplar: 0

Görüntüleme: 1

25 Mart 2025

rüyada berrak suyun içinde yılan görmek

Cevaplar: 0

Görüntüleme: 2

25 Mart 2025

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.

Son Mesajlar

Haber iPhone fiyatlarına zam geldi (5 Kişi)
- En son: Tevfik
- Bugün 22:02
Akıllı Telefonlar & Tablet
XenForo'da Kurulu Eklentiyi Nasıl İndirebilirim? (4 Kişi)
- En son: Tevfik
- Bugün 22:02
Yardım & Destek
Soru WF Hangi Oyunları Oynuyor? (1 Kişi)
- En son: Loutermilch
- Bugün 19:46
Oyun Forum
Sihirbazlar Çetesi 3. filmin resmi adı "Now You See Me: Now You Don’t" olarak açıklandı. (1 Kişi)
- En son: Graveworm
- Bugün 17:50
Sinema & TV
ChatGPT’de viral olan görseller nasıl yapılıyor? (2 Kişi)
- En son: Kreathex
- Bugün 16:30
Yapay Zeka

Son Konular

Haber iPhone fiyatlarına zam geldi (5 Kişi)
- Başlatan Graveworm
- Bugün 19:14
- Cevaplar: 4
Akıllı Telefonlar & Tablet
XenForo'da Kurulu Eklentiyi Nasıl İndirebilirim? (4 Kişi)
- Başlatan Tevfik
- Bugün 18:07
- Cevaplar: 5
Yardım & Destek
Sihirbazlar Çetesi 3. filmin resmi adı "Now You See Me: Now You Don’t" olarak açıklandı. (1 Kişi)
- Başlatan Garfield
- Bugün 17:03
- Cevaplar: 1
Sinema & TV
ChatGPT’de viral olan görseller nasıl yapılıyor? (2 Kişi)
- Başlatan Kreathex
- Bugün 16:30
- Cevaplar: 0
Yapay Zeka
Duyuru Ücretli Tasarım İşleri Kategorisinde Konu Açmadan Önce Okuyunuz (1 Kişi)
- Başlatan Kreathex
- Bugün 15:35
- Cevaplar: 0
Tasarım İşleri

Forum içi Takip Sistemi Nedir? Ne İşe Yarar?

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

14.506

Mesajlar

15.074

Görüntüleme

54.036

Kullanıcılar

240

Son üye

Chanson
Online istatistikleri

Çevrim içi kullanıcılar

7

Çevrim içi ziyaretçiler

120

Toplam ziyaretçi

127

Robots

235

Toplamlar, gizli ziyaretçiler içerebilir.
Bilgilendirme

Geri

Üst

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

R1Agency

Bu konuyu görüntüleyenler

Benzer Konular

Dikkat

Son Mesajlar

Son Konular

WebmasterForum.Net

Forum İstatistikleri

Online istatistikleri

Bilgilendirme