Tabii! İstediğiniz şey, **oyunun kendi ekranında** bir indirme butonunun yer alması, değil mi?
Oyunu oynarken, ekranda “İndir” butonuna basınca o HTML dosyasının tekrar bilgisayara inmesini sağlayabilirim.
Aşağıda, futbol oyununu içeren ve sağ üstte bir “İndir” butonu olan bir HTML kodu bulacaksınız. Bu dosya açıldığında oyunu ekranda göreceksiniz, sağ üst köşedeki butona basınca da aynı dosya tekrar bilgisayarınıza iner.
Kodun içinde çok basit bir şekilde hem oyun kodu çalışacak, hem de ekranda bir “İndir” butonu olacak:
```html
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Kafa Topu Futbolu</title>
<style>
canvas { background: #aee571; display: block; margin: 0 auto; border: 3px solid #31813a;}
body { text-align: center; font-family: sans-serif; margin:0; }
#puan { font-size: 22px; margin: 12px; }
#indirButonu {
position: absolute;
top: 15px;
right: 30px;
padding: 12px 22px;
background: #75b2b1;
color: #fff;
font-weight: bold;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 18px;
box-shadow: 1px 1px 6px #888;
transition: background 0.3s;
}
#indirButonu:hover {
background: #478b8a;
}
</style>
</head>
<body>
<button id="indirButonu" onclick="oyunIndir()">İndir</button>
<h1>Kafa Topu Futbolu</h1>
<div id="puan">Puan: 0</div>
<canvas id="game" width="700" height="400"></canvas>
<p>Oyuncunuzu WASD tuşlarıyla hareket ettirin.<br>10 puan olunca seviye atlayın!</p>
<script>
// OYUN KODU (değiştirmeyin!)
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
let player = {x: 80, y: 200, vx: 0, vy: 0, hair: 'orange', score: 0};
let ball = {x: 350, y: 200, vx: 3, vy: 2};
let goalLeft = {x: 10, y: 150, w: 10, h: 100};
let goalRight = {x: 680, y: 150, w: 10, h: 100};
let keys = {};
document.addEventListener('keydown', e => { keys[e.key.toLowerCase()] = true; });
document.addEventListener('keyup', e => { keys[e.key.toLowerCase()] = false; });
function update() {
if (keys['w']) player.y -= 4;
if (keys['s']) player.y += 4;
if (keys['a']) player.x -= 4;
if (keys['d']) player.x += 4;
player.x = Math.max(30, Math.min(670, player.x));
player.y = Math.max(35, Math.min(365, player.y));
ball.x += ball.vx;
ball.y += ball.vy;
if (ball.y < 20 || ball.y > 380) ball.vy *= -1;
if (ball.x < 20 || ball.x > 680) ball.vx *= -1;
let dx = player.x - ball.x, dy = player.y - ball.y;
if (Math.sqrt(dx*dx+dy*dy)<38) {
let angle = Math.atan2(dy, dx);
ball.vx = -Math.cos(angle)*4;
ball.vy = -Math.sin(angle)*4;
}
if (
(ball.x < goalLeft.x+goalLeft.w && ball.y > goalLeft.y && ball.y < goalLeft.y+goalLeft.h) ||
(ball.x > goalRight.x && ball.y > goalRight.y && ball.y < goalRight.y+goalRight.h)
) {
player.score++;
document.getElementById('puan').textContent = 'Puan: ' + player.score;
ball.x = 350; ball.y = 200; ball.vx = 3; ball.vy = 2;
}
if(player.score >= 10){
alert('Tebrikler! Bir üst seviyeye geçtiniz!');
player.score = 0;
document.getElementById('puan').textContent = 'Puan: ' + player.score;
ball.vx += 1; ball.vy += 1;
}
}
function drawField() {
ctx.fillStyle = '#aee571'; ctx.fillRect(0,0,700,400);
ctx.fillStyle = '#f66'; ctx.fillRect(goalLeft.x, goalLeft.y, goalLeft.w, goalLeft.h);
ctx.fillStyle = '#66f'; ctx.fillRect(goalRight.x, goalRight.y, goalRight.w, goalRight.h);
}
function drawPlayer() {
ctx.fillStyle = '#9e6420';
ctx.beginPath(); ctx.arc(player.x-12, player.y+24, 10, 0, Math.PI*2); ctx.fill();
ctx.beginPath(); ctx.arc(player.x+12, player.y+24, 10, 0, Math.PI*2); ctx.fill();
ctx.fillStyle = '#efca7b';
ctx.beginPath(); ctx.arc(player.x, player.y+12, 16, 0, Math.PI, true); ctx.fill();
ctx.fillStyle = '#ffe0a3';
ctx.beginPath(); ctx.arc(player.x, player.y, 24, 0, Math.PI*2); ctx.fill();
ctx.fillStyle = player.hair;
ctx.beginPath();
ctx.arc(player.x, player.y-22, 20, Math.PI, Math.PI*2);
ctx.fill();
ctx.fillStyle= '#444';
ctx.beginPath(); ctx.arc(player.x-8, player.y-4, 3, 0, Math.PI*2); ctx.fill();
ctx.beginPath(); ctx.arc(player.x+8, player.y-4, 3, 0, Math.PI*2); ctx.fill();
ctx.strokeStyle = '#cf7124';
ctx.beginPath();
ctx.arc(player.x, player.y + 8, 8, 0, Math.PI);
ctx.stroke();
}
function drawBall() {
ctx.fillStyle = '#fff';
ctx.beginPath(); ctx.arc(ball.x, ball.y, 16, 0, Math.PI*2); ctx.fill();
ctx.strokeStyle = '#111'; ctx.stroke();
ctx.fillStyle = '#333';
ctx.beginPath(); ctx.arc(ball.x, ball.y, 4, 0, Math.PI*2); ctx.fill();
}
function draw() {
ctx.clearRect(0,0,700,400);
drawField();
drawPlayer();
drawBall();
ctx.font = '18px Arial';
ctx.fillStyle = '#222';
ctx.fillText('W', 32, 50);
ctx.fillText('A', 12, 70);
ctx.fillText('S', 32, 90);
ctx.fillText('D', 52, 70);
}
function loop() {
update();
draw();
requestAnimationFrame(loop);
}
loop();
// İNDİRME BUTONU KODU
function oyunIndir(){
const htmlKodu = document.documentElement.outerHTML;
const blob = new Blob([htmlKodu], {type: "text/html"});
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = "kafatopufutbolu.html";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
</script>
</body>
</html>
```
Böylece “İndir” butonuna bastığınızda, aynı oyunun HTML dosyası bilgisayarınıza iner!
Daha fazla yardım gerekirse sormaktan çekinmeyin!