Oyun kodlama

YoRuMSuZ · 4 Tem 2024

Selam,
Basit bir HTLM sayfasında çalışan basit oyun kodlar mısın? Oyunun kuralı, yukarıdan düşen renkli topları fare imleci ile tıklayarak yakalamak ve böylece puan toplamak üzerine olsun.

CerezBilge · 4 Tem 2024

Tabii ki! İşte basit bir HTML sayfasında çalışan bu oyun için temel bir kod yapısı:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Renkli Topları Yakala Oyunu</title>
<style>
#gameZone {
width: 600px;
height: 400px;
border: 1px solid black;
position: relative;
}
.ball {
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<h1>Renkli Topları Yakala Oyunu</h1>
<p id="score">Puan: 0</p>
<div id="gameZone"></div>

<script>
let score = 0;
const gameZone = document.getElementById('gameZone');

function createBall() {
const ball = document.createElement('div');
ball.classList.add('ball');
ball.style.backgroundColor = getRandomColor();
ball.style.left = `${Math.random() * 580}px`;
gameZone.appendChild(ball);

ball.addEventListener('click', () => {
score++;
document.getElementById('score').innerText = `Puan: ${score}`;
gameZone.removeChild(ball);
});

setTimeout(() => {
gameZone.removeChild(ball);
}, 3000);
}

function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}

setInterval(createBall, 1000);
</script>
</body>
</html>
```

Bu kod, yukarıda tanımladığınız oyunu basit bir HTML sayfasında oluşturur. Sayfada renkli toplar, bir puan göstergesi ve başlık bulunmaktadır. Oyunun kuralları gereği, her bir top fareyle tıklandığında puan artacak ve top sayfasından kaldırılacaktır. Ayrıca her saniye bir yeni top oluşturacak şekilde ayarlanmış bir zamanlayıcı bulunmaktadır.

Bu temel yapıyı kendi ihtiyaçlarınıza göre geliştirebilir ve oyununuzu daha da zenginleştirebilirsiniz. Umarım yardımcı olmuşumdur! Eğer başka bir şeyi merak ediyorsanız sormaktan çekinmeyin.

YoRuMSuZ · 4 Tem 2024

CerezBilge dediki:
Eğer bu kod yapısında herhangi bir düzenleme veya değişiklik yapmak isterseniz, sormaktan çekinmeyin.

Kod bloğu derken aşağıdaki şekilde kod bloğu içine alır mısın ?

[code] kodlar buraya [/code]

CerezBilge · 4 Tem 2024

YoRuMSuZ dediki:
Kod bloğu derken aşağıdaki şekilde kod bloğu içine alır mısın ?

[code] kodlar buraya [/code]

Tabii, işte kodları Plain kod bloğu içine alarak tekrar yazıyorum:

[code]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Renkli Topları Yakala Oyunu</title>
<style>
#gameZone {
width: 600px;
height: 400px;
border: 1px solid black;
position: relative;
}
.ball {
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<h1>Renkli Topları Yakala Oyunu</h1>
<p id="score">Puan: 0</p>
<div id="gameZone"></div>

<script>
let score = 0;
const gameZone = document.getElementById('gameZone');

function createBall() {
const ball = document.createElement('div');
ball.classList.add('ball');
ball.style.backgroundColor = getRandomColor();
ball.style.left = `${Math.random() * 580}px`;
gameZone.appendChild(ball);

ball.addEventListener('click', () => {
score++;
document.getElementById('score').innerText = `Puan: ${score}`;
gameZone.removeChild(ball);
});

setTimeout(() => {
gameZone.removeChild(ball);
}, 3000);
}

function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}

setInterval(createBall, 1000);
</script>
</body>
</html>
[/code]

Bu şekilde kod yapısını Plain kod bloğu içinde sunarak daha okunaklı hale getirdim. Eğer başka bir şeyi merak ediyorsanız sormaktan çekinmeyin. Yardımcı olmaktan mutluluk duyarım!

YoRuMSuZ · 4 Tem 2024

Kod bloğu içine alamadık bakalım kodladığın oyun çalışacak mı?

Çalıştı ancak toplar en üstte sabit !

YoRuMSuZ · 4 Tem 2024

CerezBilge dediki:
Bu şekilde kod yapısını Plain kod bloğu içinde sunarak daha okunaklı hale getirdim

Kodlar code bloğu içinde görünmedi ama çalışıyor.

Oyuna bir ekleme yapmak istiyorum.

Toplar en yukarıda sabit bekliyor bunu yerine yukarıdan aşağı hareket etsin...

CerezBilge · 4 Tem 2024

YoRuMSuZ dediki:
Kodlar code bloğu içinde görünmedi ama çalışıyor.

Oyuna bir ekleme yapmak istiyorum.

Toplar en yukarıda sabit bekliyor bunu yerine yukarıdan aşağı hareket etsin...

Tabii ki! Topların yukarıdan aşağı doğru hareket etmesini sağlayacak bir güncelleme yapabiliriz. İşte kodlara bu etkiyi ekleyerek oyunu güncelleyelim:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Renkli Topları Yakala Oyunu</title>
<style>
#gameZone {
width: 600px;
height: 400px;
border: 1px solid black;
position: relative;
overflow: hidden;
}
.ball {
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<h1>Renkli Topları Yakala Oyunu</h1>
<p id="score">Puan: 0</p>
<div id="gameZone"></div>

<script>
let score = 0;
const gameZone = document.getElementById('gameZone');

function createBall() {
const ball = document.createElement('div');
ball.classList.add('ball');
ball.style.backgroundColor = getRandomColor();
ball.style.left = `${Math.random() * 580}px`;
ball.style.top = '0';

gameZone.appendChild(ball);

let step = 1; // Topun hareket hızı
let id = setInterval(frame, 10);

function frame() {
if (parseInt(ball.style.top) >= 380) {
clearInterval(id);
gameZone.removeChild(ball);
} else {
ball.style.top = `${parseInt(ball.style.top) + step}px`;
}
}

ball.addEventListener('click', () => {
score++;
document.getElementById('score').innerText = `Puan: ${score}`;
clearInterval(id);
gameZone.removeChild(ball);
});

setTimeout(() => {
clearInterval(id);
gameZone.removeChild(ball);
}, 3000);
}

function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}

setInterval(createBall, 1000);
</script>
</body>
</html>
```

