javascript ile yapılabilir birbirinden bağımsız balonlar yapıp aşağıdan yukarı hareket ettir ve tam orta yere ve her 100px yukarıya bitiş yerleri koy balonların hızını 10 saniyede bir güncelle değiştir ve aynı renkli balonların her bir px hareketine 10puan, bitiş yerlerine gelişlerine ise ayrıca bir sayaç koyup a,b,c koy sonra bunları say kaç kere a,b,c olmuş
chatgpt biraz yaptırmaya çalıştım mantık çoklu görev yaptırmak için, daha sadece ve az elemanla başlayıp bir şeyler yapılabilir.
İleri seviye bir oyun yönetim vs olacaksa bunu yazdırmak maliyetli olur yapay zeka bir yerden sonra bütünü anlaması zor oluyor çünkü.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
overflow: hidden;
font-family: Arial, sans-serif;
}
.balloon {
position: absolute;
width: 40px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #fff;
cursor: pointer;
}
.checkpoints {
position: absolute;
width: 100px;
height: 5px;
background-color: #f00;
}
#score {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
color: #000;
}
</style>
<title>Balon Oyunu</title>
</head>
<body>
<div id="score">Puan: <span id="scoreValue">0</span></div>
<script>
const balloonColors = ['#00f', '#0f0', '#f00'];
let balloons = [];
let score = 0;
function createBalloon() {
const balloon = document.createElement('div');
balloon.className = 'balloon';
balloon.style.backgroundColor = balloonColors[Math.floor(Math.random() * balloonColors.length)];
balloon.speed = Math.random() * 3 + 1; // Rastgele bir hız belirle (1 ile 4 arasında)
document.body.appendChild(balloon);
return balloon;
}
function createLine(top) {
const line = document.createElement('div');
line.className = 'checkpoints';
line.style.top = top + 'px';
line.style.left = window.innerWidth + 'px';
document.body.appendChild(line);
return line;
}
function updateBalloons() {
for (const balloon of balloons) {
const currentPosition = parseFloat(balloon.style.top) || window.innerHeight;
const newPosition = currentPosition - balloon.speed;
balloon.style.top = newPosition + 'px';
const lines = document.querySelectorAll('.checkpoints');
for (const line of lines) {
const lineTop = parseFloat(line.style.top);
const lineLeft = parseFloat(line.style.left);
const lineWidth = parseFloat(line.style.width);
if (
newPosition <= lineTop + 5 &&
newPosition >= lineTop - 60 &&
parseFloat(balloon.style.left) >= lineLeft &&
parseFloat(balloon.style.left) <= lineLeft + lineWidth
) {
// Çizgiye değen balonları patlatma
balloon.remove();
}
}
if (newPosition <= 0) {
// Çizgilere değmeyen balonları patlatma
balloon.remove();
}
}
}
function updateLines() {
const lines = document.querySelectorAll('.checkpoints');
for (const line of lines) {
const currentPosition = parseFloat(line.style.left) || window.innerWidth;
const newPosition = currentPosition - 5; // Sabit hız
line.style.left = newPosition + 'px';
if (newPosition <= -100) {
// Eğer çizgi tamamen kaybolduysa, başlangıç pozisyonuna geri dön
line.style.left = window.innerWidth + 'px';
line.style.top = Math.random() * (window.innerHeight - 5) + 'px';
line.style.width = Math.random() * 200 + 'px'; // Rastgele çizgi uzunluğu belirle
}
}
}
function resetBalloon(balloon) {
balloon.style.top = window.innerHeight + 'px';
balloon.style.left = Math.random() * (window.innerWidth - 40) + 'px';
}
function startGame() {
createLine(window.innerHeight / 2);
createLine(window.innerHeight / 2 + 100);
createLine(window.innerHeight / 2 - 100);
setInterval(() => {
const balloon = createBalloon();
balloon.style.top = Math.random() * (window.innerHeight - 60) + 'px';
balloon.style.left = Math.random() * (window.innerWidth - 40) + 'px';
balloons.push(balloon);
}, 2000);
setInterval(updateBalloons, 50);
setInterval(updateLines, 50);
}
startGame();
</script>
</body>
</html>