| Mylife | 23 Mayıs 2025 16:03 |
Yılan Oyunu🐍 / Html/CSS & Javascript
Yaparken çok keyif aldığım bir uygulama, resmen çocukluğumu hatırlattı. Saatlerce başından kalkmazdık. Şimdi de oynadıkça oynatıyor.
Güzel sokarlar yaptım bu arada, siz de deneyin. [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] Kod:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>🐍 Yılan Oyunu</title>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap" rel="stylesheet" />
<style>
* {
box-sizing: border-box;
font-family: 'Orbitron', Arial, sans-serif;
}
body {
background: linear-gradient(145deg, #0f2027, #203a43, #2c5364);
color: white;
margin: 0;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
}
h1 {
font-size: 3em;
margin-bottom: 30px;
text-shadow: 2px 2px 4px #000;
user-select: none;
}
#mainMenu {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
margin-bottom: 40px;
width: 320px;
max-width: 90vw;
}
#nicknameInput {
padding: 10px 15px;
font-size: 1em;
border-radius: 8px;
border: none;
width: 100%;
max-width: 320px;
outline: none;
transition: box-shadow 0.3s ease;
}
#nicknameInput:focus {
box-shadow: 0 0 8px #0ff;
}
#startButton {
padding: 10px 25px;
font-size: 1.1em;
border-radius: 8px;
border: none;
cursor: pointer;
background-color: #28a745;
transition: background-color 0.3s ease;
color: white;
width: 100%;
max-width: 320px;
user-select: none;
}
#startButton:hover {
background-color: #218838;
}
#scoreTable {
margin-top: 20px;
background: rgba(255, 255, 255, 0.1);
padding: 15px 25px;
border-radius: 12px;
width: 100%;
max-height: 230px;
overflow-y: auto;
text-align: center;
user-select: none;
}
#scoreTable h2 {
font-size: 1.3em;
margin-bottom: 12px;
}
#scoreTable ol {
font-size: 0.9em;
padding-left: 0;
list-style-position: inside;
color: #d0f0f0;
margin: 0;
}
#gameContainer {
display: flex;
flex-direction: row;
gap: 25px;
justify-content: center;
align-items: flex-start;
width: 100%;
max-width: 760px;
}
#gameFrame {
position: relative;
background-color: #111;
width: 400px;
height: 400px;
border: 10px double #ddd;
box-shadow: 0 0 15px 5px #00ffcc;
overflow: hidden;
border-radius: 15px;
}
canvas {
display: block;
width: 100%;
height: 100%;
border-radius: 15px;
background: #111;
}
#clickToStart {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.6em;
color: #0ff;
background: rgba(0, 0, 0, 0.7);
padding: 12px 25px;
border-radius: 12px;
display: none;
animation: blink 1s infinite;
user-select: none;
pointer-events: auto;
cursor: pointer;
}
@[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]rames blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
#scorePanel {
background: rgba(0, 0, 0, 0.5);
border-radius: 15px;
padding: 25px 20px;
width: 280px;
box-shadow: 0 0 15px #00ffff;
font-family: 'Orbitron', Arial, sans-serif;
color: white;
user-select: none;
}
#scorePanel h3 {
text-align: center;
color: #0ff;
border-bottom: 1px solid #888;
padding-bottom: 10px;
font-size: 1.4em;
text-shadow: 1px 1px 2px #000;
margin-bottom: 15px;
}
#currentScore, #instructions {
font-size: 1.1em;
margin-bottom: 15px;
line-height: 1.3em;
}
#liveScores {
padding-left: 15px;
margin: 0;
}
#liveScores li {
font-size: 1.1em;
font-weight: 700;
color: #fff;
text-shadow: 1px 1px 3px #00ffff;
margin-bottom: 7px;
list-style: decimal;
}
#gameOverScreen {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.85);
padding: 40px 50px;
border-radius: 15px;
text-align: center;
z-index: 1000;
display: none;
user-select: none;
}
#gameOverScreen h2 {
font-size: 2em;
margin-bottom: 25px;
color: #ff4444;
text-shadow: 2px 2px 6px #000;
}
#restartButton {
padding: 12px 28px;
font-size: 1.1em;
background-color: #007bff;
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
transition: background-color 0.3s ease;
user-select: none;
}
#restartButton:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>🐍 Yılan Oyunu</h1>
<div id="mainMenu">
<input
type="text"
id="nicknameInput"
placeholder="Kullanıcı adınızı girin"
maxlength="12"
autocomplete="off"
spellcheck="false"
/>
<button id="startButton">Oyuna Başla</button>
<div id="scoreTable">
<h2>🏆 En İyi Skorlar</h2>
<ol id="topScores"></ol>
</div>
</div>
<div id="gameContainer" style="display:none;">
<div id="gameFrame">
<canvas id="gameCanvas" width="400" height="400"></canvas>
<div id="clickToStart">Başlamak için tıklayın</div>
<div id="gameOverScreen">
<h2>Game Over</h2>
<button id="restartButton">Tamam</button>
</div>
</div>
<div id="scorePanel">
<h3>Bilgilendirme</h3>
<p id="instructions">
Oyun yön tuşlarıyla oynanır.<br />
Boşluk tuşu: Başlat / Duraklat<br />
Duvara veya kendine çarparsan oyun biter.
</p>
<div id="currentScore">Skor: 0</div>
<h3>Skor Tablosu</h3>
<ol id="liveScores"></ol>
</div>
</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const clickToStart = document.getElementById('clickToStart');
const gameOverScreen = document.getElementById('gameOverScreen');
const restartButton = document.getElementById('restartButton');
const mainMenu = document.getElementById('mainMenu');
const gameContainer = document.getElementById('gameContainer');
const nicknameInput = document.getElementById('nicknameInput');
const startButton = document.getElementById('startButton');
const currentScoreDisplay = document.getElementById('currentScore');
const topScoresList = document.getElementById('topScores');
const liveScoresList = document.getElementById('liveScores');
const gridSize = 20;
const tileCount = canvas.width / gridSize;
let snake = [];
let velocityX = 0;
let velocityY = 0;
let apple = {};
let superApple = null;
let score = 0;
let normalAppleCount = 0;
let isRunning = false;
let isPaused = false;
let gameInterval;
let nickname = '';
let hasStarted = false;
function loadScores() {
let storedScores = localStorage.getItem('snakeHighScores');
if (storedScores) {
return JSON.parse(storedScores);
}
return [];
}
function saveScores(scores) {
localStorage.setItem('snakeHighScores', JSON.stringify(scores));
}
function updateScoreLists() {
const scores = loadScores();
topScoresList.innerHTML = '';
scores.forEach(({name, score}, i) => {
const li = document.createElement('li');
li.textContent = `${name}: ${score}`;
topScoresList.appendChild(li);
});
liveScoresList.innerHTML = '';
scores.forEach(({name, score}) => {
const li = document.createElement('li');
li.textContent = `${name}: ${score}`;
liveScoresList.appendChild(li);
});
}
function placeApple() {
apple.x = Math.floor(Math.random() * tileCount);
apple.y = Math.floor(Math.random() * tileCount);
if (snake.some(segment => segment.x === apple.x && segment.y === apple.y) ||
(superApple && superApple.x === apple.x && superApple.y === apple.y)) {
placeApple();
}
}
function placeSuperApple() {
superApple = {};
superApple.x = Math.floor(Math.random() * tileCount);
superApple.y = Math.floor(Math.random() * tileCount);
if (snake.some(segment => segment.x === superApple.x && segment.y === superApple.y) ||
(apple.x === superApple.x && apple.y === superApple.y)) {
placeSuperApple();
}
}
function startGame() {
if (!nickname.trim()) {
alert('Lütfen kullanıcı adınızı girin.');
return;
}
mainMenu.style.display = 'none';
gameContainer.style.display = 'flex';
snake = [
{x: 8, y: 10},
{x: 7, y: 10},
{x: 6, y: 10}
];
velocityX = 1;
velocityY = 0;
score = 0;
normalAppleCount = 0;
currentScoreDisplay.textContent = 'Skor: 0';
superApple = null;
placeApple();
isPaused = false;
isRunning = false;
hasStarted = false;
clickToStart.style.display = 'block';
gameOverScreen.style.display = 'none';
updateScoreLists();
drawGame();
}
function drawGame() {
// Arka plan
ctx.fillStyle = '#111';
ctx.fillRect(0, 0, canvas.width, canvas.height);
if (!superApple) {
ctx.fillStyle = '#ff4444';
ctx.beginPath();
const appleCenterX = apple.x * gridSize + gridSize / 2;
const appleCenterY = apple.y * gridSize + gridSize / 2;
ctx.arc(appleCenterX, appleCenterY, gridSize / 2.5, 0, Math.PI * 2);
ctx.fill();
}
if (superApple) {
ctx.fillStyle = '#ffd700';
ctx.beginPath();
const superCenterX = superApple.x * gridSize + gridSize / 2;
const superCenterY = superApple.y * gridSize + gridSize / 2;
ctx.arc(superCenterX, superCenterY, gridSize / 2.5, 0, Math.PI * 2);
ctx.fill();
}
snake.forEach((segment, index) => {
ctx.fillStyle = index === 0 ? '#00ffff' : '#00cccc';
ctx.strokeStyle = '#005555';
ctx.lineWidth = 2;
const centerX = segment.x * gridSize + gridSize / 2;
const centerY = segment.y * gridSize + gridSize / 2;
const radius = gridSize / 2.5;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
ctx.fill();
ctx.stroke();
});
}
function gameStep() {
if (isPaused) return;
const headX = snake[0].x + velocityX;
const headY = snake[0].y + velocityY;
if (headX < 0 || headX >= tileCount || headY < 0 || headY >= tileCount) {
endGame();
return;
}
if (snake.some(segment => segment.x === headX && segment.y === headY)) {
endGame();
return;
}
snake.unshift({x: headX, y: headY});
if (superApple && headX === superApple.x && headY === superApple.y) {
score += 50;
currentScoreDisplay.textContent = `Skor: ${score}`;
superApple = null;
normalAppleCount = 0;
placeApple();
}
else if (!superApple && headX === apple.x && headY === apple.y) {
score += 1;
currentScoreDisplay.textContent = `Skor: ${score}`;
normalAppleCount++;
if (normalAppleCount >= 10) {
superApple = {};
placeSuperApple();
} else {
placeApple();
}
} else {
snake.pop();
}
drawGame();
}
function endGame() {
isPaused = true;
isRunning = false;
hasStarted = false;
clickToStart.style.display = 'none';
let scores = loadScores();
scores.push({name: nickname, score});
scores.sort((a,b) => b.score - a.score);
if (scores.length > 10) scores.length = 10;
saveScores(scores);
updateScoreLists();
gameOverScreen.style.display = 'block';
}
window.addEventListener('keydown', (e) => {
const keys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
if (keys.includes(e.key)) {
e.preventDefault();
}
if (!isRunning && !hasStarted) return;
switch (e.key) {
case 'ArrowUp':
if (velocityY !== 1) { velocityX = 0; velocityY = -1; }
break;
case 'ArrowDown':
if (velocityY !== -1) { velocityX = 0; velocityY = 1; }
break;
case 'ArrowLeft':
if (velocityX !== 1) { velocityX = -1; velocityY = 0; }
break;
case 'ArrowRight':
if (velocityX !== -1) { velocityX = 1; velocityY = 0; }
break;
case ' ':
if (!hasStarted) return;
if (isPaused) {
isPaused = false;
currentScoreDisplay.textContent = `Skor: ${score}`;
} else {
isPaused = true;
currentScoreDisplay.textContent = `Oyun Duraklatıldı (Boşluk ile devam ettir)`;
}
break;
}
});
startButton.addEventListener('click', () => {
nickname = nicknameInput.value.trim();
if (!nickname) {
alert('Lütfen kullanıcı adınızı girin.');
nicknameInput.focus();
return;
}
startGame();
});
function runGameLoop() {
if (gameInterval) clearInterval(gameInterval);
gameInterval = setInterval(gameStep, 120);
}
clickToStart.addEventListener('click', () => {
if (!hasStarted) {
isRunning = true;
isPaused = false;
hasStarted = true;
clickToStart.style.display = 'none';
runGameLoop();
}
});
restartButton.addEventListener('click', () => {
gameContainer.style.display = 'none';
mainMenu.style.display = 'flex';
nicknameInput.value = '';
nicknameInput.focus();
gameOverScreen.style.display = 'none';
if (gameInterval) clearInterval(gameInterval);
isRunning = false;
isPaused = false;
hasStarted = false;
updateScoreLists();
});
updateScoreLists();
</script>
</body>
</html>
Test Adresi: [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] |
