Bileklik Uzatma Oyunu
Lütfen aşağıdaki kodu kopyalayın ve html çalıştırıcılarına yükleyin.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style>
body {
background-color: #121212;
color: white;
font-family: 'Arial', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
overflow: hidden;
touch-action: none; /* Mobilde kaydırmayı engelle */
}
h1 {
color: #00ff88;
margin: 10px 0;
font-size: 24px;
text-transform: uppercase;
letter-spacing: 2px;
}
#game-area {
position: relative;
width: 90vw;
max-width: 400px;
height: 90vw;
max-height: 400px;
background: #222;
border: 4px solid #ff0055; /* Akma Rengi */
border-radius: 10px;
box-shadow: 0 0 20px rgba(255, 0, 85, 0.3);
}
canvas {
display: block;
width: 100%;
height: 100%;
}
/* Skor Tablosu */
.score-board {
font-size: 20px;
margin-bottom: 10px;
font-weight: bold;
}
#score { color: #ff0055; }
/* Menü Ekranları (Başla / Bitti) */
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 10;
text-align: center;
padding: 20px;
box-sizing: border-box;
}
.hidden { display: none !important; }
.btn {
background: linear-gradient(45deg, #ff0055, #ff5500);
color: white;
border: none;
padding: 15px 30px;
font-size: 18px;
border-radius: 50px;
cursor: pointer;
font-weight: bold;
margin-top: 20px;
box-shadow: 0 5px 15px rgba(255, 0, 85, 0.4);
transition: transform 0.1s;
}
.btn:active { transform: scale(0.95); }
/* İletişim Kutusu */
.contact-box {
background: rgba(255, 255, 255, 0.1);
border: 1px solid #444;
padding: 15px;
border-radius: 15px;
width: 100%;
margin-top: 20px;
}
.mail-btn {
display: block;
background: #00aaff;
color: white;
text-decoration: none;
padding: 10px;
border-radius: 8px;
font-weight: bold;
margin-bottom: 10px;
}
.info-text {
font-size: 13px;
color: #ddd;
margin: 0;
}
</style>
</head>
<body>
<h1>UZAYAN BİLEKLİK 🐍</h1>
<div class="score-board">UZUNLUK: <span id="score">0</span> CM</div>
<div id="game-area">
<canvas id="gameCanvas" width="400" height="400"></canvas>
<div id="start-screen" class="overlay">
<h2 style="color: #00ff88;">LASTİKLERİ TOPLA!</h2>
<p style="color: #ccc;">Kendine çarpma, duvarlara dikkat et.</p>
<p style="font-size: 12px; color: #777;">(PC: Yön Tuşları / Mobil: Parmağını Kaydır)</p>
<button class="btn" onclick="startGame()">BAŞLA ▶️</button>
</div>
<div id="game-over-screen" class="overlay hidden">
<h2 style="color: #ff0055;">BİLEKLİK KOPTU! 😱</h2>
<p>Skorun: <span id="finalScore" style="color: #00ff88; font-weight: bold;">0</span> CM</p>
<div class="contact-box">
<p style="margin: 0 0 10px 0; font-size: 14px;">Gerçek bir bileklik ister misin?</p>
<a href="mailto:akmakolektifsiparis@gmail.com" class="mail-btn">📧 Mail At: Sipariş Ver</a>
<p class="info-text">📍 Veya Satış Ofislerimize Gel<br>(Okulda Bul Bizi 😉)</p>
</div>
<button class="btn" onclick="startGame()" style="margin-top: 15px; padding: 10px 20px; font-size: 16px;">TEKRAR DENE 🔄</button>
</div>
</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// Oyun Ayarları
const tileCount = 20; // Izgara sayısı (20x20)
const tileSize = canvas.width / tileCount;
let speed = 7; // Oyun hızı (Bunu artırırsan hızlanır)
let headX = 10;
let headY = 10;
let snakeParts = [];
let tailLength = 2;
let appleX = 5;
let appleY = 5;
let xVelocity = 0;
let yVelocity = 0;
let score = 0;
let gameInterval;
// Renkler (Akma Kolektif Tarzı)
const colors = ["#ff0055", "#00ff88", "#00aaff", "#ffff00", "#ff00ff"];
let currentColor = colors[0];
// Mobil Kontrolleri İçin
let touchStartX = 0;
let touchStartY = 0;
function startGame() {
document.getElementById('start-screen').classList.add('hidden');
document.getElementById('game-over-screen').classList.add('hidden');
// Sıfırla
headX = 10; headY = 10;
snakeParts = [];
tailLength = 2;
score = 0;
xVelocity = 0; yVelocity = 0;
document.getElementById('score').innerText = score;
clearInterval(gameInterval);
gameInterval = setInterval(drawGame, 1000 / speed);
}
function drawGame() {
changeSnakePosition();
let result = isGameOver();
if (result) return;
clearScreen();
checkAppleCollision();
drawApple();
drawSnake();
}
function isGameOver() {
let gameOver = false;
// Duvara çarpma kontrolü
if (headX < 0 || headX === tileCount || headY < 0 || headY === tileCount) {
gameOver = true;
}
// Kendine çarpma kontrolü
// Hareket etmiyorsa (başlangıçta) çarpma sayma
if (xVelocity === 0 && yVelocity === 0) gameOver = false;
else {
for (let i = 0; i < snakeParts.length; i++) {
let part = snakeParts[i];
if (part.x === headX && part.y === headY) {
gameOver = true;
break;
}
}
}
if (gameOver) {
document.getElementById('finalScore').innerText = score;
document.getElementById('game-over-screen').classList.remove('hidden');
clearInterval(gameInterval);
}
return gameOver;
}
function clearScreen() {
ctx.fillStyle = '#222'; // Arka plan
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function drawSnake() {
// Kuyruk parçalarını çiz
for (let i = 0; i < snakeParts.length; i++) {
let part = snakeParts[i];
// Gradyan efektli yılan
ctx.fillStyle = '#ff0055';
ctx.beginPath();
ctx.arc(part.x * tileSize + tileSize/2, part.y * tileSize + tileSize/2, tileSize/2 - 2, 0, Math.PI * 2);
ctx.fill();
}
snakeParts.push(new SnakePart(headX, headY));
if (snakeParts.length > tailLength) {
snakeParts.shift();
}
// Kafayı çiz
ctx.fillStyle = '#00ff88'; // Kafa rengi farklı olsun
ctx.beginPath();
ctx.arc(headX * tileSize + tileSize/2, headY * tileSize + tileSize/2, tileSize/2 - 2, 0, Math.PI * 2);
ctx.fill();
}
function drawApple() {
ctx.fillStyle = currentColor;
// Elma yerine yuvarlak lastik çizimi
ctx.beginPath();
ctx.lineWidth = 4;
ctx.strokeStyle = currentColor;
ctx.arc(appleX * tileSize + tileSize/2, appleY * tileSize + tileSize/2, tileSize/2 - 4, 0, Math.PI * 2);
ctx.stroke();
}
function checkAppleCollision() {
if (appleX === headX && appleY === headY) {
appleX = Math.floor(Math.random() * tileCount);
appleY = Math.floor(Math.random() * tileCount);
tailLength++;
score++;
document.getElementById('score').innerText = score;
// Rastgele yeni renk seç
currentColor = colors[Math.floor(Math.random() * colors.length)];
}
}
function changeSnakePosition() {
headX = headX + xVelocity;
headY = headY + yVelocity;
}
// Yılan Parçası Sınıfı
class SnakePart {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
// --- KONTROLLER ---
// KLAVYE (PC)
document.body.addEventListener('keydown', keyDown);
function keyDown(event) {
// Yukarı
if (event.keyCode == 38) {
if (yVelocity == 1) return;
yVelocity = -1; xVelocity = 0;
}
// Aşağı
if (event.keyCode == 40) {
if (yVelocity == -1) return;
yVelocity = 1; xVelocity = 0;
}
// Sol
if (event.keyCode == 37) {
if (xVelocity == 1) return;
yVelocity = 0; xVelocity = -1;
}
// Sağ
if (event.keyCode == 39) {
if (xVelocity == -1) return;
yVelocity = 0; xVelocity = 1;
}
}
// DOKUNMATİK (MOBİL/iPAD)
const gameArea = document.getElementById('game-area');
gameArea.addEventListener('touchstart', function(e) {
touchStartX = e.changedTouches[0].screenX;
touchStartY = e.changedTouches[0].screenY;
}, false);
gameArea.addEventListener('touchmove', function(e) {
e.preventDefault(); // Sayfayı kaydırmayı engelle
}, { passive: false });
gameArea.addEventListener('touchend', function(e) {
let touchEndX = e.changedTouches[0].screenX;
let touchEndY = e.changedTouches[0].screenY;
handleSwipe(touchStartX, touchStartY, touchEndX, touchEndY);
}, false);
function handleSwipe(startX, startY, endX, endY) {
let diffX = endX - startX;
let diffY = endY - startY;
if (Math.abs(diffX) > Math.abs(diffY)) {
// Yatay Hareket
if (diffX > 0) { // Sağ
if (xVelocity == -1) return;
yVelocity = 0; xVelocity = 1;
} else { // Sol
if (xVelocity == 1) return;
yVelocity = 0; xVelocity = -1;
}
} else {
// Dikey Hareket
if (diffY > 0) { // Aşağı
if (yVelocity == -1) return;
yVelocity = 1; xVelocity = 0;
} else { // Yukarı
if (yVelocity == 1) return;
yVelocity = -1; xVelocity = 0;
}
}
}
</script>
</body>
</html>
UZAYAN BİLEKLİK 🐍
UZUNLUK: 0 CM
Yorumlar
Yorum Gönder