- Qoşulub
- 1 Oktyabr 2022
- Mesajlar
- 121
Salam! Sizinlə klassik ilan oyununu açıq mənbə kodu kimi Mast.Az platformasında paylaşmaq istədim. Bu oyunu kompüterinizdə və ya istənilən platformada asanlıqla işə sala bilərsiniz. Oyun qaranlıq rejimdə, ağ ilan və yaşıl yem ilə daha şux və xoş bir təcrübə təqdim edir.
Bu açıq mənbə kodu ilə ilan oyununu öz ehtiyaclarınıza uyğun fərdiləşdirə və paylaşa bilərsiniz. Elə indi oynamağa başlayın və bu nostalji əyləncədən zövq alın!
Xüsusiyyətlər:
- Qaranlıq rejim və inkişaf etmiş qrafika – İlan ağ, yem isə yaşıl rəngdədir. Təkmilləşdirilmiş kölgə effektləri və yumşaq kənarlar oyunun daha realistik və estetik görünməsini təmin edir.
- Çətinlik seçimləri – Asan, orta və çətin çətinlik səviyyələri ilə oyun təcrübəsini fərdiləşdirə bilərsiniz.
- Xal cədvəli – Xalınızı asanlıqla izləyə biləcəyiniz bir skor sistemi mövcuddur.
- Divarlar və maneələr – İlanın hərəkət sahəsi genişləndirilib və divarlar əlavə edilərək oyun daha çətin və maraqlı hala gətirilib.
Bu açıq mənbə kodu ilə ilan oyununu öz ehtiyaclarınıza uyğun fərdiləşdirə və paylaşa bilərsiniz. Elə indi oynamağa başlayın və bu nostalji əyləncədən zövq alın!
HTML:
<!DOCTYPE html>
<html lang="az">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>İlan Oyunu</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
background-color: #1a202c;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
overflow: hidden;
}
canvas {
border: 4px solid #2d3748;
margin: auto;
display: block;
background-color: #1a202c;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
}
.game-over {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
padding: 20px;
background-color: rgba(0, 0, 0, 0.8);
border-radius: 10px;
text-align: center;
color: white;
animation: fadeIn 0.5s ease-out;
}
.game-over.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.snake-body {
fill: #FFFFFF;
border-radius: 5px; /* Yumuşaq kənarlar */
}
.food {
fill: #48BB78;
border-radius: 5px; /* Yumuşaq kənarlar */
}
.walls {
fill: #2d3748;
}
.score-board {
position: absolute;
top: 10px;
left: 10px;
padding: 10px;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 5px;
color: white;
font-size: 18px;
}
</style>
</head>
<body>
<div class="game-over" id="gameOver">
<h2 class="text-3xl font-bold">Oyun Bitdi!</h2>
<p class="mt-4">Sizin nəticəniz: <span id="finalScore">0</span></p>
<button class="mt-6 p-2 bg-red-500 rounded text-white" onclick="restartGame()">Yenidən Başla</button>
</div>
<h1 class="text-4xl font-bold text-white mb-8">İlan Oyunu</h1>
<div class="mb-4">
<label for="difficulty" class="text-white text-lg">Çətinlik Seçimi:</label>
<select id="difficulty" class="ml-2 p-2 rounded bg-gray-700 text-white">
<option value="easy">Asan</option>
<option value="medium">Orta</option>
<option value="hard">Çətin</option>
</select>
</div>
<div class="score-board">
<p>Xal: <span id="score">0</span></p>
</div>
<canvas id="gameCanvas" width="600" height="600"></canvas>
<p class="text-white text-xl mt-4">Xal: <span id="score">0</span></p>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreDisplay = document.getElementById('score');
const finalScore = document.getElementById('finalScore');
const gameOver = document.getElementById('gameOver');
const difficultySelect = document.getElementById('difficulty');
let tileSize = 20;
let snake = [{ x: 300, y: 300 }];
let direction = { x: 0, y: 0 };
let food = generateFood();
let score = 0;
let gameSpeed = 200;
function generateFood() {
let x, y;
do {
x = Math.floor(Math.random() * (canvas.width / tileSize)) * tileSize;
y = Math.floor(Math.random() * (canvas.height / tileSize)) * tileSize;
} while (isCollisionWithWalls(x, y) || isCollisionWithSnake(x, y));
return { x, y };
}
function isCollisionWithWalls(x, y) {
return x < tileSize || x >= canvas.width - tileSize || y < tileSize || y >= canvas.height - tileSize;
}
function isCollisionWithSnake(x, y) {
return snake.some(segment => segment.x === x && segment.y === y);
}
const setSpeed = (difficulty) => {
if (difficulty === 'easy') gameSpeed = 200;
else if (difficulty === 'medium') gameSpeed = 150;
else if (difficulty === 'hard') gameSpeed = 100;
};
difficultySelect.addEventListener('change', (e) => {
setSpeed(e.target.value);
});
const drawSnake = () => {
ctx.fillStyle = '#FFFFFF';
ctx.shadowColor = '#000';
ctx.shadowBlur = 10;
snake.forEach(segment => {
ctx.fillRect(segment.x, segment.y, tileSize, tileSize);
});
};
const drawFood = () => {
ctx.fillStyle = '#48BB78';
ctx.shadowColor = '#000';
ctx.shadowBlur = 10;
ctx.fillRect(food.x, food.y, tileSize, tileSize);
};
const drawWalls = () => {
ctx.fillStyle = '#2d3748';
ctx.fillRect(0, 0, canvas.width, tileSize); // üst divar
ctx.fillRect(0, canvas.height - tileSize, canvas.width, tileSize); // alt divar
ctx.fillRect(0, 0, tileSize, canvas.height); // sol divar
ctx.fillRect(canvas.width - tileSize, 0, tileSize, canvas.height); // sağ divar
};
const moveSnake = () => {
const head = { x: snake[0].x + direction.x * tileSize, y: snake[0].y + direction.y * tileSize };
snake.unshift(head);
if (head.x === food.x && head.y === food.y) {
score += 10;
scoreDisplay.textContent = score;
food = generateFood();
animateFoodEaten();
} else {
snake.pop();
}
};
const checkCollision = () => {
const head = snake[0];
if (head.x < tileSize || head.x >= canvas.width - tileSize ||
head.y < tileSize || head.y >= canvas.height - tileSize) {
return true;
}
for (let i = 1; i < snake.length; i++) {
if (snake[i].x === head.x && snake[i].y === head.y) {
return true;
}
}
return false;
};
const gameLoop = () => {
if (checkCollision()) {
gameOver.classList.add('active');
finalScore.textContent = score;
return;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawWalls();
drawFood();
moveSnake();
drawSnake();
setTimeout(gameLoop, gameSpeed);
};
window.addEventListener('keydown', (e) => {
switch (e.key) {
case 'ArrowUp':
if (direction.y === 0) direction = { x: 0, y: -1 };
break;
case 'ArrowDown':
if (direction.y === 0) direction = { x: 0, y: 1 };
break;
case 'ArrowLeft':
if (direction.x === 0) direction = { x: -1, y: 0 };
break;
case 'ArrowRight':
if (direction.x === 0) direction = { x: 1, y: 0 };
break;
}
});
setSpeed(difficultySelect.value);
gameLoop();
const restartGame = () => {
snake = [{ x: 300, y: 300 }];
direction = { x: 0, y: 0 };
score = 0;
scoreDisplay.textContent = score;
gameOver.classList.remove('active');
gameLoop();
};
const animateFoodEaten = () => {
const foodX = food.x;
const foodY = food.y;
ctx.fillStyle = '#48BB78';
ctx.shadowColor = '#000';
ctx.shadowBlur = 10;
ctx.fillRect(food.x, food.y, tileSize, tileSize);
ctx.clearRect(foodX, foodY, tileSize, tileSize);
};
</script>
</body>
</html>
Sonuncu redaktə:
