Meta Description" name="description" />
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Karanlık Labirent</title>
<style>
body { margin: 0; background: #000; color: white; font-family: sans-serif; overflow: hidden; touch-action: none; }
#game-container { position: relative; width: 100vw; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
canvas { background: #111; border: 2px solid #333; max-width: 95%; max-height: 70%; }
.controls { display: grid; grid-template-columns: repeat(3, 60px); gap: 10px; margin-top: 20px; }
button { width: 60px; height: 60px; background: #222; color: white; border: 1px solid #444; border-radius: 10px; font-weight: bold; }
#jumpscare {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: url('https://i.imgur.com/v8tT9B0.jpeg') center/cover;
display: none; z-index: 100;
}
.status { margin-bottom: 10px; color: #ff0000; font-size: 14px; text-shadow: 0 0 5px #000; }
</style>
</head>
<body>
<div id="game-container">
<div class="status">ÇIKIŞI BUL... ARKANA BAKMA.</div>
<canvas id="mazeCanvas" width="300" height="300"></canvas>
<div class="controls">
<div></div><button onclick="move(0, -1)">↑</button><div></div>
<button onclick="move(-1, 0)">←</button><button onclick="move(0, 1)">↓</button><button onclick="move(1, 0)">→</button>
</div>
</div>
<div id="jumpscare"></div>
<script>
const canvas = document.getElementById('mazeCanvas');
const ctx = canvas.getContext('2d');
const jumpDiv = document.getElementById('jumpscare');
const size = 15; // 15x15 labirent
const cellSize = 20;
let player = { x: 1, y: 1 };
let exit = { x: 13, y: 13 };
let monster = { x: 10, y: 5 }; // Görünmez canavar
// 0: Yol, 1: Duvar
const maze = [
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,0,0,0,1,0,0,0,0,0,0,0,0,0,1],
[1,0,1,0,1,0,1,1,1,1,1,1,1,0,1],
[1,0,1,0,0,0,0,0,0,0,1,0,0,0,1],
[1,0,1,1,1,1,1,1,1,0,1,0,1,1,1],
[1,0,0,0,0,0,0,0,1,0,0,0,0,0,1],
[1,1,1,1,1,0,1,1,1,1,1,1,1,0,1],
[1,0,0,0,1,0,0,0,0,0,0,0,1,0,1],
[1,0,1,0,1,1,1,1,1,1,1,0,1,0,1],
[1,0,1,0,0,0,0,0,0,0,0,0,1,0,1],
[1,0,1,1,1,1,1,0,1,1,1,1,1,0,1],
[1,0,0,0,0,0,1,0,0,0,0,0,0,0,1],
[1,1,1,1,1,0,1,1,1,1,1,1,1,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
];
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for(let y=0; y<size; y++) {
for(let x=0; x<size; x++) {
// Sadece oyuncunun etrafını göster (Karanlık efekti)
let dist = Math.hypot(x - player.x, y - player.y);
if (dist < 3) {
if(maze[y][x] === 1) ctx.fillStyle = "#444";
else ctx.fillStyle = "#222";
if(x === exit.x && y === exit.y) ctx.fillStyle = "#00ff00";
ctx.fillRect(x*cellSize, y*cellSize, cellSize, cellSize);
}
}
}
// Oyuncuyu çiz
ctx.fillStyle = "#fff";
ctx.beginPath();
ctx.arc(player.x*cellSize + 10, player.y*cellSize + 10, 5, 0, Math.PI*2);
ctx.fill();
}
function move(dx, dy) {
let newX = player.x + dx;
let newY = player.y + dy;
if(maze[newY][newX] === 0) {
player.x = newX;
player.y = newY;
// Rastgele korkutma ihtimali veya canavara yakalanma
if(player.x === monster.x && player.y === monster.y) {
triggerJumpscare();
}
}
if(player.x === exit.x && player.y === exit.y) {
alert("KAÇTIN! Ama hala güvende değilsin...");
location.reload();
}
draw();
}
function triggerJumpscare() {
jumpDiv.style.display = 'block';
// Titreşim (destekleyen cihazlarda)
if (navigator.vibrate) navigator.vibrate([500, 110, 500]);
setTimeout(() => {
jumpDiv.style.display = 'none';
player = { x: 1, y: 1 };
draw();
}, 2000);
}
draw();
</script>
</body>
</html>
1
1
5KB
5KB
106.0ms
116.0ms
106.0ms