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.