<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>R10 ROKİTO BİRD</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #2c3e50;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
overflow: hidden;
}
#gameContainer {
position: relative;
}
canvas {
background-color: #70c5ce; /* Gökyüzü rengi */
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
border: 4px solid #ecf0f1;
border-radius: 12px;
display: block;
}
#karakterResmi {
display: none; /* Resmi sadece canvas içinde çizeceğimiz için gizliyoruz */
}
</style>
</head>
<body>
<div id="gameContainer">
<!-- Karakter URL'si -->
<img id="karakterResmi" crossorigin="anonymous" src="https://cdn.r10.net/editor/88549/2518131417.png" alt="Rokito">
<canvas id="gameCanvas" width="320" height="480"></canvas>
</div>
<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
const img = document.getElementById("karakterResmi");
// Oyun değişkenleri
let frames = 0;
let score = 0;
let bestScore = 0;
let currentState = 0; // 0: Başlangıç Menüsü, 1: Oyun oynanıyor, 2: Oyun bitti
// Karakter nesnesi (Rokito)
const bird = {
x: 50,
y: 200,
width: 45,
height: 45,
gravity: 0.25,
jump: 5.5,
speed: 0,
draw: function() {
if (!img.complete || img.naturalWidth === 0) {
ctx.fillStyle = "#ffcc00";
ctx.beginPath();
ctx.arc(this.x + this.width/2, this.y + this.height/2, this.width/2, 0, Math.PI*2);
ctx.fill();
ctx.closePath();
} else {
ctx.drawImage(img, this.x, this.y, this.width, this.height);
}
},
flap: function() {
this.speed = -this.jump;
},
update: function() {
// Başlangıç ekranında karakter hafifçe aşağı yukarı süzülsün
if (currentState === 0) {
this.y = 200 + Math.cos(frames / 15) * 5;
}
if (currentState === 1) {
this.speed += this.gravity;
this.y += this.speed;
if (this.y + this.height >= canvas.height - 20) {
this.y = canvas.height - this.height - 20;
currentState = 2;
}
if (this.y <= 0) {
this.y = 0;
this.speed = 0;
}
}
},
reset: function() {
this.y = 200;
this.speed = 0;
}
};
// Borular nesnesi
const pipes = {
position: [],
width: 50,
gap: 130,
dx: 2.5,
draw: function() {
for (let i = 0; i < this.position.length; i++) {
let p = this.position[i];
let topY = p.y;
let bottomY = p.y + this.gap;
ctx.fillStyle = "#2ecc71";
ctx.strokeStyle = "#27ae60";
ctx.lineWidth = 2;
ctx.fillRect(p.x, 0, this.width, topY);
ctx.strokeRect(p.x, 0, this.width, topY);
ctx.fillRect(p.x, bottomY, this.width, canvas.height - bottomY);
ctx.strokeRect(p.x, bottomY, this.width, canvas.height - bottomY);
}
},
update: function() {
if (currentState !== 1) return;
if (frames % 90 === 0) {
this.position.push({
x: canvas.width,
y: Math.random() * (canvas.height - this.gap - 100) + 50
});
}
for (let i = 0; i < this.position.length; i++) {
let p = this.position[i];
p.x -= this.dx;
if (bird.x + bird.width > p.x && bird.x < p.x + this.width &&
(bird.y < p.y || bird.y + bird.height > p.y + this.gap)) {
currentState = 2;
}
if (p.x + this.width <= 0) {
this.position.shift();
score++;
bestScore = Math.max(score, bestScore);
i--;
}
}
},
reset: function() {
this.position = [];
}
};
// Zemin nesnesi
const fg = {
x: 0,
y: canvas.height - 20,
width: canvas.width,
height: 20,
dx: 2.5,
draw: function() {
ctx.fillStyle = "#ded895";
ctx.fillRect(this.x, this.y, this.width, this.height);
ctx.fillRect(this.x + this.width, this.y, this.width, this.height);
},
update: function() {
// Zemin menüdeyken de kaysın
if (currentState === 0 || currentState === 1) {
this.x = (this.x - this.dx) % (this.width/2);
}
}
};
// Arayüz Çizimi (Menüler ve Skor)
function drawUI() {
ctx.textAlign = "center"; // Tüm metinleri ortala
if (currentState === 0) {
// Başlangıç Menüsü Arka Plan Karartması
ctx.fillStyle = "rgba(0, 0, 0, 0.3)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// R10 ROKİTO BİRD Başlığı
ctx.fillStyle = "#FFF";
ctx.strokeStyle = "#000";
ctx.lineWidth = 4;
ctx.font = "900 32px 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif";
ctx.strokeText("R10 ROKİTO BİRD", canvas.width / 2, canvas.height / 2 - 50);
ctx.fillText("R10 ROKİTO BİRD", canvas.width / 2, canvas.height / 2 - 50);
// Alt Bilgi
ctx.lineWidth = 2;
ctx.font = "bold 20px 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif";
// Yanıp sönen efekt için
if (frames % 60 < 30) {
ctx.strokeText("Başlamak İçin Tıkla", canvas.width / 2, canvas.height / 2 + 50);
ctx.fillText("Başlamak İçin Tıkla", canvas.width / 2, canvas.height / 2 + 50);
}
} else if (currentState === 1) {
// Oyun içi skor
ctx.fillStyle = "#FFF";
ctx.strokeStyle = "#000";
ctx.lineWidth = 3;
ctx.font = "bold 45px 'Segoe UI', sans-serif";
ctx.strokeText(score, canvas.width / 2, 60);
ctx.fillText(score, canvas.width / 2, 60);
} else if (currentState === 2) {
// Oyun Bitiş Menüsü Arka Plan
ctx.fillStyle = "rgba(0, 0, 0, 0.6)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#e74c3c";
ctx.strokeStyle = "#FFF";
ctx.lineWidth = 3;
ctx.font = "900 38px 'Segoe UI', sans-serif";
ctx.strokeText("OYUN BİTTİ", canvas.width / 2, canvas.height / 2 - 60);
ctx.fillText("OYUN BİTTİ", canvas.width / 2, canvas.height / 2 - 60);
ctx.fillStyle = "#FFF";
ctx.strokeStyle = "#000";
ctx.lineWidth = 2;
ctx.font = "bold 26px 'Segoe UI', sans-serif";
ctx.strokeText("Skor: " + score, canvas.width / 2, canvas.height / 2);
ctx.fillText("Skor: " + score, canvas.width / 2, canvas.height / 2);
ctx.fillStyle = "#f1c40f"; // Altın sarısı
ctx.strokeText("En İyi: " + bestScore, canvas.width / 2, canvas.height / 2 + 40);
ctx.fillText("En İyi: " + bestScore, canvas.width / 2, canvas.height / 2 + 40);
ctx.fillStyle = "#FFF";
ctx.font = "18px 'Segoe UI', sans-serif";
ctx.strokeText("Tekrar oynamak için tıkla", canvas.width / 2, canvas.height / 2 + 100);
ctx.fillText("Tekrar oynamak için tıkla", canvas.width / 2, canvas.height / 2 + 100);
}
ctx.textAlign = "left"; // Reset
}
// Oyun Döngüsü
function loop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
pipes.draw();
pipes.update();
fg.draw();
fg.update();
bird.draw();
bird.update();
drawUI();
frames++;
requestAnimationFrame(loop);
}
// Kontroller
function action() {
switch (currentState) {
case 0:
currentState = 1;
bird.flap(); // Oyuna başlarken de hafif zıplasın
break;
case 1:
bird.flap();
break;
case 2:
bird.reset();
pipes.reset();
score = 0;
currentState = 0;
break;
}
}
canvas.addEventListener("mousedown", action);
canvas.addEventListener("touchstart", function(e) {
e.preventDefault();
action();
}, {passive: false});
document.addEventListener("keydown", function(e) {
if(e.code === "Space" || e.keyCode === 32) {
action();
}
});
img.onload = function() {};
loop();
</script>
</body>
</html>
Selamlar yapay zeka ile r10 rokito bird oyunu yaptık kodları verdim geliştirmek size kalmış iyi forumlar