Merhaba! Ben Aykhan, 1999 doğumlu bir Azerbaycanlıyım ve 2017 yılından bu yana programlamayla ilgileniyorum. Teknolojinin büyülü dünyası beni her zaman etkilemiştir ve bu merakımı kendi blogumda paylaşarak daha geniş bir kitleyle buluşturmayı amaçlıyorum.
"HTML, CSS ve JavaScript ile Basit Bir Yılan Oyunu Oluşturma"
Yılan oyunu, onlarca yıldır oyuncuları kendine çeken klasik bir arcade oyunudur. Oyuncular, yiyecek tüketerek uzayan bir yılanı kontrol ederken, yılanın kendisiyle ve oyun alanının sınırlarıyla çarpışmaktan kaçınmalıdır. Bu makalede, HTML, CSS ve JavaScript kullanarak basit bir yılan oyunu oluşturacağız.
Kodun Genel Görünümü
Verilen kod, oyunun yapısını oluşturmak için HTML, stil vermek için CSS ve oyun mantığı için JavaScript içermektedir. Oyun nasıl oluşturuluyor anlamak için her bölümü inceleyelim.
1. HTML Yapısı
HTML kısmı, oyunun temel yapısını oluşturur. Oyun alanının çizileceği bir canvas öğesi ve skorun görüntüleneceği bir alan içerir.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yılan Oyunu</title>
<style>
/* CSS stilleri burada tanımlanacak */
</style>
</head>
<body>
<div id="game-container">
<canvas id="game-board" width="400" height="400" aria-label="Yılan Oyunu Tahtası" role="img"></canvas>
<div id="score">Skor: 0</div>
</div>
</body>
</html>
- Canvas Öğesi:
<canvas>öğesi, oyunun çizileceği alanı temsil eder. Genişliği ve yüksekliği 400 piksel olarak ayarlanmıştır.
2. CSS Stilleri
Oyun tasarımı için bazı temel stiller tanımlanmıştır. Bu stiller, oyun alanının görünümünü ve sayfanın merkezlenmesini sağlar.
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
#game-container {
text-align: center;
}
#game-board {
border: 2px solid #333;
background-color: #fff;
}
#score {
font-size: 24px;
margin-top: 10px;
}
- Yerli ve Oyun Alanı Tasarımı: Sayfa, flexbox ile ortalanmış ve oyun alanı beyaz bir arka plana sahip olmuştur. Ayrıca, oyun tahtası çevresine bir kenarlık eklenmiştir.
3. JavaScript Mantığı
JavaScript, oyunun temel mantığını kontrol eder. Yılanın hareket etmesini, yiyecekleri çizmesini ve çarpışmaları kontrol eder.
const canvas = document.getElementById('game-board');
const ctx = canvas.getContext('2d');
const scoreElement = document.getElementById('score');
const gridSize = 20;
const tileCount = canvas.width / gridSize;
let snake = [
{ x: 10, y: 10 },
];
let food = getRandomFoodPosition();
let dx = 0;
let dy = 0;
let score = 0;
function getRandomFoodPosition() {
return {
x: Math.floor(Math.random() * tileCount),
y: Math.floor(Math.random() * tileCount)
};
}
- Değişkenler: Yılanın başlangıç pozisyonu, yiyecek konumu ve hareket yönleri tanımlanır. Ayrıca, yılanın ne kadar uzadığını takip etmek için bir skor değişkeni de bulunur.
4. Oyun Fonksiyonları
Oyun, birkaç temel fonksiyonla yönetilir:
- drawGame: Oyunun temel görünümünü çizer.
- clearCanvas: Canvas'ı temizler.
- moveSnake: Yılanı hareket ettirir ve yiyecek yendiğinde skoru günceller.
- checkCollision: Yılanın çarpışmalarını kontrol eder.
function drawGame() {
clearCanvas();
moveSnake();
checkCollision();
drawSnake();
drawFood();
updateScore();
}
function clearCanvas() {
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
Oyun Kontrolleri
Kullanıcı klavye ok tuşlarıyla yılanı kontrol eder. Yılanın yönü değiştirildiğinde hareket yönü güncellenir.
function changeDirection(event) {
const LEFT_KEY = 37;
const RIGHT_KEY = 39;
const UP_KEY = 38;
const DOWN_KEY = 40;
const keyPressed = event.keyCode;
const goingUp = dy === -1;
const goingDown = dy === 1;
const goingRight = dx === 1;
const goingLeft = dx === -1;
if (keyPressed === LEFT_KEY && !goingRight) {
dx = -1;
dy = 0;
}
if (keyPressed === UP_KEY && !goingDown) {
dx = 0;
dy = -1;
}
if (keyPressed === RIGHT_KEY && !goingLeft) {
dx = 1;
dy = 0;
}
if (keyPressed === DOWN_KEY && !goingUp) {
dx = 0;
dy = 1;
}
}
document.addEventListener('keydown', changeDirection);
Bu basit yılan oyunu, HTML, CSS ve JavaScript kullanarak oyun geliştirme temellerini öğrenmek için harika bir örnektir. Kodun her kısmı, oyunun farklı yönlerini yönetir ve kullanıcıya eğlenceli bir deneyim sunar. Geliştiriciler, bu temel yapı üzerinden daha karmaşık oyunlar yaratabilirler. Yılan oyununu kendinize göre özelleştirerek daha fazla özellik eklemek için harika bir başlangıç yapabilirsiniz!
#Javascript
#JavaScript Uygulamaları
#Bilgisayar Oyunları
#Oyun Geliştirme
#Oyun nasıl geliştirilir?
#Oyun geliştirme rehberi
#Oyun programlama
#Adım adım web oyun oluşturma
#Javascript ile oyun
#Html ile oyun
#CSS ile oyun
#HTML5 oyunu
#CSS3 oyunu
#Web oyunlar
#Oyun
#Javascript ile deneyler
#Javascript ile yapılabilecekler
#Javascript ile neler yapıla bilir
#Yılan oyunu yapma
#Yılan oyunu programlama
Aykhan Gasimzade
Full Stack Developer
Beni izleyebilirsin
New Mix Club All Rights Reserved © 2024