Hocam siyasi bir kişilikle ilgili yapılmış bir oyundu.
Ben asla siyasetle ilgilenmiyorum, niyetim o değil ama yine de örnek veremem içeri atarlar
buyur
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keyif Çayı Fırlatma Oyunu</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #87CEEB; /* Gökyüzü rengi */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
text-align: center;
overflow: hidden;
}
#game-container {
position: relative;
display: inline-block;
margin-top: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
canvas {
background-color: #f0f0f0;
display: block;
}
#ui {
position: absolute;
top: 15px;
left: 20px;
font-size: 28px;
font-weight: bold;
color: #fff;
text-shadow: 2px 2px 4px #000;
pointer-events: none;
}
.instructions {
margin-top: 10px;
color: #333;
font-weight: bold;
}
</style>
</head>
<body>
<div id="game-container">
<div id="ui">Skor: <span id="score">0</span></div>
<canvas id="gameCanvas" width="800" height="600"></canvas>
</div>
<div class="instructions">
🎮 Kontroller: Otobüsü hareket ettirmek için <b>Fareyi</b> sağa sola kaydır. Çay fırlatmak için <b>Sol Tıkla</b>.
</div>
<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
const scoreElement = document.getElementById("score");
let score = 0;
let teas = [];
let citizens = [];
let particles = [];
// Otobüs Nesnesi
const bus = {
x: canvas.width / 2,
y: 50,
width: 160,
height: 80,
color: "#eeeeee"
};
// Fare Takibi
canvas.addEventListener("mousemove", (e) => {
const rect = canvas.getBoundingClientRect();
let mouseX = e.clientX - rect.left;
// Otobüsü ekranın içinde tut
bus.x = Math.max(bus.width/2, Math.min(canvas.width - bus.width/2, mouseX));
});
// Tıklama ile Çay Fırlatma
canvas.addEventListener("mousedown", () => {
teas.push({
x: bus.x,
y: bus.y + bus.height / 2,
width: 15,
height: 20,
speed: 7
});
});
// Vatandaş Üretimi
function spawnCitizen() {
if (Math.random() < 0.03) { // Zorluk derecesini buradan ayarlayabilirsin
const movingRight = Math.random() > 0.5;
citizens.push({
x: movingRight ? -40 : canvas.width + 40,
y: canvas.height - 70,
width: 30,
height: 50,
speed: (Math.random() * 2 + 1) * (movingRight ? 1 : -1),
color: `hsl(${Math.random() * 360}, 70%, 50%)`, // Rastgele tişört rengi
hasTea: false
});
}
}
// Çarpışma Testi (AABB)
function checkCollision(rect1, rect2) {
return (
rect1.x < rect2.x + rect2.width &&
rect1.x + rect1.width > rect2.x &&
rect1.y < rect2.y + rect2.height &&
rect1.y + rect1.height > rect2.y
);
}
// Oyun Döngüsü
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Arka Plan Çizimi (Yol ve Gökyüzü)
ctx.fillStyle = "#a9a9a9"; // Asfalt
ctx.fillRect(0, canvas.height - 100, canvas.width, 100);
ctx.fillStyle = "#87CEEB"; // Gökyüzü arka planı
ctx.fillRect(0, 0, canvas.width, canvas.height - 100);
spawnCitizen();
// Otobüsü Çiz
ctx.fillStyle = "#1e90ff"; // Mavi otobüs
ctx.fillRect(bus.x - bus.width / 2, bus.y - bus.height / 2, bus.width, bus.height);
// Otobüs camı
ctx.fillStyle = "#87cefa";
ctx.fillRect(bus.x - bus.width / 2 + 10, bus.y - bus.height / 2 + 10, bus.width - 20, 30);
// Otobüs tekerlekleri
ctx.fillStyle = "#333";
ctx.beginPath();
ctx.arc(bus.x - 40, bus.y + bus.height / 2, 15, 0, Math.PI * 2);
ctx.arc(bus.x + 40, bus.y + bus.height / 2, 15, 0, Math.PI * 2);
ctx.fill();
// Camdan bakan adam
ctx.fillStyle = "#ffcc99";
ctx.beginPath();
ctx.arc(bus.x, bus.y - 5, 12, 0, Math.PI * 2);
ctx.fill();
// Vatandaşları Güncelle ve Çiz
for (let i = citizens.length - 1; i >= 0; i--) {
let c = citizens[i];
c.x += c.speed;
// Ekrandan çıkanları sil
if (c.x < -100 || c.x > canvas.width + 100) {
citizens.splice(i, 1);
continue;
}
// Vatandaşı Çiz
ctx.fillStyle = c.color;
ctx.fillRect(c.x, c.y, c.width, c.height); // Gövde
ctx.fillStyle = "#ffcc99"; // Kafa
ctx.beginPath();
ctx.arc(c.x + c.width / 2, c.y - 10, 12, 0, Math.PI * 2);
ctx.fill();
if (c.hasTea) {
// Çay alan vatandaşa küçük bir ikon çiz
ctx.fillStyle = "#8b4513";
ctx.fillRect(c.x + 5, c.y + 10, 10, 15);
}
}
// Çayları Güncelle ve Çiz
for (let i = teas.length - 1; i >= 0; i--) {
let tea = teas[i];
tea.y += tea.speed;
// Yere düşen çayı sil
if (tea.y > canvas.height) {
teas.splice(i, 1);
continue;
}
// Çayı Çiz (Çay Paketi)
ctx.fillStyle = "#cd853f"; // Çay rengi
ctx.fillRect(tea.x, tea.y, tea.width, tea.height);
ctx.fillStyle = "#fff"; // Çay etiketi
ctx.fillRect(tea.x + 3, tea.y - 5, 8, 8);
ctx.strokeStyle = "#fff"; // İp
ctx.beginPath();
ctx.moveTo(tea.x + tea.width/2, tea.y);
ctx.lineTo(tea.x + tea.width/2, tea.y - 5);
ctx.stroke();
// Çarpışma Kontrolü (Çay vs Vatandaş)
for (let j = citizens.length - 1; j >= 0; j--) {
let c = citizens[j];
if (!c.hasTea && checkCollision(tea, c)) {
c.hasTea = true; // Vatandaş çayı kaptı
score += 10;
scoreElement.innerText = score;
teas.splice(i, 1); // Çayı ekrandan sil
// Mutluluk efekti (yazı)
particles.push({
x: c.x,
y: c.y - 30,
life: 40,
text: "Keyif Çayı! ☕"
});
break;
}
}
}
// Efektleri (Yazıları) Güncelle ve Çiz
for (let i = particles.length - 1; i >= 0; i--) {
let p = particles[i];
p.y -= 1; // Yazı yukarı çıksın
p.life--;
ctx.fillStyle = `rgba(50, 205, 50, ${p.life / 40})`; // Yeşile dönük kaybolan yazı
ctx.font = "bold 16px sans-serif";
ctx.fillText(p.text, p.x - 10, p.y);
if (p.life <= 0) {
particles.splice(i, 1);
}
}
requestAnimationFrame(update);
}
// Oyunu Başlat
update();
</script>
</body>
</html>