Игры

.game-block:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,184,148,0.5);
}

.game-block button:hover {
transform: scale(1.05);
box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

#turtleCloseBtn:hover,
#turtleCloseBtn:focus {
color: #ff7675;
}

#turtleWinClose:hover {
transform: scale(1.05);
background: #ffeaa7;
}

(function() {
// Game Variables
const modal = document.getElementById(‘turtleGameModal’);
const winModal = document.getElementById(‘turtleWinModal’);
const gameBlock = document.getElementById(‘turtleGameBlock’);
const closeBtn = document.getElementById(‘turtleCloseBtn’);
const winCloseBtn = document.getElementById(‘turtleWinClose’);
const canvas = document.getElementById(‘turtleGameCanvas’);
const ctx = canvas.getContext(‘2d’);
const scoreElement = document.getElementById(‘turtleScore’);

const GRID_SIZE = 16;
const CELL_SIZE = canvas.width / GRID_SIZE;
const MAX_LENGTH = 256;

// Turtle colors (Leonardo, Raphael, Donatello, Michelangelo cycle)
const TURTLE_COLORS = [‘#0984e3’, ‘#d63031’, ‘#6c5ce7’, ‘#fdcb6e’];
const TURTLE_NAMES = [‘Леонардо’, ‘Рафаэль’, ‘Донателло’, ‘Микеланджело’];

let turtle = [];
let direction = { x: 1, y: 0 };
let nextDirection = { x: 1, y: 0 };
let pizza = {};
let score = 0;
let gameLoop = null;
let gameSpeed = 150;

// Open modal and start game
gameBlock.addEventListener(‘click’, function() {
modal.style.display = ‘block’;
initGame();
});

// Close modal
closeBtn.addEventListener(‘click’, function() {
modal.style.display = ‘none’;
stopGame();
});

// Close win modal
winCloseBtn.addEventListener(‘click’, function() {
winModal.style.display = ‘none’;
modal.style.display = ‘none’;
stopGame();
});

// Close on outside click
window.addEventListener(‘click’, function(event) {
if (event.target == modal) {
modal.style.display = ‘none’;
stopGame();
}
if (event.target == winModal) {
winModal.style.display = ‘none’;
modal.style.display = ‘none’;
stopGame();
}
});

// Keyboard controls
document.addEventListener(‘keydown’, function(e) {
if (modal.style.display !== ‘block’ || !gameLoop) return;

switch(e.key) {
case ‘ArrowUp’:
if (direction.y === 0) {
nextDirection = { x: 0, y: -1 };
}
e.preventDefault();
break;
case ‘ArrowDown’:
if (direction.y === 0) {
nextDirection = { x: 0, y: 1 };
}
e.preventDefault();
break;
case ‘ArrowLeft’:
if (direction.x === 0) {
nextDirection = { x: -1, y: 0 };
}
e.preventDefault();
break;
case ‘ArrowRight’:
if (direction.x === 0) {
nextDirection = { x: 1, y: 0 };
}
e.preventDefault();
break;
}
});

function initGame() {
// Reset game state
turtle = [{ x: 8, y: 8 }];
direction = { x: 1, y: 0 };
nextDirection = { x: 1, y: 0 };
score = 0;
scoreElement.textContent = score;
gameSpeed = 150;

spawnPizza();

if (gameLoop) {
clearInterval(gameLoop);
}

gameLoop = setInterval(updateGame, gameSpeed);
}

function stopGame() {
if (gameLoop) {
clearInterval(gameLoop);
gameLoop = null;
}
}

function spawnPizza() {
let validPositions = [];

for (let x = 0; x < GRID_SIZE; x++) {
for (let y = 0; y segment.x === x && segment.y === y);
if (!isOccupied) {
validPositions.push({ x, y });
}
}
}

if (validPositions.length > 0) {
pizza = validPositions[Math.floor(Math.random() * validPositions.length)];
}
}

function updateGame() {
direction = nextDirection;

// Calculate new head position
const head = {
x: turtle[0].x + direction.x,
y: turtle[0].y + direction.y
};

// Check wall collision
if (head.x = GRID_SIZE || head.y = GRID_SIZE) {
gameOver();
return;
}

// Check self collision
if (turtle.some(segment => segment.x === head.x && segment.y === head.y)) {
gameOver();
return;
}

// Add new head
turtle.unshift(head);

// Check pizza collision
if (head.x === pizza.x && head.y === pizza.y) {
score++;
scoreElement.textContent = score;

// Increase speed slightly
if (score % 5 === 0 && gameSpeed > 50) {
gameSpeed = Math.max(50, gameSpeed – 10);
clearInterval(gameLoop);
gameLoop = setInterval(updateGame, gameSpeed);
}

// Check win condition
if (turtle.length >= MAX_LENGTH) {
winGame();
return;
}

spawnPizza();
} else {
// Remove tail if no pizza eaten
turtle.pop();
}

draw();
}

function draw() {
// Clear canvas
ctx.fillStyle = ‘#2d3436’;
ctx.fillRect(0, 0, canvas.width, canvas.height);

// Draw grid lines
ctx.strokeStyle = ‘rgba(255,255,255,0.05)’;
ctx.lineWidth = 1;
for (let i = 0; i {
const colorIndex = index % TURTLE_COLORS.length;
ctx.fillStyle = TURTLE_COLORS[colorIndex];

// Main body with rounded corners
ctx.beginPath();
roundRect(ctx,
segment.x * CELL_SIZE + 2,
segment.y * CELL_SIZE + 2,
CELL_SIZE – 4,
CELL_SIZE – 4,
6
);
ctx.fill();

// Add shine effect
const gradient = ctx.createRadialGradient(
segment.x * CELL_SIZE + CELL_SIZE * 0.3,
segment.y * CELL_SIZE + CELL_SIZE * 0.3,
0,
segment.x * CELL_SIZE + CELL_SIZE * 0.5,
segment.y * CELL_SIZE + CELL_SIZE * 0.5,
CELL_SIZE * 0.7
);
gradient.addColorStop(0, ‘rgba(255,255,255,0.3)’);
gradient.addColorStop(1, ‘rgba(255,255,255,0)’);
ctx.fillStyle = gradient;
ctx.beginPath();
roundRect(ctx,
segment.x * CELL_SIZE + 2,
segment.y * CELL_SIZE + 2,
CELL_SIZE – 4,
CELL_SIZE – 4,
6
);
ctx.fill();

// Draw eyes on head (first segment)
if (index === 0) {
ctx.fillStyle = ‘white’;
ctx.beginPath();
ctx.arc(segment.x * CELL_SIZE + CELL_SIZE * 0.35, segment.y * CELL_SIZE + CELL_SIZE * 0.4, 3, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.arc(segment.x * CELL_SIZE + CELL_SIZE * 0.65, segment.y * CELL_SIZE + CELL_SIZE * 0.4, 3, 0, Math.PI * 2);
ctx.fill();

// Pupils
ctx.fillStyle = ‘black’;
ctx.beginPath();
ctx.arc(segment.x * CELL_SIZE + CELL_SIZE * 0.35 + direction.x * 1.5,
segment.y * CELL_SIZE + CELL_SIZE * 0.4 + direction.y * 1.5, 1.5, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.arc(segment.x * CELL_SIZE + CELL_SIZE * 0.65 + direction.x * 1.5,
segment.y * CELL_SIZE + CELL_SIZE * 0.4 + direction.y * 1.5, 1.5, 0, Math.PI * 2);
ctx.fill();
}
});

// Draw pizza
if (pizza.x !== undefined) {
// Pizza slice
ctx.fillStyle = ‘#fdcb6e’;
ctx.beginPath();
ctx.moveTo(pizza.x * CELL_SIZE + CELL_SIZE * 0.5, pizza.y * CELL_SIZE + CELL_SIZE * 0.2);
ctx.lineTo(pizza.x * CELL_SIZE + CELL_SIZE * 0.2, pizza.y * CELL_SIZE + CELL_SIZE * 0.8);
ctx.lineTo(pizza.x * CELL_SIZE + CELL_SIZE * 0.8, pizza.y * CELL_SIZE + CELL_SIZE * 0.8);
ctx.closePath();
ctx.fill();

// Pizza crust
ctx.strokeStyle = ‘#e17055’;
ctx.lineWidth = 2;
ctx.stroke();

// Pepperoni
ctx.fillStyle = ‘#d63031’;
ctx.beginPath();
ctx.arc(pizza.x * CELL_SIZE + CELL_SIZE * 0.45, pizza.y * CELL_SIZE + CELL_SIZE * 0.5, 3, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.arc(pizza.x * CELL_SIZE + CELL_SIZE * 0.6, pizza.y * CELL_SIZE + CELL_SIZE * 0.6, 3, 0, Math.PI * 2);
ctx.fill();
}
}

function roundRect(ctx, x, y, width, height, radius) {
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width – radius, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
ctx.lineTo(x + width, y + height – radius);
ctx.quadraticCurveTo(x + width, y + height, x + width – radius, y + height);
ctx.lineTo(x + radius, y + height);
ctx.quadraticCurveTo(x, y + height, x, y + height – radius);
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y);
ctx.closePath();
}

function gameOver() {
stopGame();
alert(‘Игра окончена! Счёт: ‘ + score);
initGame();
}

function winGame() {
stopGame();
modal.style.display = ‘none’;
winModal.style.display = ‘block’;
}
})();