Ücretsiz Yılan Oyunu oyna, yemleri toplayarak yılanı büyüt ve en yüksek skora ulaş. Mobil uyumlu klasik Snake oyununda rekorunu geliştir.
Yılan Oyunu, refleks, dikkat ve hızlı karar verme becerilerini geliştiren klasik bir arcade oyunudur. Oyundaki amacın, yılanı doğru yönlendirerek ekrandaki yemleri toplamak ve mümkün olduğunca uzun süre hayatta kalmaktır. Her yemi yediğinde skorun yükselir, yılan uzar ve oyun giderek zorlaşır. Duvarlara veya kendi gövdene çarpmadan hareket etmeli, doğru zamanda yön değiştirmelisin. Mobil cihazlarda kaydırma hareketleriyle, bilgisayarda ise yön tuşları ya da WASD ile kolayca oynayabilirsin. Skor tablosu sayesinde son sonuçlarını görebilir, en yüksek dereceni geliştirmek için tekrar deneyebilirsin. Ücretsiz Yılan Oyunu ile boş zamanlarını eğlenceli biçimde değerlendirebilirsin ve kendi rekorunu kırmak için hemen başlayabilirsin. Hızlandıkça dikkatli olmayı asla elden bırakma.
Mini Oyun
Yılan Oyunu
Yılanı yönlendir, yemleri topla ve duvarlara ya da kendi gövdende çarpmadan en yüksek skora ulaş.
Skor 0
En Yüksek 0
Uzunluk 3
Oyunu Başlat Yeniden Başlat
Başlamak için “Oyunu Başlat” düğmesine bas.
Yılan Oyunu Başlamak için düğmeye bas
Mobil cihazda oyun alanı üzerinde yukarı, aşağı, sağa veya sola kaydırarak yılanı kontrol edebilirsin.
Son Skorlar
Sıra Skor Uzunluk Tarih
Klavyede ok tuşlarını veya W, A, S, D tuşlarını kullanabilirsin. Boşluk tuşu oyunu duraklatır.
.gulum-snake,
.gulum-snake * {
box-sizing: border-box;
}
.gulum-snake__svg-defs {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
pointer-events: none;
}
.gulum-snake__icon {
display: block;
width: 1em;
height: 1em;
flex: 0 0 auto;
fill: currentColor;
pointer-events: none;
}
.gulum-snake {
--snake-purple: #7c3aed;
--snake-purple-light: #a855f7;
--snake-pink: #ec4899;
--snake-blue: #38bdf8;
--snake-green: #22c55e;
--snake-green-light: #86efac;
--snake-red: #ef4444;
--snake-yellow: #facc15;
--snake-dark: #15132b;
--snake-dark-soft: #242044;
--snake-text: #ffffff;
--snake-muted: #cac7de;
width: 100%;
padding: 35px 14px;
color: var(--snake-text);
font-family: Arial, Helvetica, sans-serif;
}
.gulum-snake__container {
width: min(100%, 620px);
margin: 0 auto;
padding: 28px 24px;
overflow: hidden;
text-align: center;
background:
radial-gradient(
circle at top right,
rgba(168, 85, 247, 0.25),
transparent 34%
),
radial-gradient(
circle at bottom left,
rgba(34, 197, 94, 0.12),
transparent 33%
),
linear-gradient(
145deg,
var(--snake-dark),
var(--snake-dark-soft)
);
border: 1px solid rgba(255, 255, 255, 0.11);
border-radius: 26px;
box-shadow:
0 24px 60px rgba(25, 15, 65, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.gulum-snake__header {
margin-bottom: 18px;
}
.gulum-snake__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 28px;
margin-bottom: 11px;
padding: 5px 14px;
color: #ffffff;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
background: linear-gradient(
135deg,
var(--snake-purple),
var(--snake-pink)
);
border-radius: 999px;
}
.gulum-snake__title {
margin: 0 0 9px;
padding: 0;
color: #ffffff;
font-size: clamp(30px, 8vw, 42px);
font-weight: 800;
line-height: 1.15;
}
.gulum-snake__description {
margin: 0;
padding: 0;
color: var(--snake-muted);
font-size: 14px;
line-height: 1.65;
}
.gulum-snake__scorebar {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin-bottom: 14px;
}
.gulum-snake__score-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 0;
min-height: 63px;
padding: 9px 6px;
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 13px;
}
.gulum-snake__score-box span {
margin-bottom: 5px;
color: var(--snake-muted);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.4px;
text-transform: uppercase;
}
.gulum-snake__score-box strong {
color: #ffffff;
font-family: "Courier New", monospace;
font-size: 25px;
line-height: 1;
}
.gulum-snake__score-box:nth-child(1) strong {
color: var(--snake-green-light);
}
.gulum-snake__score-box:nth-child(2) strong {
color: var(--snake-yellow);
}
.gulum-snake__score-box:nth-child(3) strong {
color: var(--snake-blue);
}
.gulum-snake__actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px;
margin-bottom: 13px;
}
.gulum-snake__action-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 0;
min-height: 45px;
margin: 0;
padding: 10px 13px;
appearance: none;
-webkit-appearance: none;
color: #ffffff;
font-family: inherit;
font-size: 13px;
font-weight: 700;
background: linear-gradient(
135deg,
var(--snake-purple),
var(--snake-pink)
);
border: 0;
border-radius: 12px;
outline: none;
cursor: pointer;
transform: none;
transition:
filter 0.18s ease,
background-color 0.18s ease;
}
.gulum-snake__action-button:hover {
filter: brightness(1.08);
}
.gulum-snake__action-button:active,
.gulum-snake__action-button:focus {
transform: none;
}
.gulum-snake__action-button--secondary {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.12);
}
.gulum-snake__action-button .gulum-snake__icon {
width: 18px;
height: 18px;
}
.gulum-snake__status {
display: flex;
align-items: center;
justify-content: center;
min-height: 42px;
margin-bottom: 13px;
padding: 9px 12px;
color: #ffffff;
font-size: 13px;
font-weight: 700;
line-height: 1.45;
background: rgba(255, 255, 255, 0.06);
border-radius: 12px;
}
.gulum-snake__game-frame {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #0d1020;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 16px;
box-shadow:
inset 0 0 30px rgba(0, 0, 0, 0.32),
0 12px 30px rgba(0, 0, 0, 0.2);
}
.gulum-snake__canvas {
display: block;
width: 100%;
height: 100%;
touch-action: none;
user-select: none;
-webkit-user-select: none;
}
.gulum-snake__overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 7px;
padding: 20px;
color: #ffffff;
background: rgba(10, 8, 28, 0.72);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
pointer-events: none;
transition:
opacity 0.18s ease,
visibility 0.18s ease;
}
.gulum-snake__overlay.is-hidden {
opacity: 0;
visibility: hidden;
}
.gulum-snake__overlay strong {
font-size: clamp(23px, 7vw, 34px);
font-weight: 800;
}
.gulum-snake__overlay span {
color: var(--snake-muted);
font-size: 13px;
}
.gulum-snake__swipe-info {
margin: 13px 0 12px;
padding: 0;
color: var(--snake-muted);
font-size: 12px;
line-height: 1.55;
}
.gulum-snake__controls {
display: grid;
grid-template-columns: repeat(3, 64px);
grid-template-rows: repeat(3, 56px);
justify-content: center;
gap: 7px;
margin: 0 auto 21px;
}
.gulum-snake__direction {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 56px;
margin: 0;
padding: 0;
appearance: none;
-webkit-appearance: none;
color: #ffffff;
background: linear-gradient(
145deg,
rgba(255, 255, 255, 0.16),
rgba(255, 255, 255, 0.07)
);
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: 14px;
outline: none;
cursor: pointer;
touch-action: manipulation;
transform: none;
transition:
background-color 0.12s ease,
border-color 0.12s ease;
}
.gulum-snake__direction:hover {
background: rgba(168, 85, 247, 0.28);
border-color: rgba(192, 132, 252, 0.45);
}
.gulum-snake__direction:active {
background: var(--snake-purple);
transform: none;
}
.gulum-snake__direction .gulum-snake__icon {
width: 27px;
height: 27px;
}
.gulum-snake__direction--up {
grid-column: 2;
grid-row: 1;
}
.gulum-snake__direction--left {
grid-column: 1;
grid-row: 2;
}
.gulum-snake__control-center {
grid-column: 2;
grid-row: 2;
width: 64px;
height: 56px;
background:
radial-gradient(
circle,
rgba(168, 85, 247, 0.3),
rgba(255, 255, 255, 0.04)
);
border-radius: 50%;
}
.gulum-snake__direction--right {
grid-column: 3;
grid-row: 2;
}
.gulum-snake__direction--down {
grid-column: 2;
grid-row: 3;
}
.gulum-snake__score-table-wrap {
padding: 16px;
text-align: left;
background: rgba(255, 255, 255, 0.055);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 15px;
}
.gulum-snake__score-table-title {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.gulum-snake__score-table-title .gulum-snake__icon {
width: 22px;
height: 22px;
color: var(--snake-yellow);
}
.gulum-snake__score-table-title h2 {
margin: 0;
padding: 0;
color: #ffffff;
font-size: 17px;
}
.gulum-snake__score-table {
overflow: hidden;
border-radius: 10px;
}
.gulum-snake__score-row {
display: grid;
grid-template-columns: 50px 1fr 1fr 1.4fr;
gap: 7px;
align-items: center;
min-height: 38px;
padding: 7px 9px;
color: var(--snake-muted);
font-size: 11px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.gulum-snake__score-row:last-child {
border-bottom: 0;
}
.gulum-snake__score-row--head {
color: #ffffff;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
background: rgba(255, 255, 255, 0.08);
}
.gulum-snake__score-empty {
padding: 17px 10px;
color: var(--snake-muted);
font-size: 12px;
text-align: center;
}
.gulum-snake__help {
margin-top: 13px;
padding: 11px 13px;
color: var(--snake-muted);
font-size: 11px;
line-height: 1.55;
background: rgba(255, 255, 255, 0.05);
border-radius: 11px;
}
@media (max-width: 560px) {
.gulum-snake {
padding: 22px 8px;
}
.gulum-snake__container {
padding: 22px 12px;
border-radius: 20px;
}
.gulum-snake__score-row {
grid-template-columns: 38px 1fr 1fr 1.25fr;
padding: 7px 5px;
font-size: 10px;
}
}
@media (max-width: 390px) {
.gulum-snake__actions {
grid-template-columns: 1fr;
}
.gulum-snake__controls {
grid-template-columns: repeat(3, 58px);
grid-template-rows: repeat(3, 52px);
}
.gulum-snake__direction,
.gulum-snake__control-center {
width: 58px;
height: 52px;
}
.gulum-snake__score-box strong {
font-size: 21px;
}
.gulum-snake__score-table-wrap {
padding: 13px 8px;
}
}
@media (prefers-reduced-motion: reduce) {
.gulum-snake__action-button,
.gulum-snake__direction,
.gulum-snake__overlay {
transition: none;
}
}
(() => {
"use strict";
const gameRoot = document.querySelector(".gulum-snake");
if (!gameRoot) {
return;
}
const canvas =
gameRoot.querySelector("#gulumSnakeCanvas");
const context =
canvas.getContext("2d");
const scoreElement =
gameRoot.querySelector("#gulumSnakeScore");
const bestScoreElement =
gameRoot.querySelector("#gulumSnakeBestScore");
const lengthElement =
gameRoot.querySelector("#gulumSnakeLength");
const statusElement =
gameRoot.querySelector("#gulumSnakeStatus");
const startButton =
gameRoot.querySelector("#gulumSnakeStartButton");
const startText =
gameRoot.querySelector("#gulumSnakeStartText");
const restartButton =
gameRoot.querySelector("#gulumSnakeRestartButton");
const overlay =
gameRoot.querySelector("#gulumSnakeOverlay");
const overlayTitle =
gameRoot.querySelector("#gulumSnakeOverlayTitle");
const overlayText =
gameRoot.querySelector("#gulumSnakeOverlayText");
const scoreRows =
gameRoot.querySelector("#gulumSnakeScoreRows");
const directionButtons = Array.from(
gameRoot.querySelectorAll(
".gulum-snake__direction"
)
);
const GRID_SIZE = 20;
const CELL_COUNT = 20;
const INITIAL_SPEED = 145;
const MINIMUM_SPEED = 72;
const STORAGE_BEST_KEY =
"gulumSnakeBestScore";
const STORAGE_HISTORY_KEY =
"gulumSnakeScoreHistory";
let snake = [];
let food = {
x: 14,
y: 10
};
let direction = {
x: 1,
y: 0
};
let nextDirection = {
x: 1,
y: 0
};
let score = 0;
let gameSpeed = INITIAL_SPEED;
let gameLoop = null;
let gameStarted = false;
let gameRunning = false;
let gameOver = false;
let directionLocked = false;
let touchStartX = 0;
let touchStartY = 0;
function initializeGame() {
stopGameLoop();
snake = [
{ x: 8, y: 10 },
{ x: 7, y: 10 },
{ x: 6, y: 10 }
];
food = createFood();
direction = {
x: 1,
y: 0
};
nextDirection = {
x: 1,
y: 0
};
score = 0;
gameSpeed = INITIAL_SPEED;
gameStarted = false;
gameRunning = false;
gameOver = false;
directionLocked = false;
scoreElement.textContent = "0";
lengthElement.textContent =
String(snake.length);
startText.textContent =
"Oyunu Başlat";
statusElement.textContent =
"Başlamak için “Oyunu Başlat” düğmesine bas.";
showOverlay(
"Yılan Oyunu",
"Başlamak için düğmeye bas"
);
updateBestScore();
renderScoreHistory();
drawGame();
}
function startOrPauseGame() {
if (gameOver) {
initializeGame();
startGame();
return;
}
if (!gameStarted) {
startGame();
return;
}
if (gameRunning) {
pauseGame();
} else {
resumeGame();
}
}
function startGame() {
gameStarted = true;
gameRunning = true;
gameOver = false;
startText.textContent =
"Oyunu Duraklat";
statusElement.textContent =
"Yılan hareket ediyor. Yemleri toplamaya devam et.";
hideOverlay();
startGameLoop();
}
function pauseGame() {
if (!gameStarted || gameOver) {
return;
}
gameRunning = false;
stopGameLoop();
startText.textContent =
"Devam Et";
statusElement.textContent =
"Oyun duraklatıldı.";
showOverlay(
"Oyun Duraklatıldı",
"Devam etmek için düğmeye bas"
);
}
function resumeGame() {
if (gameOver) {
return;
}
gameRunning = true;
startText.textContent =
"Oyunu Duraklat";
statusElement.textContent =
"Oyun devam ediyor.";
hideOverlay();
startGameLoop();
}
function restartGame() {
initializeGame();
startGame();
}
function startGameLoop() {
stopGameLoop();
gameLoop = window.setInterval(
updateGame,
gameSpeed
);
}
function stopGameLoop() {
if (gameLoop !== null) {
window.clearInterval(gameLoop);
gameLoop = null;
}
}
function updateGame() {
if (!gameRunning) {
return;
}
direction = {
...nextDirection
};
const head = {
x: snake[0].x + direction.x,
y: snake[0].y + direction.y
};
const hitWall =
head.x < 0 ||
head.x >= CELL_COUNT ||
head.y < 0 ||
head.y >= CELL_COUNT;
const hitSelf = snake.some(segment => {
return (
segment.x === head.x &&
segment.y === head.y
);
});
if (hitWall || hitSelf) {
finishGame();
return;
}
snake.unshift(head);
const ateFood =
head.x === food.x &&
head.y === food.y;
if (ateFood) {
score += 10;
scoreElement.textContent =
String(score);
lengthElement.textContent =
String(snake.length);
food = createFood();
increaseSpeed();
} else {
snake.pop();
}
directionLocked = false;
drawGame();
}
function increaseSpeed() {
const newSpeed = Math.max(
MINIMUM_SPEED,
INITIAL_SPEED - Math.floor(score / 30) * 8
);
if (newSpeed !== gameSpeed) {
gameSpeed = newSpeed;
startGameLoop();
}
}
function finishGame() {
gameRunning = false;
gameOver = true;
stopGameLoop();
startText.textContent =
"Tekrar Oyna";
statusElement.textContent =
`Oyun bitti. Toplam skorun: ${score}.`;
showOverlay(
"Oyun Bitti",
`Skor: ${score}`
);
saveScore();
updateBestScore();
renderScoreHistory();
drawGame();
}
function setDirection(directionName) {
if (!gameStarted && !gameOver) {
startGame();
}
if (!gameRunning || directionLocked) {
return;
}
const directions = {
up: {
x: 0,
y: -1
},
down: {
x: 0,
y: 1
},
left: {
x: -1,
y: 0
},
right: {
x: 1,
y: 0
}
};
const selected =
directions[directionName];
if (!selected) {
return;
}
const isOpposite =
selected.x === -direction.x &&
selected.y === -direction.y;
if (isOpposite) {
return;
}
nextDirection = selected;
directionLocked = true;
}
function createFood() {
let newFood;
do {
newFood = {
x: Math.floor(
Math.random() * CELL_COUNT
),
y: Math.floor(
Math.random() * CELL_COUNT
)
};
} while (
snake.some(segment => {
return (
segment.x === newFood.x &&
segment.y === newFood.y
);
})
);
return newFood;
}
function drawGame() {
const size = canvas.width;
const cellSize = size / CELL_COUNT;
context.clearRect(
0,
0,
size,
size
);
drawBackground(
size,
cellSize
);
drawFood(
food.x,
food.y,
cellSize
);
snake.forEach((segment, index) => {
drawSnakeSegment(
segment,
index,
cellSize
);
});
}
function drawBackground(size, cellSize) {
const backgroundGradient =
context.createLinearGradient(
0,
0,
size,
size
);
backgroundGradient.addColorStop(
0,
"#11142a"
);
backgroundGradient.addColorStop(
1,
"#17102d"
);
context.fillStyle =
backgroundGradient;
context.fillRect(
0,
0,
size,
size
);
context.strokeStyle =
"rgba(255,255,255,0.035)";
context.lineWidth = 1;
for (
let index = 0;
index {
context.beginPath();
context.arc(
eye.x,
eye.y,
size * 0.1,
0,
Math.PI * 2
);
context.fill();
});
context.fillStyle = "#111827";
[firstEye, secondEye].forEach(eye => {
context.beginPath();
context.arc(
eye.x,
eye.y,
size * 0.045,
0,
Math.PI * 2
);
context.fill();
});
}
function roundRect(
drawingContext,
x,
y,
width,
height,
radius
) {
drawingContext.beginPath();
drawingContext.roundRect(
x,
y,
width,
height,
radius
);
}
function showOverlay(title, text) {
overlayTitle.textContent = title;
overlayText.textContent = text;
overlay.classList.remove(
"is-hidden"
);
}
function hideOverlay() {
overlay.classList.add(
"is-hidden"
);
}
function saveScore() {
const history =
getScoreHistory();
history.unshift({
score,
length: snake.length,
date: formatDate(
new Date()
)
});
const trimmedHistory =
history.slice(0, 5);
try {
localStorage.setItem(
STORAGE_HISTORY_KEY,
JSON.stringify(trimmedHistory)
);
} catch (error) {
return;
}
const previousBest =
getBestScore();
if (score > previousBest) {
try {
localStorage.setItem(
STORAGE_BEST_KEY,
String(score)
);
} catch (error) {
return;
}
}
}
function getScoreHistory() {
try {
const stored =
localStorage.getItem(
STORAGE_HISTORY_KEY
);
const parsed =
stored
? JSON.parse(stored)
: [];
return Array.isArray(parsed)
? parsed
: [];
} catch (error) {
return [];
}
}
function getBestScore() {
try {
return Number(
localStorage.getItem(
STORAGE_BEST_KEY
)
) || 0;
} catch (error) {
return 0;
}
}
function updateBestScore() {
bestScoreElement.textContent =
String(getBestScore());
}
function renderScoreHistory() {
const history =
getScoreHistory();
scoreRows.innerHTML = "";
if (history.length === 0) {
scoreRows.innerHTML = `
Henüz kaydedilmiş skor bulunmuyor.
`;
return;
}
const fragment =
document.createDocumentFragment();
history.forEach((record, index) => {
const row =
document.createElement("div");
row.className =
"gulum-snake__score-row";
row.innerHTML = `
${index + 1}
${record.score}
${record.length}
${escapeHtml(record.date)}
`;
fragment.appendChild(row);
});
scoreRows.appendChild(fragment);
}
function formatDate(date) {
const day =
String(date.getDate()).padStart(
2,
"0"
);
const month =
String(
date.getMonth() + 1
).padStart(2, "0");
const hour =
String(date.getHours()).padStart(
2,
"0"
);
const minute =
String(date.getMinutes()).padStart(
2,
"0"
);
return `${day}.${month} ${hour}:${minute}`;
}
function escapeHtml(value) {
return String(value)
.replaceAll("&", "&")
.replaceAll("", ">")
.replaceAll('"', "")
.replaceAll("'", "'");
}
function handleKeyboard(event) {
const keyMap = {
ArrowUp: "up",
w: "up",
W: "up",
ArrowDown: "down",
s: "down",
S: "down",
ArrowLeft: "left",
a: "left",
A: "left",
ArrowRight: "right",
d: "right",
D: "right"
};
if (event.key === " ") {
event.preventDefault();
startOrPauseGame();
return;
}
const selectedDirection =
keyMap[event.key];
if (!selectedDirection) {
return;
}
event.preventDefault();
setDirection(selectedDirection);
}
function handleTouchStart(event) {
const touch =
event.changedTouches[0];
touchStartX = touch.clientX;
touchStartY = touch.clientY;
}
function handleTouchEnd(event) {
const touch =
event.changedTouches[0];
const differenceX =
touch.clientX - touchStartX;
const differenceY =
touch.clientY - touchStartY;
const minimumSwipeDistance = 24;
if (
Math.abs(differenceX) <
minimumSwipeDistance &&
Math.abs(differenceY) <
minimumSwipeDistance
) {
return;
}
if (
Math.abs(differenceX) >
Math.abs(differenceY)
) {
setDirection(
differenceX > 0
? "right"
: "left"
);
} else {
setDirection(
differenceY > 0
? "down"
: "up"
);
}
}
startButton.addEventListener(
"click",
startOrPauseGame
);
restartButton.addEventListener(
"click",
restartGame
);
directionButtons.forEach(button => {
button.addEventListener(
"pointerdown",
event => {
event.preventDefault();
setDirection(
button.dataset.direction
);
}
);
});
canvas.addEventListener(
"touchstart",
handleTouchStart,
{
passive: true
}
);
canvas.addEventListener(
"touchend",
handleTouchEnd,
{
passive: true
}
);
document.addEventListener(
"keydown",
handleKeyboard
);
initializeGame();
})();