Oyun İsteği - IRCForumları - IRC ve mIRC Kullanıcılarının Buluşma Noktası

Spacely · 23 Mayıs 2025, 16:25

senden tarayıcı için oyun önerisi isteğinde bulunmuştum sende
1. **Snake Oyunu**: Klasik bir oyun olan Snake'i HTML, CSS ve JavaScript kullanarak yapabilirsiniz. Oyunda amaç, ekranda hareket eden yılanın yemleri yemesi ve büyümesi.
2. **Tic Tac Toe**: İki oyuncu arasında oynanan bir strateji oyunu. Oyuncular sırayla X ve O işaretlerini yerleştirir ve üç işaretini aynı satır, sütun veya çaprazda oluşturmaya çalışır.
3. **Hangman**: Bir kelime tahmin oyunu. Bir kelime seçilir ve oyuncu, kelimenin harflerini tahmin etmeye çalışır.
4. **20 Soruluk Oyun**: Bir nesne düşünülür ve oyuncu, evet veya hayır soruları sorarak nesneyi tahmin etmeye çalışır.
5. **Rock, Paper, Scissors**: İki oyuncu arasında oynanan bir şans oyunu. Oyuncular aynı anda rock, paper veya scissors seçer ve kazanan belirlenir.
6. **Quiz Oyunu**: Bir dizi soru hazırlanır ve oyuncu, soruları cevaplayarak puan kazanır.
7. **Pong Oyunu**: İki oyuncu arasında oynanan bir tenis oyunu. Oyuncular, topu geri çevirmeye çalışır ve puan kazanır.
8. **Memory Oyunu**: Bir dizi kart hazırlanır ve oyuncu, kartları eşleştirmeye çalışır.
9. **Maze Oyunu**: Bir labirent oluşturulur ve oyuncu, çıkışa ulaşmaya çalışır.
10. **Space Invaders**: Klasik bir uzay oyunu. Oyuncu, uzay gemisiyle düşmanları vurmaya çalışır.

şunları bana örnek olarak gösterdin acaba bunların kodlarını her oyun için ayrı ayrı tek sayfa olacak şekilde paylaşabilirmisin. yani 1. oyun için html css ve javascript bütün kodları tek sayfada olsun diğerleri de böyle olsun

IF-AI · 23 Mayıs 2025, 16:32

Evet, elbette. Aşağıda her bir oyun için HTML, CSS ve JavaScript kodlarını içeren tek sayfalı örnekler bulunmaktadır.

**1. Snake Oyunu**

```html
<!DOCTYPE html>
<html>
<head>
<title>Snake Oyunu</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let snake = [{x: 200, y: 200}, {x: 190, y: 200}, {x: 180, y: 200}];
let direction = 'right';
let food = {x: Math.floor(Math.random() * 40) * 10, y: Math.floor(Math.random() * 40) * 10};

function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
snake.forEach((part) => {
ctx.fillStyle = 'green';
ctx.fillRect(part.x, part.y, 10, 10);
});
ctx.fillStyle = 'red';
ctx.fillRect(food.x, food.y, 10, 10);
}

function update() {
let head = snake[0];
if (direction === 'right') {
head = {x: head.x + 10, y: head.y};
} else if (direction === 'left') {
head = {x: head.x - 10, y: head.y};
} else if (direction === 'up') {
head = {x: head.x, y: head.y - 10};
} else if (direction === 'down') {
head = {x: head.x, y: head.y + 10};
}
snake.unshift(head);
if (snake[0].x === food.x && snake[0].y === food.y) {
food = {x: Math.floor(Math.random() * 40) * 10, y: Math.floor(Math.random() * 40) * 10};
} else {
snake.pop();
}
if (snake[0].x < 0 || snake[0].x >= canvas.width || snake[0].y < 0 || snake[0].y >= canvas.height || snake.slice(1).some((part) => part.x === snake[0].x && part.y === snake[0].y)) {
alert('Game Over');
}
}

setInterval(() => {
update();
draw();
}, 100);

document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowUp' && direction !== 'down') {
direction = 'up';
} else if (e.key === 'ArrowDown' && direction !== 'up') {
direction = 'down';
} else if (e.key === 'ArrowLeft' && direction !== 'right') {
direction = 'left';
} else if (e.key === 'ArrowRight' && direction !== 'left') {
direction = 'right';
}
});
</script>
</body>
</html>
```

**2. Tic Tac Toe**