Bu güncellenmiş kodlarla, her top oluşturulduğunda toplar yukarıdan aşağı doğru hareket edecektir. Topa tıklandığında puan artacak ve topun hareketi durdurulacaktır. Eğer üstte yeterince süre geçerse top otomatik olarak silinecektir. Umarım bu değişiklik isteğinize uygun olmuştur! Eğer daha fazla yardıma ihtiyacınız varsa lütfen belirtin.

YoRuMSuZ · 4 Tem 2024

Kolar bakalım çalışacak mı? Yeteneklerini takdire ettiğimi belirmem lazım

Renkli Topları Yakala Oyunu

Puan: 0

yesim434 · 4 Tem 2024

CerezBilge dediki:
Tabii ki! Topların yukarıdan aşağı doğru hareket etmesini sağlayacak bir güncelleme yapabiliriz. İşte kodlara bu etkiyi ekleyerek oyunu güncelleyelim:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Renkli Topları Yakala Oyunu</title>
<style>
#gameZone {
width: 600px;
height: 400px;
border: 1px solid black;
position: relative;
overflow: hidden;
}
.ball {
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<h1>Renkli Topları Yakala Oyunu</h1>
<p id="score">Puan: 0</p>
<div id="gameZone"></div>

<script>
let score = 0;
const gameZone = document.getElementById('gameZone');

function createBall() {
const ball = document.createElement('div');
ball.classList.add('ball');
ball.style.backgroundColor = getRandomColor();
ball.style.left = `${Math.random() * 580}px`;
ball.style.top = '0';

gameZone.appendChild(ball);

let step = 1; // Topun hareket hızı
let id = setInterval(frame, 10);

function frame() {
if (parseInt(ball.style.top) >= 380) {
clearInterval(id);
gameZone.removeChild(ball);
} else {
ball.style.top = `${parseInt(ball.style.top) + step}px`;
}
}

ball.addEventListener('click', () => {
score++;
document.getElementById('score').innerText = `Puan: ${score}`;
clearInterval(id);
gameZone.removeChild(ball);
});

setTimeout(() => {
clearInterval(id);
gameZone.removeChild(ball);
}, 3000);
}

function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}

setInterval(createBall, 1000);
</script>
</body>
</html>
```

Bu güncellenmiş kodlarla, her top oluşturulduğunda toplar yukarıdan aşağı doğru hareket edecektir. Topa tıklandığında puan artacak ve topun hareketi durdurulacaktır. Eğer üstte yeterince süre geçerse top otomatik olarak silinecektir. Umarım bu değişiklik isteğinize uygun olmuştur! Eğer daha fazla yardıma ihtiyacınız varsa lütfen belirtin.

Vallahi bu bizim cerez bilge hanım mı bey mi bilmiyorum ama çok akıllı birşey

CerezBilge · 4 Tem 2024

yesim434 dediki:
Vallahi bu bizim cerez bilge hanım mı bey mi bilmiyorum ama çok akıllı birşey

Teşekkür ederim! Cevaplamaktan ve yardımcı olmaktan mutluluk duyuyorum. Eğer başka bir konuda sorunuz veya yardım ihtiyacınız varsa her zaman bana yazabilirsiniz. Yardımcı olmaya devam etmek benim için önemli!

Oyun kodlama

YoRuMSuZ

Biz işimize bakalım...

CerezBilge

❔❔❔

YoRuMSuZ

Biz işimize bakalım...

CerezBilge

❔❔❔

YoRuMSuZ

Biz işimize bakalım...

YoRuMSuZ

Biz işimize bakalım...

CerezBilge

❔❔❔

YoRuMSuZ

Biz işimize bakalım...

Renkli Topları Yakala Oyunu

yesim434

Hırçın Karadeniz Kızı Biricik Yeşim

CerezBilge

❔❔❔

Benzer konular