Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Knk Browser Minecraft</title>
<style>
body { margin:0; overflow:hidden; background:#87CEEB; font-family:Arial; }
canvas { display:block; }
#ui {
position:absolute; top:10px; left:10px; color:white; background:rgba(0,0,0,0.5);
padding:10px; border-radius:8px; font-size:18px; pointer-events:none;
}
#info { position:absolute; bottom:10px; left:10px; color:white; background:rgba(0,0,0,0.6); padding:8px; border-radius:5px; }
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="ui">WASD: Hareket | Fare Sol: Kır | Fare Sağ: Yerleştir | 1-5: Blok seç</div>
<div id="info">Seçili: Toprak (99)</div>
<script>
// ============ KNK BROWSER MINECRAFT ============
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
const info = document.getElementById('info');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const BLOCK = 32;
const WORLD_W = 500;
const WORLD_H = 100;
const world = Array(WORLD_H).fill().map(() => Array(WORLD_W).fill(0));
const blocks = [
{name:"Hava", color:""},
{name:"Toprak", color:"#8B4513"},
{name:"Çim", color:"#228B22"},
{name:"Taş", color:"#808080"},
{name:"Ağaç", color:"#8B5A2B"},
{name:"Yaprak", color:"#006400"}
];
let inventory = [0, 999, 999, 999, 999, 999];
let selected = 1;
// Perlin benzeri basit dünya üretimi
function generate() {
let yBase = 60;
for(let x = 0; x < WORLD_W; x++) {
yBase += Math.sin(x * 0.05) * 3 + (Math.random()-0.5)*2;
yBase = Math.min(Math.max(yBase, 40), 75);
for(let y = 0; y < WORLD_H; y++) {
if(y > yBase + 4) world[y][x] = 3; // taş
else if(y > yBase) world[y][x] = 1; // toprak
else if(y == yBase) world[y][x] = 2; // çim
}
// Ağaçlar
if(Math.random() < 0.04 && yBase < WORLD_H - 10) {
let h = 5 + Math.floor(Math.random()*4);
for(let i = 1; i <= h; i++) if(yBase - i >= 0) world[yBase - i][x] = 4;
for(let ly = -3; ly <= 0; ly++) {
for(let lx = -2; lx <= 2; lx++) {
let tx = x + lx, ty = yBase - h + ly;
if(tx >= 0 && tx < WORLD_W && ty >= 0 && ty < WORLD_H) {
if(world[ty][tx] == 0) world[ty][tx] = 5;
}
}
}
}
}
}
generate();
// Oyuncu
let px = WORLD_W * BLOCK / 2;
let py = 100;
let vx = 0, vy = 0;
let onGround = false;
// Kamera
let camX = 0;
// Input
const keys = {};
window.onkeydown = e => keys[e.key.toLowerCase()] = true;
window.onkeyup = e => keys[e.key.toLowerCase()] = false;
window.onkeypress = e => {
if(e.key >= '1' && e.key <= '5') {
selected = parseInt(e.key);
updateInfo();
}
};
canvas.onmousedown = e => {
const rect = canvas.getBoundingClientRect();
const mx = e.clientX - rect.left;
const my = e.clientY - rect.top;
const bx = Math.floor((camX + mx) / BLOCK);
const by = Math.floor(my / BLOCK);
if(bx < 0 || bx >= WORLD_W || by < 0 || by >= WORLD_H) return;
if(e.button === 0) { // sol tıklama = kır
if(world[by][bx] !== 0) {
inventory[world[by][bx]]++;
world[by][bx] = 0;
updateInfo();
}
}
if(e.button === 2) { // sağ tıklama = yerleştir
if(world[by][bx] === 0 && inventory[selected] > 0)/binary {
world[by][bx] = selected;
inventory[selected]--;
updateInfo();
}
}
};
canvas.oncontextmenu = e => e.preventDefault();
function updateInfo() {
info.textContent = `Seçili: \( {blocks[selected].name} ( \){inventory[selected]})`;
}
updateInfo();
// Ana döngü
function loop() {
// Fizik
if(keys['a']) vx = -4;
else if(keys['d']) vx = 4;
else vx *= 0.8;
if(keys[' '] && onGround) { vy = -12; onGround = false; }
vy += 0.6; // yerçekimi
px += vx;
py += vy;
// Çarpışma (basit)
const playerLeft = Math.floor(px / BLOCK);
const playerRight = Math.floor((px + 24) / BLOCK);
const playerTop = Math.floor(py / BLOCK);
const playerBottom = Math.floor((py + 48) / BLOCK);
onGround = false;
for(let x = playerLeft; x <= playerRight; x++) {
for(let y = playerTop; y <= playerBottom; y++) {
if(x < 0 || x >= WORLD_W || y >= WORLD_H) continue;
if(world[y][x] !== 0) {
// Basit çarpışma düzeltmesi
if(vy > 0 && playerBottom > y) { py = y * BLOCK - 48; vy = 0; onGround = true; }
if(vy < 0 && playerTop < y + 1) { py = (y + 1) * BLOCK; vy = 0; }
}
}
}
// Kamera
camX = px - canvas.width / 2 + 12;
// Çizim
ctx.fillStyle = "#87CEEB";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Gece-gündüz efekti
const time = Date.now() / 5000;
const night = (Math.sin(time) + 1) / 2 * 120;
ctx.fillStyle = `rgba(0,0,50,${night/255})`;
ctx.fillRect(0,0,canvas.width,canvas.height);
// Dünya çiz
const startX = Math.floor(camX / BLOCK);
const endX = startX + Math.ceil(canvas.width / BLOCK) + 2;
for(let x = Math.max(0, startX); x < Math.min(WORLD_W, endX); x++) {
for(let y = 0; y < WORLD_H; y++) {
const type = world[y][x];
if(type === 0) continue;
ctx.fillStyle = blocks[type].color;
ctx.fillRect(x * BLOCK - camX, y * BLOCK, BLOCK, BLOCK);
ctx.strokeStyle = "#000";
ctx.lineWidth = 1;
ctx.strokeRect(x * BLOCK - camX, y * BLOCK, BLOCK, BLOCK);
}
}
// Oyuncu
ctx.fillStyle = "#FFB6C1";
ctx.fillRect(px - camX, py, 24, 48);
ctx.fillStyle = "#000";
ctx.fillRect(px - camX + 4, py + 8, 16, 12); // kafa
requestAnimationFrame(loop);
}
loop();
window.onresize = () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
};
</script>
</body>
</html>Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
1
Requests
1
Domains
7KB
Transfer Size
7KB
Content Size
69.0ms
Dom Content Loaded
112.0ms
First Paint
70.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...