```html
<!DOCTYPE html>
<html>
<head>
<title>Tic Tac Toe</title>
<style>
#board {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.cell {
width: 100px;
height: 100px;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
font-size: 36px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="board">
<div class="cell" id="cell-0"></div>
<div class="cell" id="cell-1"></div>
<div class="cell" id="cell-2"></div>
<div class="cell" id="cell-3"></div>
<div class="cell" id="cell-4"></div>
<div class="cell" id="cell-5"></div>
<div class="cell" id="cell-6"></div>
<div class="cell" id="cell-7"></div>
<div class="cell" id="cell-8"></div>
</div>
<script>
let currentPlayer = 'X';
let board = ['', '', '', '', '', '', '', '', ''];

document.querySelectorAll('.cell').forEach((cell, index) => {
cell.addEventListener('click', () => {
if (board[index] === '') {
board[index] = currentPlayer;
cell.textContent = currentPlayer;
if (checkWin()) {
alert(`Player ${currentPlayer} wins!`);
} else {
currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
}
}
});
});

function checkWin() {
let winConditions = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
for (let condition of winConditions) {
if (board[condition[0]] !== '' && board[condition[0]] === board[condition[1]] && board[condition[1]] === board[condition[2]]) {
return true;
}
}
return false;
}
</script>
</body>
</html>
```

**3. Hangman**

```html
<!DOCTYPE html>
<html>
<head>
<title>Hangman</title>
<style>
#word {
font-size: 24px;
}
</style>
</head>
<body>
<p id="word"></p>
<input id="guess" type="text" maxlength="1">
<button id="submit">Submit</button>
<script>
let word = 'javascript';
let guesses = [];
let correctGuesses = 0;
let wordElement = document.getElementById('word');
let guessInput = document.getElementById('guess');
let submitButton = document.getElementById('submit');

for (let i = 0; i < word.length; i++) {
let span = document.createElement('span');
span.textContent = '_';
wordElement.appendChild(span);
}

submitButton.addEventListener('click', () => {
let guess = guessInput.value.toLowerCase();
if (guess.length === 1) {
guesses.push(guess);
guessInput.value = '';
let correct = false;
let spans = wordElement.children;
for (let i = 0; i < word.length; i++) {
if (word[i] === guess) {
spans[i].textContent = guess;
correct = true;
correctGuesses++;
}
}
if (!correct) {
alert('Wrong guess!');
}
if (correctGuesses === word.length) {
alert('Congratulations, you won!');
}
}
});
</script>
</body>
</html>
```

**4. 20 Soruluk Oyun**

Bu oyunu oluşturmak için biraz daha fazla kod ve bir backend gereklidir. Ancak basit bir versiyonunu oluşturabiliriz.

```html
<!DOCTYPE html>
<html>
<head>
<title>20 Soruluk Oyun</title>
<style>
#question {
font-size: 18px;
}
</style>
</head>
<body>
<p id="question"></p>
<input id="answer" type="text">
<button id="submit">Submit</button>
<script>
let object = 'apple'; // Nesne
let questions = 20;
let questionElement = document.getElementById('question');
let answerInput = document.getElementById('answer');
let submitButton = document.getElementById('submit');
let currentQuestion = 1;

questionElement.textContent = `1. Nesne canlı mı?`;

submitButton.addEventListener('click', () => {
let answer = answerInput.value.toLowerCase();
if (answer === 'evet' || answer === 'hayır') {
if (answer === 'hayır') {
if (object === 'apple') {
currentQuestion++;
questionElement.textContent = `${currentQuestion}. Nesne yenilebilir mi?`;
} else {
alert('Wrong answer!');
}
} else {
alert('Wrong answer!');
}
answerInput.value = '';
if (currentQuestion > questions) {
questionElement.textContent = `Tahmininiz: ${object}`;
}
}
});
</script>
</body>
</html>
```

**5. Rock, Paper, Scissors**

```html
<!DOCTYPE html>
<html>
<head>
<title>Rock, Paper, Scissors</title>
<style>
#result {
font-size: 18px;
}
</style>
</head>
<body>
<button id="rock">Rock</button>
<button id="paper">Paper</button>
<button id="scissors">Scissors</button>
<p id="result"></p>
<script>
let computerChoice;
let userScore = 0;
let computerScore = 0;
let resultElement = document.getElementById('result');

document.getElementById('rock').addEventListener(' click', () => {
playGame('rock');
});
document.getElementById('paper').addEventListener( 'click', () => {
playGame('paper');
});
document.getElementById('scissors').addEventListen er('click', () => {
playGame('scissors');
});

function playGame(userChoice) {
computerChoice = getComputerChoice();
let result;
if (userChoice === computerChoice) {
result = 'Tie!';
} else if ((userChoice === 'rock' && computerChoice === 'scissors') || (userChoice === 'scissors' && computerChoice === 'paper') || (userChoice === 'paper' && computerChoice === 'rock')) {
result = 'You win!';
userScore++;
} else {
result = 'Computer wins!';
computerScore++;
}
resultElement.textContent = `You: ${userScore} Computer: ${computerScore} ${result}`;
}

function getComputerChoice() {
let choices = ['rock', 'paper', 'scissors'];
return choices[Math.floor(Math.random() * 3)];
}
</script>
</body>
</html>
```

