Spaces:

offerpk3
/

Avarush

Running

App Files Files Community

Avarush / index.html

offerpk3

Update index.html

6f90d62 verified about 1 year ago

raw

history blame contribute delete

44.1 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>AvaRush - Adventure Match Game</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: 'Arial', sans-serif;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	min-height: 100vh;
	overflow-x: hidden;
	}

	.game-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 10px;
	}

	.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	padding: 15px 20px;
	border-radius: 15px;
	margin-bottom: 10px;
	}

	.logo {
	font-size: 2.5em;
	font-weight: bold;
	background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
	}

	.nav-buttons {
	display: flex;
	gap: 10px;
	}

	.nav-btn {
	padding: 10px 20px;
	background: linear-gradient(45deg, #ff6b6b, #ee5a52);
	color: white;
	border: none;
	border-radius: 25px;
	cursor: pointer;
	font-weight: bold;
	transition: all 0.3s ease;
	}

	.nav-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(0,0,0,0.3);
	}

	.game-area {
	display: flex;
	gap: 20px;
	height: 600px;
	}

	.left-panel, .right-panel {
	width: 200px;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	border-radius: 15px;
	padding: 20px;
	color: white;
	}

	.game-board {
	flex: 1;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	border-radius: 15px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	}

	.score-info {
	text-align: right;
	margin-bottom: 20px;
	}

	.score-item {
	background: rgba(255, 255, 255, 0.2);
	padding: 10px;
	border-radius: 10px;
	margin-bottom: 10px;
	}

	.moves-info {
	text-align: left;
	margin-bottom: 20px;
	}

	.canvas-container {
	position: relative;
	border-radius: 15px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0,0,0,0.3);
	}

	canvas {
	display: block;
	background: #2c3e50;
	}

	.game-controls {
	display: flex;
	gap: 10px;
	margin-top: 20px;
	}

	.control-btn {
	padding: 15px 30px;
	font-size: 18px;
	border: none;
	border-radius: 25px;
	cursor: pointer;
	font-weight: bold;
	transition: all 0.3s ease;
	}

	.play-btn {
	background: linear-gradient(45deg, #4ecdc4, #44a08d);
	color: white;
	}

	.pause-btn {
	background: linear-gradient(45deg, #ffa726, #ff7043);
	color: white;
	}

	.control-btn:hover {
	transform: scale(1.05);
	}

	.objective-info {
	background: rgba(255, 255, 255, 0.2);
	padding: 15px;
	border-radius: 10px;
	text-align: center;
	color: white;
	font-weight: bold;
	margin-bottom: 20px;
	}

	.level-info {
	text-align: center;
	margin: 20px 0;
	}

	.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
	z-index: 1000;
	}

	.modal-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 30px;
	border-radius: 20px;
	color: white;
	text-align: center;
	min-width: 300px;
	}

	.toast {
	position: fixed;
	top: 20px;
	right: 20px;
	background: linear-gradient(45deg, #4ecdc4, #44a08d);
	color: white;
	padding: 15px 25px;
	border-radius: 10px;
	z-index: 1001;
	transform: translateX(400px);
	transition: transform 0.3s ease;
	}

	.toast.show {
	transform: translateX(0);
	}

	.gem {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	display: inline-block;
	margin: 2px;
	cursor: pointer;
	transition: all 0.2s ease;
	}

	.gem:hover {
	transform: scale(1.1);
	}

	.gem-red { background: linear-gradient(45deg, #ff6b6b, #ee5a52); }
	.gem-blue { background: linear-gradient(45deg, #4ecdc4, #44a08d); }
	.gem-green { background: linear-gradient(45deg, #a8e6cf, #88d8a3); }
	.gem-yellow { background: linear-gradient(45deg, #ffd93d, #ffb74d); }
	.gem-purple { background: linear-gradient(45deg, #b19cd9, #9b59b6); }
	.gem-ice { background: linear-gradient(45deg, #e3f2fd, #bbdefb); border: 2px solid #2196f3; }

	.modal-buttons {
	display: flex;
	gap: 15px;
	justify-content: center;
	margin-top: 20px;
	}

	.modal-btn {
	padding: 10px 20px;
	border: none;
	border-radius: 20px;
	cursor: pointer;
	font-weight: bold;
	transition: all 0.3s ease;
	}

	.close-btn {
	background: #e74c3c;
	color: white;
	}

	.continue-btn {
	background: #27ae60;
	color: white;
	}
	</style>
	</head>
	<body>
	<div class="game-container">
	<div class="header">
	<div class="logo">AvaRush</div>
	<div class="nav-buttons">
	<button class="nav-btn" onclick="showModal('shop')">Shop</button>
	<button class="nav-btn" onclick="showModal('equip')">Equip</button>
	<button class="nav-btn" onclick="showModal('friends')">Friends</button>
	<button class="nav-btn" onclick="showModal('tasks')">Tasks</button>
	<button class="nav-btn" onclick="showModal('rating')">Rating</button>
	<button class="nav-btn" onclick="showModal('boosters')">Boosters</button>
	<button class="nav-btn" onclick="showModal('skins')">Skins</button>
	</div>
	</div>

	<div class="game-area">
	<div class="left-panel">
	<div class="moves-info">
	<h3>Moves</h3>
	<div class="score-item">
	<div style="font-size: 2em; color: #4ecdc4;" id="moves-count">25</div>
	</div>
	</div>
	<div class="objective-info">
	<div>Crush Ice</div>
	<div style="font-size: 1.5em; color: #4ecdc4;" id="ice-count">0/28</div>
	</div>
	<div class="level-info">
	<h3>Level</h3>
	<div style="font-size: 2em; color: #ffd93d;" id="player-level">1</div>
	<div style="font-size: 0.9em; margin-top: 5px;" id="map-name">Forest Valley</div>
	</div>
	</div>

	<div class="game-board">
	<div class="canvas-container">
	<canvas id="gameCanvas" width="480" height="480"></canvas>
	</div>
	<div class="game-controls">
	<button class="control-btn pause-btn" onclick="pauseGame()" id="pauseBtn">Pause</button>
	<button class="control-btn play-btn" onclick="playGame()" id="playBtn" style="display: none;">Play</button>
	</div>
	</div>

	<div class="right-panel">
	<div class="score-info">
	<h3>Score</h3>
	<div class="score-item">
	<div style="font-size: 2em; color: #ff6b6b;" id="score">0</div>
	</div>
	<div class="score-item">
	<div>High Score</div>
	<div style="color: #ffd93d;" id="high-score">1250</div>
	</div>
	<div class="score-item">
	<div>Level Progress</div>
	<div style="color: #4ecdc4;" id="level-progress">Level 1/30</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Modals -->
	<div id="modal" class="modal">
	<div class="modal-content">
	<div id="modal-title"></div>
	<div id="modal-body"></div>
	<div class="modal-buttons">
	<button class="modal-btn close-btn" onclick="closeModal()">Close</button>
	</div>
	</div>
	</div>

	<!-- Toast Notification -->
	<div id="toast" class="toast"></div>

	<script>
	// Game state
	let gameState = {
	score: 0,
	moves: 25,
	level: 1,
	iceCount: 0,
	iceTarget: 28,
	isPaused: false,
	currentMap: 'forest',
	gems: [],
	selectedGem: null,
	animations: [],
	fallingGems: [],
	isAnimating: false
	};

	// Audio context for sound effects
	let audioContext;

	function initAudio() {
	try {
	audioContext = new (window.AudioContext \|\| window.webkitAudioContext)();
	} catch (e) {
	console.log('Audio not supported');
	}
	}

	function playSound(frequency, duration, type = 'sine') {
	if (!audioContext) return;

	const oscillator = audioContext.createOscillator();
	const gainNode = audioContext.createGain();

	oscillator.connect(gainNode);
	gainNode.connect(audioContext.destination);

	oscillator.frequency.setValueAtTime(frequency, audioContext.currentTime);
	oscillator.type = type;

	gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
	gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + duration);

	oscillator.start(audioContext.currentTime);
	oscillator.stop(audioContext.currentTime + duration);
	}

	function playMatchSound() {
	// Pleasant chime sound for matches
	playSound(523.25, 0.2); // C5
	setTimeout(() => playSound(659.25, 0.2), 100); // E5
	setTimeout(() => playSound(783.99, 0.3), 200); // G5
	}

	function playDropSound() {
	// Soft drop sound
	playSound(220, 0.15, 'triangle');
	}

	function playIceBreakSound() {
	// Crystal break sound
	playSound(1000, 0.1, 'square');
	setTimeout(() => playSound(800, 0.1, 'square'), 50);
	setTimeout(() => playSound(600, 0.1, 'square'), 100);
	}

	// Game maps with different backgrounds
	const maps = {
	forest: { name: 'Forest Valley', bg: '#2d5016', levels: [1,2,3,4,5,6,7,8,9,10] },
	desert: { name: 'Desert Oasis', bg: '#8b4513', levels: [11,12,13,14,15,16,17,18,19,20] },
	skylands: { name: 'Sky Realm', bg: '#4169e1', levels: [21,22,23,24,25,26,27,28,29,30] }
	};

	// Canvas setup
	const canvas = document.getElementById('gameCanvas');
	const ctx = canvas.getContext('2d');
	const gridSize = 8;
	const gemSize = 60;

	// Game elements (natural themed)
	const gemTypes = ['wood', 'water', 'snake', 'bee', 'whale', 'fish'];
	const gemColors = {
	wood: '#8B4513',
	water: '#4682B4',
	snake: '#228B22',
	bee: '#FFD700',
	whale: '#4169E1',
	fish: '#FF6347'
	};

	// Initialize game
	function initGame() {
	createGemGrid();
	updateUI();
	updateMapTheme();
	gameLoop();
	}

	function createGemGrid() {
	gameState.gems = [];
	for (let row = 0; row < gridSize; row++) {
	gameState.gems[row] = [];
	for (let col = 0; col < gridSize; col++) {
	gameState.gems[row][col] = {
	type: gemTypes[Math.floor(Math.random() * gemTypes.length)],
	x: col * gemSize,
	y: row * gemSize,
	isIce: Math.random() < 0.1 // 10% chance for ice blocks
	};
	}
	}
	// Add some ice gems for the objective
	addIceGems();
	}

	function addIceGems() {
	let iceAdded = 0;
	while (iceAdded < gameState.iceTarget && iceAdded < 15) {
	const row = Math.floor(Math.random() * gridSize);
	const col = Math.floor(Math.random() * gridSize);
	if (!gameState.gems[row][col].isIce) {
	gameState.gems[row][col].isIce = true;
	iceAdded++;
	}
	}
	}

	function drawGame() {
	// Clear canvas with map-specific background
	const currentMapData = Object.values(maps).find(map =>
	map.levels.includes(gameState.level)
	) \|\| maps.forest;

	ctx.fillStyle = currentMapData.bg;
	ctx.fillRect(0, 0, canvas.width, canvas.height);

	// Draw grid background
	ctx.strokeStyle = 'rgba(255,255,255,0.1)';
	ctx.lineWidth = 1;
	for (let i = 0; i <= gridSize; i++) {
	ctx.beginPath();
	ctx.moveTo(i * gemSize, 0);
	ctx.lineTo(i * gemSize, canvas.height);
	ctx.stroke();

	ctx.beginPath();
	ctx.moveTo(0, i * gemSize);
	ctx.lineTo(canvas.width, i * gemSize);
	ctx.stroke();
	}

	// Draw gems (including falling ones)
	for (let row = 0; row < gridSize; row++) {
	for (let col = 0; col < gridSize; col++) {
	const gem = gameState.gems[row][col];
	if (gem && !gem.isMatched) {
	drawGem(gem, col * gemSize, row * gemSize);
	}
	}
	}

	// Draw falling gems with animation
	gameState.fallingGems.forEach(fallingGem => {
	drawGem(fallingGem.gem, fallingGem.x, fallingGem.y);
	});

	// Draw match animations
	gameState.animations.forEach(animation => {
	drawMatchAnimation(animation);
	});

	// Highlight selected gem
	if (gameState.selectedGem && !gameState.isAnimating) {
	const { row, col } = gameState.selectedGem;
	ctx.strokeStyle = '#fff';
	ctx.lineWidth = 3;
	ctx.strokeRect(col * gemSize + 2, row * gemSize + 2, gemSize - 4, gemSize - 4);
	}
	}

	function drawMatchAnimation(animation) {
	const progress = (Date.now() - animation.startTime) / animation.duration;
	if (progress >= 1) return;

	const alpha = 1 - progress;
	const scale = 1 + progress * 0.5;

	ctx.save();
	ctx.globalAlpha = alpha;
	ctx.translate(animation.x + gemSize/2, animation.y + gemSize/2);
	ctx.scale(scale, scale);
	ctx.translate(-gemSize/2, -gemSize/2);

	// Draw sparkle effect
	ctx.fillStyle = '#FFD700';
	for (let i = 0; i < 8; i++) {
	const angle = (i / 8) * Math.PI * 2;
	const x = Math.cos(angle) * 20 * progress;
	const y = Math.sin(angle) * 20 * progress;
	ctx.beginPath();
	ctx.arc(gemSize/2 + x, gemSize/2 + y, 3, 0, Math.PI * 2);
	ctx.fill();
	}

	ctx.restore();
	}

	function drawGem(gem, x, y) {
	const padding = 4;
	const size = gemSize - padding * 2;
	const centerX = x + padding + size/2;
	const centerY = y + padding + size/2;

	ctx.save();

	// Draw different shapes based on gem type
	switch(gem.type) {
	case 'wood':
	drawWood(centerX, centerY, size);
	break;
	case 'water':
	drawWaterDrop(centerX, centerY, size);
	break;
	case 'snake':
	drawSnake(centerX, centerY, size);
	break;
	case 'bee':
	drawBee(centerX, centerY, size);
	break;
	case 'whale':
	drawWhale(centerX, centerY, size);
	break;
	case 'fish':
	drawFish(centerX, centerY, size);
	break;
	}

	// Draw ice overlay if applicable
	if (gem.isIce) {
	ctx.strokeStyle = '#87CEEB';
	ctx.lineWidth = 3;
	ctx.strokeRect(x + padding, y + padding, size, size);

	// Ice crystal pattern
	ctx.strokeStyle = 'rgba(135, 206, 235, 0.7)';
	ctx.lineWidth = 2;
	ctx.beginPath();
	ctx.moveTo(centerX, y + padding);
	ctx.lineTo(centerX, y + padding + size);
	ctx.moveTo(x + padding, centerY);
	ctx.lineTo(x + padding + size, centerY);
	ctx.moveTo(x + padding + size/4, y + padding + size/4);
	ctx.lineTo(x + padding + 3size/4, y + padding + 3size/4);
	ctx.moveTo(x + padding + 3*size/4, y + padding + size/4);
	ctx.lineTo(x + padding + size/4, y + padding + 3*size/4);
	ctx.stroke();
	}

	ctx.restore();
	}

	function drawWood(centerX, centerY, size) {
	const radius = size * 0.4;

	// Wood background
	const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, radius);
	gradient.addColorStop(0, '#D2691E');
	gradient.addColorStop(1, '#8B4513');
	ctx.fillStyle = gradient;
	ctx.beginPath();
	ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
	ctx.fill();

	// Wood rings
	ctx.strokeStyle = '#654321';
	ctx.lineWidth = 2;
	for(let i = 1; i <= 3; i++) {
	ctx.beginPath();
	ctx.arc(centerX, centerY, radius * 0.3 * i, 0, Math.PI * 2);
	ctx.stroke();
	}
	}

	function drawWaterDrop(centerX, centerY, size) {
	const radius = size * 0.4;

	// Water drop shape
	const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, radius);
	gradient.addColorStop(0, '#87CEEB');
	gradient.addColorStop(1, '#4682B4');
	ctx.fillStyle = gradient;

	ctx.beginPath();
	ctx.arc(centerX, centerY + radius * 0.2, radius * 0.8, 0, Math.PI * 2);
	ctx.moveTo(centerX, centerY - radius);
	ctx.quadraticCurveTo(centerX - radius * 0.5, centerY, centerX, centerY + radius * 0.2);
	ctx.quadraticCurveTo(centerX + radius * 0.5, centerY, centerX, centerY - radius);
	ctx.fill();

	// Highlight
	ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
	ctx.beginPath();
	ctx.arc(centerX - radius * 0.3, centerY - radius * 0.3, radius * 0.2, 0, Math.PI * 2);
	ctx.fill();
	}

	function drawSnake(centerX, centerY, size) {
	const radius = size * 0.15;

	// Snake body (S-curve)
	ctx.strokeStyle = '#228B22';
	ctx.lineWidth = radius;
	ctx.lineCap = 'round';
	ctx.beginPath();
	ctx.moveTo(centerX - size * 0.3, centerY - size * 0.2);
	ctx.quadraticCurveTo(centerX + size * 0.2, centerY - size * 0.1, centerX, centerY);
	ctx.quadraticCurveTo(centerX - size * 0.2, centerY + size * 0.1, centerX + size * 0.3, centerY + size * 0.2);
	ctx.stroke();

	// Snake head
	ctx.fillStyle = '#32CD32';
	ctx.beginPath();
	ctx.arc(centerX + size * 0.3, centerY + size * 0.2, radius * 1.2, 0, Math.PI * 2);
	ctx.fill();

	// Eyes
	ctx.fillStyle = '#000';
	ctx.beginPath();
	ctx.arc(centerX + size * 0.25, centerY + size * 0.15, 2, 0, Math.PI * 2);
	ctx.arc(centerX + size * 0.35, centerY + size * 0.15, 2, 0, Math.PI * 2);
	ctx.fill();
	}

	function drawBee(centerX, centerY, size) {
	const bodyWidth = size * 0.6;
	const bodyHeight = size * 0.3;

	// Bee body
	ctx.fillStyle = '#FFD700';
	ctx.beginPath();
	ctx.ellipse(centerX, centerY, bodyWidth/2, bodyHeight/2, 0, 0, Math.PI * 2);
	ctx.fill();

	// Black stripes
	ctx.fillStyle = '#000';
	for(let i = 0; i < 3; i++) {
	ctx.fillRect(centerX - bodyWidth/2 + i * bodyWidth/3, centerY - bodyHeight/2, bodyWidth/6, bodyHeight);
	}

	// Wings
	ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
	ctx.beginPath();
	ctx.ellipse(centerX - bodyWidth/4, centerY - bodyHeight/2, bodyWidth/3, bodyHeight/3, -Math.PI/6, 0, Math.PI * 2);
	ctx.ellipse(centerX + bodyWidth/4, centerY - bodyHeight/2, bodyWidth/3, bodyHeight/3, Math.PI/6, 0, Math.PI * 2);
	ctx.fill();

	// Head
	ctx.fillStyle = '#FFD700';
	ctx.beginPath();
	ctx.arc(centerX, centerY - bodyHeight/2, bodyHeight/3, 0, Math.PI * 2);
	ctx.fill();
	}

	function drawWhale(centerX, centerY, size) {
	const bodyWidth = size * 0.7;
	const bodyHeight = size * 0.4;

	// Whale body
	const gradient = ctx.createLinearGradient(centerX - bodyWidth/2, centerY, centerX + bodyWidth/2, centerY);
	gradient.addColorStop(0, '#4169E1');
	gradient.addColorStop(1, '#191970');
	ctx.fillStyle = gradient;

	ctx.beginPath();
	ctx.ellipse(centerX, centerY, bodyWidth/2, bodyHeight/2, 0, 0, Math.PI * 2);
	ctx.fill();

	// Tail
	ctx.beginPath();
	ctx.moveTo(centerX + bodyWidth/2, centerY);
	ctx.lineTo(centerX + bodyWidth/2 + size * 0.2, centerY - size * 0.15);
	ctx.lineTo(centerX + bodyWidth/2 + size * 0.2, centerY + size * 0.15);
	ctx.closePath();
	ctx.fill();

	// Eye
	ctx.fillStyle = '#FFF';
	ctx.beginPath();
	ctx.arc(centerX - bodyWidth/4, centerY - bodyHeight/4, 4, 0, Math.PI * 2);
	ctx.fill();
	ctx.fillStyle = '#000';
	ctx.beginPath();
	ctx.arc(centerX - bodyWidth/4, centerY - bodyHeight/4, 2, 0, Math.PI * 2);
	ctx.fill();

	// Water spout
	ctx.strokeStyle = '#87CEEB';
	ctx.lineWidth = 3;
	ctx.beginPath();
	ctx.moveTo(centerX, centerY - bodyHeight/2);
	ctx.lineTo(centerX, centerY - bodyHeight/2 - size * 0.2);
	ctx.stroke();
	}

	function drawFish(centerX, centerY, size) {
	const bodyWidth = size * 0.6;
	const bodyHeight = size * 0.4;

	// Fish body
	const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, bodyWidth/2);
	gradient.addColorStop(0, '#FFA500');
	gradient.addColorStop(1, '#FF6347');
	ctx.fillStyle = gradient;

	ctx.beginPath();
	ctx.ellipse(centerX, centerY, bodyWidth/2, bodyHeight/2, 0, 0, Math.PI * 2);
	ctx.fill();

	// Tail
	ctx.beginPath();
	ctx.moveTo(centerX + bodyWidth/2, centerY);
	ctx.lineTo(centerX + bodyWidth/2 + size * 0.25, centerY - size * 0.2);
	ctx.lineTo(centerX + bodyWidth/2 + size * 0.15, centerY);
	ctx.lineTo(centerX + bodyWidth/2 + size * 0.25, centerY + size * 0.2);
	ctx.closePath();
	ctx.fill();

	// Fins
	ctx.beginPath();
	ctx.moveTo(centerX - bodyWidth/4, centerY + bodyHeight/2);
	ctx.lineTo(centerX - bodyWidth/4 - size * 0.1, centerY + bodyHeight/2 + size * 0.15);
	ctx.lineTo(centerX, centerY + bodyHeight/2);
	ctx.closePath();
	ctx.fill();

	// Eye
	ctx.fillStyle = '#FFF';
	ctx.beginPath();
	ctx.arc(centerX - bodyWidth/4, centerY - bodyHeight/6, 5, 0, Math.PI * 2);
	ctx.fill();
	ctx.fillStyle = '#000';
	ctx.beginPath();
	ctx.arc(centerX - bodyWidth/4, centerY - bodyHeight/6, 3, 0, Math.PI * 2);
	ctx.fill();

	// Scales pattern
	ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
	ctx.lineWidth = 1;
	for(let i = 0; i < 3; i++) {
	ctx.beginPath();
	ctx.arc(centerX - bodyWidth/4 + i * bodyWidth/6, centerY, bodyWidth/8, 0, Math.PI * 2);
	ctx.stroke();
	}
	}

	function darkenColor(color, amount) {
	const num = parseInt(color.replace("#", ""), 16);
	const amt = Math.round(2.55 * amount * 100);
	const R = (num >> 16) - amt;
	const G = (num >> 8 & 0x00FF) - amt;
	const B = (num & 0x0000FF) - amt;
	return "#" + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 +
	(G < 255 ? G < 1 ? 0 : G : 255) * 0x100 +
	(B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1);
	}

	// Game loop
	function gameLoop() {
	if (!gameState.isPaused) {
	updateAnimations();
	drawGame();
	}
	requestAnimationFrame(gameLoop);
	}

	function updateAnimations() {
	// Update falling gems
	gameState.fallingGems = gameState.fallingGems.filter(fallingGem => {
	fallingGem.y += fallingGem.speed;
	fallingGem.speed += 0.5; // Gravity effect

	const targetY = fallingGem.targetRow * gemSize;
	if (fallingGem.y >= targetY) {
	fallingGem.y = targetY;
	gameState.gems[fallingGem.targetRow][fallingGem.col] = fallingGem.gem;
	playDropSound();
	return false; // Remove from falling gems array
	}
	return true;
	});

	// Update match animations
	gameState.animations = gameState.animations.filter(animation => {
	return (Date.now() - animation.startTime) < animation.duration;
	});

	// Check if all animations are done
	if (gameState.fallingGems.length === 0 && gameState.animations.length === 0 && gameState.isAnimating) {
	gameState.isAnimating = false;
	// Check for new matches after gems have fallen
	setTimeout(() => {
	const newMatches = findMatches();
	if (newMatches.length > 0) {
	processMatches(newMatches);
	}
	}, 200);
	}
	}

	// Mouse handling
	canvas.addEventListener('click', function(e) {
	if (gameState.isPaused) return;

	const rect = canvas.getBoundingClientRect();
	const x = e.clientX - rect.left;
	const y = e.clientY - rect.top;

	const col = Math.floor(x / gemSize);
	const row = Math.floor(y / gemSize);

	if (row >= 0 && row < gridSize && col >= 0 && col < gridSize) {
	handleGemClick(row, col);
	}
	});

	function handleGemClick(row, col) {
	if (gameState.isAnimating) return; // Don't allow clicks during animations

	if (!gameState.selectedGem) {
	gameState.selectedGem = { row, col };
	} else {
	const selected = gameState.selectedGem;
	if (selected.row === row && selected.col === col) {
	gameState.selectedGem = null;
	} else if (isAdjacent(selected, { row, col })) {
	swapGems(selected, { row, col });
	gameState.selectedGem = null;
	} else {
	gameState.selectedGem = { row, col };
	}
	}
	}

	function isAdjacent(gem1, gem2) {
	const rowDiff = Math.abs(gem1.row - gem2.row);
	const colDiff = Math.abs(gem1.col - gem2.col);
	return (rowDiff === 1 && colDiff === 0) \|\| (rowDiff === 0 && colDiff === 1);
	}

	function swapGems(gem1, gem2) {
	const temp = gameState.gems[gem1.row][gem1.col];
	gameState.gems[gem1.row][gem1.col] = gameState.gems[gem2.row][gem2.col];
	gameState.gems[gem2.row][gem2.col] = temp;

	const matches = findMatches();
	if (matches.length > 0) {
	gameState.moves--;
	processMatches(matches);
	updateUI();
	showToast('Great match!');
	} else {
	// Swap back if no matches
	const temp = gameState.gems[gem1.row][gem1.col];
	gameState.gems[gem1.row][gem1.col] = gameState.gems[gem2.row][gem2.col];
	gameState.gems[gem2.row][gem2.col] = temp;
	showToast('No matches found!');
	}
	}

	function findMatches() {
	const matches = [];

	// Check horizontal matches
	for (let row = 0; row < gridSize; row++) {
	let count = 1;
	let currentType = gameState.gems[row][0].type;
	for (let col = 1; col < gridSize; col++) {
	if (gameState.gems[row][col].type === currentType) {
	count++;
	} else {
	if (count >= 3) {
	for (let i = col - count; i < col; i++) {
	matches.push({ row, col: i });
	}
	}
	count = 1;
	currentType = gameState.gems[row][col].type;
	}
	}
	if (count >= 3) {
	for (let i = gridSize - count; i < gridSize; i++) {
	matches.push({ row, col: i });
	}
	}
	}

	// Check vertical matches
	for (let col = 0; col < gridSize; col++) {
	let count = 1;
	let currentType = gameState.gems[0][col].type;
	for (let row = 1; row < gridSize; row++) {
	if (gameState.gems[row][col].type === currentType) {
	count++;
	} else {
	if (count >= 3) {
	for (let i = row - count; i < row; i++) {
	matches.push({ row: i, col });
	}
	}
	count = 1;
	currentType = gameState.gems[row][col].type;
	}
	}
	if (count >= 3) {
	for (let i = gridSize - count; i < gridSize; i++) {
	matches.push({ row: i, col });
	}
	}
	}

	return matches;
	}

	function processMatches(matches) {
	let iceDestroyed = 0;
	gameState.isAnimating = true;

	// Mark matched gems and create animations
	matches.forEach(match => {
	const gem = gameState.gems[match.row][match.col];
	if (gem.isIce) {
	iceDestroyed++;
	playIceBreakSound();
	}

	// Create match animation
	gameState.animations.push({
	x: match.col * gemSize,
	y: match.row * gemSize,
	startTime: Date.now(),
	duration: 500
	});

	// Mark gem as matched (will be replaced)
	gameState.gems[match.row][match.col].isMatched = true;
	});

	// Play match sound
	playMatchSound();

	// Update score and ice count
	gameState.iceCount += iceDestroyed;
	gameState.score += matches.length * 100 + iceDestroyed * 200;

	// Start dropping animation after a brief delay
	setTimeout(() => {
	applyGravity();
	fillEmptySpaces();
	}, 300);

	if (gameState.iceCount >= gameState.iceTarget) {
	setTimeout(() => {
	levelComplete();
	}, 1000);
	}
	}

	function applyGravity() {
	// Make gems fall down to fill empty spaces
	for (let col = 0; col < gridSize; col++) {
	const column = [];

	// Collect non-matched gems from bottom to top
	for (let row = gridSize - 1; row >= 0; row--) {
	if (!gameState.gems[row][col].isMatched) {
	column.push(gameState.gems[row][col]);
	}
	}

	// Clear the column
	for (let row = 0; row < gridSize; row++) {
	gameState.gems[row][col] = null;
	}

	// Create falling animations for existing gems
	column.forEach((gem, index) => {
	const newRow = gridSize - 1 - index;
	const currentRow = findGemCurrentRow(gem, col);

	if (currentRow !== newRow && currentRow !== -1) {
	gameState.fallingGems.push({
	gem: gem,
	x: col * gemSize,
	y: currentRow * gemSize,
	targetRow: newRow,
	col: col,
	speed: 2
	});
	} else {
	gameState.gems[newRow][col] = gem;
	}
	});
	}
	}

	function findGemCurrentRow(targetGem, col) {
	for (let row = 0; row < gridSize; row++) {
	if (gameState.gems[row][col] === targetGem) {
	return row;
	}
	}
	return -1;
	}

	function fillEmptySpaces() {
	// Fill empty spaces with new gems
	for (let col = 0; col < gridSize; col++) {
	for (let row = 0; row < gridSize; row++) {
	if (!gameState.gems[row][col]) {
	const newGem = {
	type: gemTypes[Math.floor(Math.random() * gemTypes.length)],
	isIce: false,
	isMatched: false
	};

	// Create falling animation for new gem
	gameState.fallingGems.push({
	gem: newGem,
	x: col * gemSize,
	y: -gemSize * (gridSize - row),
	targetRow: row,
	col: col,
	speed: 2
	});
	}
	}
	}
	}

	function levelComplete() {
	showToast('Level Complete!');
	gameState.level++;
	if (gameState.level > 30) {
	showToast('Congratulations! Game Complete!');
	gameState.level = 30;
	} else {
	setTimeout(() => {
	initializeNewLevel();
	}, 2000);
	}
	}

	function initializeNewLevel() {
	gameState.moves = 25;
	gameState.iceCount = 0;
	gameState.iceTarget = Math.min(28 + gameState.level * 2, 50);
	updateMapTheme();
	createGemGrid();
	updateUI();
	}

	function updateMapTheme() {
	let currentMap = 'forest';
	if (gameState.level >= 11 && gameState.level <= 20) {
	currentMap = 'desert';
	} else if (gameState.level >= 21) {
	currentMap = 'skylands';
	}

	gameState.currentMap = currentMap;
	document.getElementById('map-name').textContent = maps[currentMap].name;
	}

	// UI Updates
	function updateUI() {
	document.getElementById('score').textContent = gameState.score;
	document.getElementById('moves-count').textContent = gameState.moves;
	document.getElementById('ice-count').textContent = `${gameState.iceCount}/${gameState.iceTarget}`;
	document.getElementById('player-level').textContent = gameState.level;
	document.getElementById('level-progress').textContent = `Level ${gameState.level}/30`;
	}

	// Game controls
	function pauseGame() {
	gameState.isPaused = true;
	document.getElementById('pauseBtn').style.display = 'none';
	document.getElementById('playBtn').style.display = 'block';
	showToast('Game Paused');
	}

	function playGame() {
	gameState.isPaused = false;
	document.getElementById('pauseBtn').style.display = 'block';
	document.getElementById('playBtn').style.display = 'none';
	showToast('Game Resumed');
	}

	// Modal system
	function showModal(type) {
	const modal = document.getElementById('modal');
	const title = document.getElementById('modal-title');
	const body = document.getElementById('modal-body');

	const modalContent = {
	shop: {
	title: '🛍️ Shop',
	body: '<p>Buy power-ups and boosters!</p><div style="margin: 20px 0;"><div>💎 Gems: 150</div><div>⚡ Energy Boost - 50 gems</div><div>🔥 Fire Boost - 75 gems</div><div>❄️ Ice Breaker - 100 gems</div></div>'
	},
	equip: {
	title: '⚔️ Equipment',
	body: '<p>Manage your power-ups and equipment!</p><div style="margin: 20px 0;"><div>🛡️ Equipped: Basic Hammer</div><div>⚡ Energy Boost: Ready</div><div>🔥 Fire Power: Cooldown 2 moves</div></div>'
	},
	friends: {
	title: '👥 Friends',
	body: '<p>Connect with friends and send lives!</p><div style="margin: 20px 0;"><div>🟢 Alex_Gamer - Online</div><div>🟡 Sarah_123 - 5 min ago</div><div>🔴 Mike_Pro - 1 hour ago</div><button style="margin-top: 10px; padding: 5px 15px; background: #4ecdc4; border: none; border-radius: 15px; color: white;">Invite Friends</button></div>'
	},
	tasks: {
	title: '📋 Daily Tasks',
	body: '<p>Complete tasks for rewards!</p><div style="margin: 20px 0;"><div>✅ Play 3 levels - Completed</div><div>⏳ Crush 50 ice blocks - 28/50</div><div>⏳ Score 5000 points - 0/5000</div><div>⏳ Use 5 power-ups - 0/5</div></div>'
	},
	rating: {
	title: '🏆 Leaderboard',
	body: '<p>Global Rankings</p><div style="margin: 20px 0;"><div>🥇 ProGamer99 - 45,230</div><div>🥈 MatchMaster - 42,100</div><div>🥉 GemCrusher - 38,950</div><div style="color: #4ecdc4;">🏅 You - 0 (Rank: 15,432)</div></div>'
	},
	boosters: {
	title: '🚀 Boosters',
	body: '<p>Activate powerful boosters!</p><div style="margin: 20px 0;"><div>⚡ Color Bomb - 3 left</div><div>🌪️ Line Blast - 2 left</div><div>❄️ Ice Breaker - 1 left</div><div>🔥 Fire Storm - 0 left</div></div>'
	},
	skins: {
	title: '🎨 Skins & Themes',
	body: '<p>Customize your game appearance!</p><div style="margin: 20px 0;"><div>🌲 Forest Theme - Active</div><div>🏜️ Desert Theme - Unlocked</div><div>☁️ Sky Theme - Locked</div><div>🌟 Galaxy Theme - Locked</div></div>'
	}
	};

	const content = modalContent[type];
	title.innerHTML = `<h2>${content.title}</h2>`;
	body.innerHTML = content.body;
	modal.style.display = 'block';
	}

	function closeModal() {
	document.getElementById('modal').style.display = 'none';
	}

	// Toast notifications
	function showToast(message) {
	const toast = document.getElementById('toast');
	toast.textContent = message;
	toast.classList.add('show');

	setTimeout(() => {
	toast.classList.remove('show');
	}, 3000);
	}

	// Close modal when clicking outside
	window.onclick = function(event) {
	const modal = document.getElementById('modal');
	if (event.target === modal) {
	closeModal();
	}
	}

	// Initialize the game
	initGame();
	initAudio();
	showToast('Welcome to AvaRush!');
	</script>
	</body>
	</html>