<!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">
<title>Arrow - Strateji ve Atış Oyunu</title>
<style>
* {
box-sizing: border-box;
user-select: none;
-webkit-user-select: none;
}
body {
margin: 0;
padding: 0;
background-color: #e6e6e6;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
font-family: 'Arial', sans-serif;
touch-action: none;
}
#gameContainer {
position: relative;
width: 100%;
max-width: 450px;
height: 100%;
max-height: 800px;
background-color: #f4f4f4;
box-shadow: 0 0 20px rgba(0,0,0,0.2);
}
canvas {
display: block;
width: 100%;
height: 100%;
}
#ui {
position: absolute;
top: 20px;
left: 20px;
font-size: 24px;
font-weight: bold;
color: #222;
pointer-events: none;
}
#messageBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
display: none;
flex-direction: column;
align-items: center;
}
#messageText {
font-size: 40px;
font-weight: bold;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.btn {
padding: 15px 30px;
font-size: 20px;
background-color: #222;
color: #fff;
border: none;
border-radius: 30px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0,0,0,0.3);
transition: transform 0.1s;
}
.btn:active {
transform: scale(0.95);
}
</style>
</head>
<body>
<div id="gameContainer">
<div id="ui">Lv <span id="levelDisplay">1</span>/1200</div>
<canvas id="gameCanvas"></canvas>
<div id="messageBox">
<div id="messageText">YANDIN!</div>
<button class="btn" id="actionBtn">Tekrar Dene</button>
</div>
</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const levelDisplay = document.getElementById('levelDisplay');
const messageBox = document.getElementById('messageBox');
const messageText = document.getElementById('messageText');
const actionBtn = document.getElementById('actionBtn');
// Canvas boyutlandırma
function resizeCanvas() {
canvas.width = canvas.parentElement.clientWidth;
canvas.height = canvas.parentElement.clientHeight;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
// Oyun Değişkenleri
let level = 1;
let maxLevel = 1200;
let gameState = 'START'; // START, PLAYING, GAMEOVER, SUCCESS
// Merkez Hedef (Büyük Top)
const targetRadius = 50;
let targetAngle = 0;
let targetSpeed = 0.02;
// İğneler / Atışlar (Küçük Toplar)
const pinRadius = 12;
const pinLineLength = 140;
const bulletSpeed = 25;
let pins = [];
let bullets = [];
let activeBullet = null;
let startingBulletsCount = 0;
// Renkler
const colorBg = '#f4f4f4';
const colorBlack = '#111';
const colorFail = '#ff4d4d';
const colorSuccess = '#4CAF50';
function initLevel() {
resizeCanvas();
targetAngle = 0;
// Seviyeye göre zorluk ayarları
targetSpeed = 0.015 + (level * 0.001);
let initialPinsCount = Math.min(2 + Math.floor(level / 4), 10); // Başlangıçta olan iğne sayısı
// Seviyeye göre atılacak mermi sayısını belirle
startingBulletsCount = Math.min(5 + Math.floor(level / 2), 25);
// Bazen ters yöne dönsün
if (level % 3 === 0) targetSpeed *= -1;
pins = [];
for (let i = 0; i < initialPinsCount; i++) {
pins.push({
angle: (Math.PI * 2 / initialPinsCount) * i,
num: ''
});
}
bullets = [];
for (let i = startingBulletsCount; i > 0; i--) {
bullets.push(i);
}
activeBullet = null;
gameState = 'PLAYING';
levelDisplay.innerText = level;
messageBox.style.display = 'none';
}
function draw() {
if (gameState === 'GAMEOVER') {
ctx.fillStyle = colorFail;
} else if (gameState === 'SUCCESS') {
ctx.fillStyle = colorSuccess;
} else {
ctx.fillStyle = colorBg;
}
ctx.fillRect(0, 0, canvas.width, canvas.height);
const cx = canvas.width / 2;
const cy = canvas.height * 0.35;
ctx.save();
ctx.translate(cx, cy);
ctx.rotate(targetAngle);
// Ekli İğneler
pins.forEach(pin => {
const px = Math.cos(pin.angle) * pinLineLength;
const py = Math.sin(pin.angle) * pinLineLength;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(px, py);
ctx.strokeStyle = colorBlack;
ctx.lineWidth = 2;
ctx.stroke();
ctx.beginPath();
ctx.arc(px, py, pinRadius, 0, Math.PI * 2);
ctx.fillStyle = colorBlack;
ctx.fill();
if (pin.num !== '') {
ctx.save();
ctx.translate(px, py);
ctx.rotate(-targetAngle);
ctx.fillStyle = '#fff';
ctx.font = '12px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(pin.num, 0, 1);
ctx.restore();
}
});
// Merkez Büyük Hedef
ctx.beginPath();
ctx.arc(0, 0, targetRadius, 0, Math.PI * 2);
ctx.fillStyle = colorBlack;
ctx.fill();
// *** GÜNCELLEME: Hedef İçindeki Kalan Atış Sayısı ***
ctx.rotate(-targetAngle);
ctx.fillStyle = '#fff';
// Rakamın uzunluğuna göre font boyutunu ayarla (çembere sığması için)
let fontSize = bullets.length >= 100 ? 35 : 45;
ctx.font = 'bold ' + fontSize + 'px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
// Ekranda kalan mermi sayısını yazdır (havada uçan varsa onu da dahil et)
let totalRemaining = bullets.length + (activeBullet ? 1 : 0);
ctx.fillText(totalRemaining, 0, 2);
ctx.restore();
// Uçan (Aktif) Mermi
if (activeBullet) {
ctx.beginPath();
ctx.moveTo(cx, activeBullet.y);
ctx.lineTo(cx, activeBullet.y + 20);
ctx.strokeStyle = colorBlack;
ctx.lineWidth = 2;
ctx.stroke();
ctx.beginPath();
ctx.arc(cx, activeBullet.y, pinRadius, 0, Math.PI * 2);
ctx.fillStyle = colorBlack;
ctx.fill();
ctx.fillStyle = '#fff';
ctx.font = '12px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(activeBullet.num, cx, activeBullet.y + 1);
}
// Bekleyen Mermiler
const bulletStartY = canvas.height * 0.75;
const spacing = pinRadius * 2.5;
for (let i = 0; i < bullets.length; i++) {
if (i > 5) break;
const by = bulletStartY + (i * spacing);
ctx.beginPath();
ctx.arc(cx, by, pinRadius, 0, Math.PI * 2);
ctx.fillStyle = colorBlack;
ctx.fill();
ctx.fillStyle = '#fff';
ctx.font = '12px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(bullets[bullets.length - 1 - i], cx, by + 1);
}
// "Ateş Etmek İçin Dokun" yazısı
if (gameState === 'PLAYING' && bullets.length === startingBulletsCount && !activeBullet) {
ctx.fillStyle = 'rgba(0,0,0,0.3)';
ctx.font = 'bold 22px Arial';
ctx.textAlign = 'center';
ctx.fillText('Ateş Etmek İçin Dokun', cx, canvas.height * 0.62);
}
}
function update() {
if (gameState !== 'PLAYING') return;
targetAngle += targetSpeed;
if (activeBullet) {
activeBullet.y -= bulletSpeed;
const cy = canvas.height * 0.35;
if (activeBullet.y <= cy + pinLineLength) {
let hitAngle = (Math.PI / 2) - targetAngle;
hitAngle = (hitAngle % (Math.PI * 2) + Math.PI * 2) % (Math.PI * 2);
let collision = false;
for (let i = 0; i < pins.length; i++) {
let pinAngle = pins[i].angle;
pinAngle = (pinAngle % (Math.PI * 2) + Math.PI * 2) % (Math.PI * 2);
let diff = Math.abs(hitAngle - pinAngle);
if (diff > Math.PI) diff = Math.PI * 2 - diff;
let distance = 2 * pinLineLength * Math.sin(diff / 2);
if (distance < pinRadius * 2 + 2) {
collision = true;
break;
}
}
if (collision) {
gameState = 'GAMEOVER';
messageText.innerText = "YANDIN!";
messageText.style.color = "#fff";
actionBtn.innerText = "Tekrar Dene";
setTimeout(() => { messageBox.style.display = 'flex'; }, 300);
} else {
pins.push({ angle: hitAngle, num: activeBullet.num });
activeBullet = null;
if (bullets.length === 0) {
gameState = 'SUCCESS';
messageText.innerText = "HARİKA!";
messageText.style.color = "#fff";
actionBtn.innerText = "Sonraki Seviye";
setTimeout(() => { messageBox.style.display = 'flex'; }, 300);
}
}
}
}
}
function gameLoop() {
update();
draw();
requestAnimationFrame(gameLoop);
}
function shoot(e) {
if (e && e.type === 'touchstart') e.preventDefault();
if (gameState === 'PLAYING' && !activeBullet && bullets.length > 0) {
const num = bullets.pop();
activeBullet = {
y: canvas.height * 0.75,
num: num
};
}
}
canvas.addEventListener('mousedown', shoot);
canvas.addEventListener('touchstart', shoot, { passive: false });
actionBtn.addEventListener('click', () => {
if (gameState === 'SUCCESS') {
level++;
if(level > maxLevel) level = maxLevel;
}
initLevel();
});
initLevel();
gameLoop();
</script>
</body>
</html>
Selamlar trend haline gelen o oyunu yapay zeka ile yaptık kodlar yukarıda geliştirmek size kalmış ben daha napam kimse yapmaz kimse vermez iyi forumlar