**6. Quiz Oyunu**

```html
<!DOCTYPE html>
<html>
<head>
<title>Quiz Oyunu</title>
<style>
#question {
font-size: 18px;
}
</style>
</head>
<body>
<p id="question"></p>
<input id="answer" type="text">
<button id="submit">Submit</button>
<script>
let questions = [
{question: 'What is the capital of France?', answer: 'Paris'},
{question: 'What is the largest planet in our solar system?', answer: 'Jupiter'}
];
let currentQuestion = 0;
let score = 0;
let questionElement = document.getElementById('question');
let answerInput = document.getElementById('answer');
let submitButton = document.getElementById('submit');

questionElement.textContent = questions[currentQuestion].question;

submitButton.addEventListener('click', () => {
let userAnswer = answerInput.value.toLowerCase();
if (userAnswer === questions[currentQuestion].answer.toLowerCase()) {
score++;
alert('Correct!');
} else {
alert(`Wrong! The correct answer is ${questions[currentQuestion].answer}.`);
}
currentQuestion++;
answerInput.value = '';
if (currentQuestion < questions.length) {
questionElement.textContent = questions[currentQuestion].question;
} else {
questionElement.textContent = `Quiz finished! Your score is ${score} / ${questions.length}`;
submitButton.disabled = true;
}
});
</script>
</body>
</html>
```

**7. Pong Oyunu**

Pong oyununu oluşturmak için biraz daha fazla kod gereklidir. Aşağıda basit bir versiyonu bulunmaktadır.

```html
<!DOCTYPE html>
<html>
<head>
<title>Pong Oyunu</title>
<style>
#canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script>
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let ball = {x: canvas.width / 2, y: canvas.height / 2, vx: 5, vy: 5, radius: 10};
let paddle1 = {x: 10, y: canvas.height / 2 - 50, width: 10, height: 100, speed: 5};
let paddle2 = {x: canvas.width - 20, y: canvas.height / 2 - 50, width: 10, height: 100, speed: 5};
let score1 = 0;
let score2 = 0;

function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'white';
ctx.fillRect(paddle1.x, paddle1.y, paddle1.width, paddle1.height);
ctx.fillRect(paddle2.x, paddle2.y, paddle2.width, paddle2.height);
ctx.beginPath();
ctx.arc(ball.x, ball.y, ball.radius, 0, 2 * Math.PI);
ctx.fill();
ctx.font = '24px Arial';
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.fillStyle = 'black';
ctx.fillText(`Score: ${score1} - ${score2}`, 10, 10);
}

function update() {
ball.x += ball.vx;
ball.y += ball.vy;

if (ball.y < 0 || ball.y > canvas.height) {
ball.vy *= -1;
}

if (ball.x < paddle1.width && ball.y > paddle1.y && ball.y < paddle1.y + paddle1.height) {
ball.vx *= -1;
} else if (ball.x < 0) {
score2++;
ball.x = canvas.width / 2;
ball.y = canvas.height / 2;
}

if (ball.x > canvas.width - paddle2.width - ball.radius && ball.y > paddle2.y && ball.y < paddle2.y + paddle2.height) {
ball.vx *= -1;
} else if (ball.x > canvas.width) {
score1++;
ball.x = canvas.width / 2;
ball.y = canvas.height / 2;
}
}

setInterval(() => {
update();
draw();
}, 1000 / 60);

document.addEventListener('keydown', (e) => {
if (e.key === 'w') {
paddle1.y -= paddle1.speed;
} else if (e.key === 's') {
paddle1.y += paddle1.speed;
} else if (e.key === 'ArrowUp') {
paddle2.y -= paddle2.speed;
} else if (e.key === 'ArrowDown') {
paddle2.y += paddle2.speed;
}
});
</script>
</body>
</html>
```

**8. Memory Oyunu**

Memory oyununu oluşturmak için biraz daha fazla kod gereklidir.

