GD Studio

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>GD Studio</title>
<style>
*{box-sizing:border-box}
body{margin:0;background:#101020;color:white;font-family:Arial;text-align:center}
header{padding:16px;background:#202044;color:#00ffff;font-size:26px;font-weight:bold}
nav{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;padding:12px}
button,select,input{padding:10px;border:0;border-radius:8px;margin:3px}
button{background:#00d9ff;color:#101020;font-weight:bold;cursor:pointer}
button:hover{background:#fff}
.panel{background:#20203c;border-radius:12px;padding:12px;margin:10px}
canvas{width:100%;max-width:900px;background:#080817;border:2px solid #00ffff;border-radius:10px;touch-action:manipulation}
#editor{display:none}
.small{font-size:13px;color:#aaa}
</style>
</head>
<body>
<header>◇ GD STUDIO ◇</header>

<nav>
<button onclick="show('game')">🎮 Oyna</button>
<button onclick="show('editor')">🧱 Bölüm oluştur</button>
<button onclick="show('skins')">🎨 Karakter</button>
<button onclick="show('settings')">⚙️ Ayarlar</button>
</nav>

<section id="game" class="panel">
<h2 id="levelName">NEON START</h2>
<select id="levels" onchange="selectLevel()">
<option value="0">1. Neon Start</option>
<option value="1">2. Pixel Rush</option>
<option value="2">3. Chaos Circuit</option>
</select>
<br>
<canvas id="gameCanvas" width="900" height="300"></canvas>
<p id="status">Başlamak için Oyna düğmesine bas!</p>
<button onclick="start()">▶ OYNA</button>
<button onclick="restart()">↻ Yeniden başlat</button>
<p>Dokun veya SPACE tuşuyla zıpla!</p>
<p class="small">İlerleme: <span id="progress">0</span>%</p>
</section>

<section id="editor" class="panel">
<h2>🧱 BÖLÜM OLUŞTURUCU</h2>
<input id="customName" value="Benim Bölümüm" placeholder="Bölüm adı">
<br>
<button onclick="add('spike')">▲ Diken</button>
<button onclick="add('block')">■ Blok</button>
<button onclick="add('double')">▲▲ Çift diken</button>
<button onclick="add('orb')">◉ Küre</button>
<button onclick="add('pad')">⬆ Zıplama pedi</button>
<button onclick="clearBlocks()">🗑 Temizle</button>
<br>
<canvas id="editorCanvas" width="900" height="220"></canvas>
<br>
<button onclick="saveLevel()">💾 Bölümü kaydet</button>
<button onclick="playCustom()">▶ Bölümü test et</button>
<p id="editStatus">Engel eklemek için düğmelere bas!</p>
</section>

<section id="skins" class="panel" style="display:none">
<h2>🎨 Karakterini özelleştir</h2>
<p>Karakter rengi</p>
<input id="cubeColor" type="color" value="#00ffff" onchange="draw()">
<p>Karakter şekli</p>
<select id="shape" onchange="draw()">
<option value="square">Kare</option>
<option value="diamond">Elmas</option>
<option value="circle">Daire</option>
</select>
<p>Karakter önizlemesi</p>
<div id="preview" style="font-size:65px;color:#00ffff">■</div>
<button onclick="updateSkin()">Uygula</button>
</section>

<section id="settings" class="panel" style="display:none">
<h2>⚙️ Ayarlar</h2>
<label>Oyun hızı <input id="speed" type="range" min="3" max="12" value="6"></label>
<br>
<label><input id="sound" type="checkbox" checked> Ses açık</label>
<br>
<label><input id="trail" type="checkbox" checked> Neon izi</label>
<br>
<button onclick="saveSettings()">Ayarları kaydet</button>
</section>

<script>
const canvas=document.getElementById('gameCanvas');
const ctx=canvas.getContext('2d');
const ec=document.getElementById('editorCanvas');
const ex=ec.getContext('2d');

let running=false,raf=0,frame=0,score=0;
let player={x:100,y:220,vy:0,size:30,ground:true};
let obstacles=[],custom=[],customMode=false;
let color='#00ffff',shape='square';
let level=0;
const ground=250;

const presets=[
[{x:400,type:'spike'},{x:650,type:'block'},{x:900,type:'double'},{x:1200,type:'spike'},{x:1500,type:'block'}],
[{x:350,type:'double'},{x:550,type:'spike'},{x:800,type:'block'},{x:1050,type:'double'},{x:1400,type:'spike'}],
[{x:300,type:'spike'},{x:500,type:'double'},{x:700,type:'block'},{x:950,type:'double'},{x:1150,type:'spike'},{x:1400,type:'block'}]
];

function show(id){
['game','editor','skins','settings'].forEach(x=>document.getElementById(x).style.display=x===id?'block':'none');
if(id==='editor')drawEditor();
if(id==='skins')updateSkin();
}

function selectLevel(){
level=+document.getElementById('levels').value;
document.getElementById('levelName').textContent=['NEON START','PIXEL RUSH','CHAOS CIRCUIT'][level];
restart();
}

function start(){
if(running)return;
if(score===0)restart();
running=true;
document.getElementById('status').textContent='Oyun başladı!';
loop();
}

function restart(){
running=false;
cancelAnimationFrame(raf);
frame=0;score=0;
player.y=ground-player.size;
player.vy=0;player.ground=true;
obstacles=(customMode?custom:presets[level]).map(o=>({...o}));
draw();
document.getElementById('progress').textContent='0';
document.getElementById('status').textContent='Hazır! Oynamak için bas.';
}

function jump(){
if(!running){start();return}
if(player.ground){
player.vy=-12;
player.ground=false;
}
}

document.addEventListener('keydown',e=>{
if(e.code==='Space'||e.code==='ArrowUp'){
e.preventDefault();jump();
}
});
canvas.addEventListener('pointerdown',jump);

function loop(){
if(!running)return;
const speed=+document.getElementById('speed').value;
frame++;
score+=speed/10;

player.vy+=0.65;
player.y+=player.vy;
if(player.y>=ground-player.size){
player.y=ground-player.size;
player.vy=0;player.ground=true;
}

obstacles.forEach(o=>{
o.x-=speed;
if(o.type==='orb'||o.type==='pad')return;
let w=o.type==='double'?55:30;
let h=o.type==='block'?40:35;
let oy=o.type==='block'?ground-h:ground-h;
if(player.x+player.size-5>o.x&&player.x+5<o.x+w&&player.y+player.size-4>oy){
running=false;
document.getElementById('status').textContent='💥 Çarptın! Yeniden başlat!';
}
});

if(obstacles.length&&obstacles[obstacles.length-1].x<-80&&score>100){
running=false;
document.getElementById('status').textContent='🏆 BÖLÜM TAMAMLANDI!';
}

document.getElementById('progress').textContent=Math.min(100,Math.floor(score/15));
draw();
if(running)raf=requestAnimationFrame(loop);
}

function draw(){
ctx.clearRect(0,0,900,300);
ctx.fillStyle='#080817';ctx.fillRect(0,0,900,300);

// Neon arka plan
ctx.strokeStyle='#222244';ctx.lineWidth=1;
for(let x=0;x<900;x+=40){ctx.beginPath();ctx.moveTo(x,0);ctx.lineTo(x,300);ctx.stroke()}
for(let y=10;y<300;y+=40){ctx.beginPath();ctx.moveTo(0,y);ctx.lineTo(900,y);ctx.stroke()}

ctx.strokeStyle='#00ffff';ctx.lineWidth=3;
ctx.beginPath();ctx.moveTo(0,ground);ctx.lineTo(900,ground);ctx.stroke();

obstacles.forEach(o=>{
if(o.type==='spike'||o.type==='double'){
ctx.fillStyle='#ff247f';
ctx.beginPath();ctx.moveTo(o.x,ground);ctx.lineTo(o.x+15,ground-35);ctx.lineTo(o.x+30,ground);ctx.fill();
if(o.type==='double'){
ctx.beginPath();ctx.moveTo(o.x+25,ground);ctx.lineTo(o.x+40,ground-35);ctx.lineTo(o.x+55,ground);ctx.fill();
}
}else if(o.type==='block'){
ctx.fillStyle='#a040ff';ctx.fillRect(o.x,ground-40,35,40);
ctx.strokeStyle='#fff';ctx.strokeRect(o.x,ground-40,35,40);
}else if(o.type==='orb'){
ctx.strokeStyle='#ffff00';ctx.beginPath();ctx.arc(o.x,ground-70,15,0,Math.PI*2);ctx.stroke();
}else if(o.type==='pad'){
ctx.fillStyle='#ffcc00';ctx.fillRect(o.x,ground-8,35,8);
}
});

ctx.save();
ctx.translate(player.x+player.size/2,player.y+player.size/2);
ctx.rotate(running?frame*0.08:0);
ctx.fillStyle=color;
if(shape==='diamond'){
ctx.rotate(Math.PI/4);
ctx.fillRect(-15,-15,30,30);
}else if(shape==='circle'){
ctx.beginPath();ctx.arc(0,0,15,0,Math.PI*2);ctx.fill();
}else{
ctx.fillRect(-15,-15,30,30);
}
ctx.restore();
}

function add(type){
custom.push({x:80+custom.length*75,type});
drawEditor();
document.getElementById('editStatus').textContent='Engel eklendi: '+type;
}

function clearBlocks(){custom=[];drawEditor()}

function drawEditor(){
ex.clearRect(0,0,900,220);
ex.fillStyle='#080817';ex.fillRect(0,0,900,220);
ex.fillStyle='#00ffff';ex.fillRect(0,180,900,3);
custom.forEach(o=>{
ex.fillStyle=o.type==='block'?'#a040ff':o.type==='pad'?'#ffcc00':'#ff247f';
if(o.type==='spike'||o.type==='double'){
ex.beginPath();ex.moveTo(o.x,180);ex.lineTo(o.x+15,145);ex.lineTo(o.x+30,180);ex.fill();
if(o.type==='double'){
ex.beginPath();ex.moveTo(o.x+25,180);ex.lineTo(o.x+40,145);ex.lineTo(o.x+55,180);ex.fill();
}
}else if(o.type==='orb'){
ex.beginPath();ex.arc(o.x,125,15,0,Math.PI*2);ex.fill();
}else ex.fillRect(o.x,145,35,35);
});
}

function saveLevel(){
const data={
name:document.getElementById('customName').value,
blocks:custom
};
localStorage.setItem('gdCustom',JSON.stringify(data));
document.getElementById('editStatus').textContent='✅ Bölüm kaydedildi!';
}

function playCustom(){
saveLevel();
customMode=true;
document.getElementById('levelName').textContent=document.getElementById('customName').value;
show('game');
restart();
start();
}

function updateSkin(){
color=document.getElementById('cubeColor').value;
shape=document.getElementById('shape').value;
const p=document.getElementById('preview');
p.style.color=color;
p.textContent=shape==='diamond'?'◆':shape==='circle'?'●':'■';
draw();
}

function saveSettings(){
localStorage.setItem('gdSpeed',document.getElementById('speed').value);
localStorage.setItem('gdSound',document.getElementById('sound').checked);
localStorage.setItem('gdTrail',document.getElementById('trail').checked);
alert('Ayarlar kaydedildi!');
}

const saved=localStorage.getItem('gdCustom');
if(saved){
try{custom=JSON.parse(saved).blocks||[]}catch(e){}
}
if(localStorage.getItem('gdSpeed'))document.getElementById('speed').value=localStorage.getItem('gdSpeed');
draw();
drawEditor();
</script>
</body>
</html>