Merhaba! Tabii ki, HTML, CSS ve JavaScript kullanarak basit bir yılan oyunu kodlayabilirim. Aşağıda, renkli ve basit bir yılan oyunu örneği bulacaksınız.
**Oyunun Çalışması:**
Oyunda, yılanın hareket ettirilmesi ve elma toplamak için basit kontroller sağlanmıştır. Yılanın hareketi, arrow tuşları ile sağlanmaktadır.
**Kod:**
HTML:
```html
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yılan Oyunu</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script src="script.
js"></script>
</body>
</html>
```
CSS (style.css):
```css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
#gameCanvas {
border: 1px solid black;
}
```
JavaScript (script.
js):
```javascript
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// Oyunun ayarları
const grid = 20;
const snakeColor = 'green';
const foodColor = 'red';
let snake = [{x: grid * 5, y: grid * 5}];
let direction = 'right';
let food = {x: Math.floor(Math.random() * (canvas.width / grid)) * grid,
y: Math.floor(Math.random() * (canvas.height / grid)) * grid};
// Event listener for key presses
document.addEventListener('keydown', (e) => {
switch (e.key) {
case 'ArrowUp':
if (direction !== 'down') direction = 'up';
break;
case 'ArrowDown':
if (direction !== 'up') direction = 'down';
break;
case 'ArrowLeft':
if (direction !== 'right') direction = 'left';
break;
case 'ArrowRight':
if (direction !== 'left') direction = 'right';
break;
}
});
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Yılanı çiz
snake.forEach((part, index) => {
ctx.fillStyle = index === 0 ? snakeColor : 'rgba(0, 128, 0, 0.5)';
ctx.fillRect(part.x, part.y, grid, grid);
});
// Elmayı çiz
ctx.fillStyle = foodColor;
ctx.fillRect(food.x, food.y, grid, grid);
}
function update() {
let head = {x: snake[0].x, y: snake[0].y};
switch (direction) {
case 'up':
head.y -= grid;
break;
case 'down':
head.y += grid;
break;
case 'left':
head.x -= grid;
break;
case 'right':
head.x += grid;
break;
}
snake.unshift(head);
if (snake[0].x === food.x && snake[0].y === food.y) {
food = {x: Math.floor(Math.random() * (canvas.width / grid)) * grid,
y: Math.floor(Math.random() * (canvas.height / grid)) * grid};
} else {
snake.pop();
}
// Çarpışma kontrolü
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!');
snake = [{x: grid * 5, y: grid * 5}];
direction = 'right';
}
}
function loop() {
update();
draw();
requestAnimationFrame(loop);
}
loop();
```
**Not:** Yukarıdaki kod, basit bir yılan oyunu oluşturur. Oyunu geliştirmek için daha fazla özellik eklenebilir, örneğin skor sistemi, seviyeler,
vb.
Bu kodları kullanarak, renkli ve basit bir yılan oyunu elde edeceksiniz. HTML, CSS ve JavaScript dosyalarını aynı dizinde oluşturup, HTML dosyasını tarayıcıda açarak oyunu oynayabilirsiniz.