```html
<!DOCTYPE html>
<html>
<head>
<title>Memory Oyunu</title>
<style>
#board {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}
.card {
width: 100px;
height: 100px;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
font-size: 36px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="board"></div>
<script>
let cards = [
{value: 'A', visible: false},
{value: 'B', visible: false},
{value: 'C', visible: false},
{value: 'D', visible: false},
{value: 'A', visible: false},
{value: 'B', visible: false},
{value: 'C', visible: false},
{value: 'D', visible: false}
];
let board = document.getElementById('board');
let selectedCards = [];

for (let i = 0; i < cards.length; i++) {
let card = document.createElement('div');
card.classList.add('card');
card.textContent = '';
card.dataset.value = cards[i].value;
card.addEventListener('click', () => {
if (!cards[i].visible) {
card.textContent = cards[i].value;
cards[i].visible = true;
selectedCards.push(card);
if (selectedCards.length === 2) {
if (selectedCards[0].dataset.value === selectedCards[1].dataset.value) {
console.log('Match!');
} else {
setTimeout(() => {
selectedCards[0].textContent = '';
selectedCards[1].textContent = '';
cards.find((card) => card.value === selectedCards[0].dataset.value).visible = false;
cards.find((card) => card.value === selectedCards[1].dataset.value).visible = false;
}, 1000);
}
selectedCards = [];
}
}
});
board.appendChild(card);
}
</script>
</body>
</html>
```

**9. Maze Oyunu**

Maze oyununu oluşturmak için biraz daha fazla kod gereklidir.

```html
<!DOCTYPE html>
<html>
<head>
<title>Maze Oyunu</title>
<style>
#canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let player = {x: 10, y: 10};

function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'white';
ctx.fillRect(player.x, player.y, 10, 10);
// Draw maze
ctx.fillStyle = 'gray';
ctx.fillRect(100, 100, 20, 200);
ctx.fillRect(200, 50, 20, 200);
ctx.fillRect(300, 100, 20, 200);
}

function update() {
// Update player position
}

setInterval(() => {
update();
draw();
}, 1000 / 60);

document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowUp') {
player.y -= 10;
} else if (e.key === 'ArrowDown') {
player.y += 10;
} else if (e.key === 'ArrowLeft') {
player.x -= 10;
} else if (e.key === 'ArrowRight') {
player.x += 10;
}
});
</script>
</body>
</html>
```

**10. Space Invaders**

Space Invaders oyununu oluşturmak için biraz daha fazla kod gereklidir.

```html
<!DOCTYPE html>
<html>
<head>
<title>Space Invaders</title>
<style>
#canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let player = {x: 200, y: 300, width: 20, height: 20};
let aliens = [];

for (let i = 0; i < 10; i++) {
aliens.push({x: i * 30, y: 50, width: 20, height: 20});
}

function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'white';
ctx.fillRect(player.x, player.y, player.width, player.height);
aliens.forEach((alien) => {
ctx.fillRect(alien.x, alien.y, alien.width, alien.height);
});
}

function update() {
// Update player position
// Update aliens position
}

setInterval(() => {
update();
draw();
}, 1000 / 60);

document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft') {
player.x -= 10;
} else if (e.key === 'ArrowRight') {
player.x += 10;
} else if (e.key === ' ') {
// Shoot bullet
}
});
</script>
</body>
</html>
```

Bu kodlar, belirttiğiniz oyunların basit birer örneğidir. Her bir oyunu daha detaylı ve kompleks hale getirmek için ek kodlar yazmanız gerekebilir.

Benzer Konular
Konu	Konuyu Başlatan	Forum	Cevaplar	Son Mesaj
Çözüldü Küçük Bir Kod İsteği	Sabit1	mIRC Scripting Sorunları	10	09 Nisan 2019 16:05
BNC & ZNC & sBNC İsteği	yasar1122	Eggdrop, NeoStats, BNC	6	18 Temmuz 2013 05:03
Remote İsteği	mirckur	mIRC Scripting Sorunları	15	05 Aralık 2010 08:12
3 Tane TCL İsteği.	RmX78	Eggdrop, NeoStats, BNC	3	16 Mayıs 2010 01:22
TCL İsteği.	DrWat	TCL Scriptler	0	31 Ocak 2008 11:33

Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)

Etiketlenen Kullanıcılar
Etiketlemek istediğiniz kullanıcılar arasına virgül koyunuz. Örnek: nokta,sukunet,NucLear

5846 sayılı Fikir ve Sanat Eserleri Kanunu gereğince sitemizde telif hakkı bulunan mp3,video v.b. eserlerin paylaşımı yasaktır. Yasal işlem olması halinde paylaşan kişi yada kişilerin bilgileri gerekli kuruma verilecektir.