Spaces:

AramTM
/

armgame

Running

File size: 18,837 Bytes

2276d3c

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3 Fun Web Games</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* Custom styles for the snake game */
        #snakeCanvas {
            border: 2px solid #4b5563;
            border-radius: 0.5rem;
            background-color: #1f2937;
        }
        
        /* Game card hover effect */
        .game-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        /* Memory card flip animation */
        .memory-card {
            perspective: 1000px;
        }
        
        .memory-card-inner {
            transition: transform 0.6s;
            transform-style: preserve-3d;
        }
        
        .memory-card.flipped .memory-card-inner {
            transform: rotateY(180deg);
        }
        
        .memory-card-front, .memory-card-back {
            backface-visibility: hidden;
            position: absolute;
            width: 100%;
            height: 100%;
        }
        
        .memory-card-back {
            transform: rotateY(180deg);
        }
        
        /* Tic-tac-toe cell hover */
        .ttt-cell:hover:not(.occupied) {
            background-color: #e5e7eb;
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen">
    <div class="container mx-auto px-4 py-8">
        <header class="text-center mb-12">
            <h1 class="text-4xl md:text-5xl font-bold text-indigo-700 mb-4">Fun Web Games</h1>
            <p class="text-lg text-gray-600 max-w-2xl mx-auto">Three classic games to challenge your skills and memory!</p>
        </header>
        
        <!-- Game Selection Tabs -->
        <div class="flex justify-center mb-8">
            <div class="inline-flex rounded-md shadow-sm" role="group">
                <button onclick="showGame('tic-tac-toe')" class="px-4 py-2 text-sm font-medium rounded-l-lg bg-indigo-600 text-white hover:bg-indigo-700 focus:z-10 focus:ring-2 focus:ring-indigo-500">
                    <i class="fas fa-times mr-2"></i>Tic-Tac-Toe
                </button>
                <button onclick="showGame('memory')" class="px-4 py-2 text-sm font-medium bg-indigo-100 text-indigo-700 hover:bg-indigo-200 focus:z-10 focus:ring-2 focus:ring-indigo-500">
                    <i class="fas fa-brain mr-2"></i>Memory Game
                </button>
                <button onclick="showGame('snake')" class="px-4 py-2 text-sm font-medium rounded-r-lg bg-indigo-100 text-indigo-700 hover:bg-indigo-200 focus:z-10 focus:ring-2 focus:ring-indigo-500">
                    <i class="fas fa-snake mr-2"></i>Snake
                </button>
            </div>
        </div>
        
        <!-- Game Containers -->
        <div class="space-y-12">
            <!-- Tic-Tac-Toe Game -->
            <div id="tic-tac-toe" class="game-container bg-white rounded-xl shadow-lg p-6 max-w-md mx-auto">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-2xl font-bold text-indigo-700">Tic-Tac-Toe</h2>
                    <button onclick="resetTicTacToe()" class="px-3 py-1 bg-indigo-100 text-indigo-700 rounded hover:bg-indigo-200 transition">
                        <i class="fas fa-redo mr-1"></i> Reset
                    </button>
                </div>
                <div class="text-center mb-4">
                    <p id="ttt-status" class="text-lg font-medium">Player X's turn</p>
                </div>
                <div class="grid grid-cols-3 gap-2 mb-4">
                    <!-- Tic-Tac-Toe cells will be generated by JavaScript -->
                </div>
                <div class="text-center">
                    <p class="text-sm text-gray-500">X wins: <span id="x-wins">0</span> | O wins: <span id="o-wins">0</span> | Draws: <span id="draws">0</span></p>
                </div>
            </div>
            
            <!-- Memory Game -->
            <div id="memory" class="game-container hidden bg-white rounded-xl shadow-lg p-6 max-w-2xl mx-auto">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-2xl font-bold text-indigo-700">Memory Card Game</h2>
                    <div class="flex items-center space-x-4">
                        <span class="text-gray-700">Moves: <span id="moves">0</span></span>
                        <span class="text-gray-700">Pairs: <span id="pairs">0</span>/8</span>
                        <button onclick="resetMemoryGame()" class="px-3 py-1 bg-indigo-100 text-indigo-700 rounded hover:bg-indigo-200 transition">
                            <i class="fas fa-redo mr-1"></i> Reset
                        </button>
                    </div>
                </div>
                <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
                    <!-- Memory cards will be generated by JavaScript -->
                </div>
            </div>
            
            <!-- Snake Game -->
            <div id="snake" class="game-container hidden bg-white rounded-xl shadow-lg p-6 max-w-md mx-auto">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-2xl font-bold text-indigo-700">Snake Game</h2>
                    <div class="flex items-center space-x-4">
                        <span class="text-gray-700">Score: <span id="score">0</span></span>
                        <button onclick="resetSnakeGame()" class="px-3 py-1 bg-indigo-100 text-indigo-700 rounded hover:bg-indigo-200 transition">
                            <i class="fas fa-redo mr-1"></i> Reset
                        </button>
                    </div>
                </div>
                <canvas id="snakeCanvas" width="400" height="400"></canvas>
                <div class="mt-4 text-center text-sm text-gray-500">
                    <p>Use arrow keys or WASD to control the snake</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Show the selected game and hide others
        function showGame(gameId) {
            document.querySelectorAll('.game-container').forEach(el => {
                el.classList.add('hidden');
            });
            document.getElementById(gameId).classList.remove('hidden');
            
            // Update tab styling
            document.querySelectorAll('[role="group"] button').forEach(btn => {
                btn.classList.remove('bg-indigo-600', 'text-white');
                btn.classList.add('bg-indigo-100', 'text-indigo-700');
            });
            event.currentTarget.classList.remove('bg-indigo-100', 'text-indigo-700');
            event.currentTarget.classList.add('bg-indigo-600', 'text-white');
            
            // If showing snake game, focus the canvas
            if (gameId === 'snake') {
                document.getElementById('snakeCanvas').focus();
            }
        }
        
        // Initialize with Tic-Tac-Toe visible
        document.addEventListener('DOMContentLoaded', function() {
            showGame('tic-tac-toe');
            initTicTacToe();
            initMemoryGame();
            initSnakeGame();
        });
        
        // ==================== TIC-TAC-TOE GAME ====================
        let currentPlayer = 'X';
        let gameState = ['', '', '', '', '', '', '', '', ''];
        let gameActive = true;
        let xWins = 0;
        let oWins = 0;
        let draws = 0;
        
        const winningConditions = [
            [0, 1, 2], [3, 4, 5], [6, 7, 8], // rows
            [0, 3, 6], [1, 4, 7], [2, 5, 8], // columns
            [0, 4, 8], [2, 4, 6]             // diagonals
        ];
        
        function initTicTacToe() {
            const board = document.querySelector('#tic-tac-toe .grid');
            board.innerHTML = '';
            
            for (let i = 0; i < 9; i++) {
                const cell = document.createElement('div');
                cell.classList.add('ttt-cell', 'h-24', 'flex', 'items-center', 'justify-center', 'text-4xl', 'font-bold', 'border-2', 'border-gray-300', 'cursor-pointer', 'transition');
                cell.setAttribute('data-index', i);
                cell.addEventListener('click', handleCellClick);
                board.appendChild(cell);
            }
            
            resetTicTacToe();
        }
        
        function handleCellClick() {
            const clickedCell = event.target;
            const clickedCellIndex = parseInt(clickedCell.getAttribute('data-index'));
            
            if (gameState[clickedCellIndex] !== '' || !gameActive) return;
            
            gameState[clickedCellIndex] = currentPlayer;
            clickedCell.textContent = currentPlayer;
            clickedCell.classList.add('occupied');
            
            checkResult();
        }
        
        function checkResult() {
            let roundWon = false;
            
            for (let i = 0; i < winningConditions.length; i++) {
                const [a, b, c] = winningConditions[i];
                
                if (gameState[a] === '' || gameState[b] === '' || gameState[c] === '') continue;
                
                if (gameState[a] === gameState[b] && gameState[b] === gameState[c]) {
                    roundWon = true;
                    break;
                }
            }
            
            if (roundWon) {
                document.getElementById('ttt-status').textContent = `Player ${currentPlayer} wins!`;
                gameActive = false;
                
                if (currentPlayer === 'X') {
                    xWins++;
                    document.getElementById('x-wins').textContent = xWins;
                } else {
                    oWins++;
                    document.getElementById('o-wins').textContent = oWins;
                }
                
                return;
            }
            
            const roundDraw = !gameState.includes('');
            if (roundDraw) {
                document.getElementById('ttt-status').textContent = 'Game ended in a draw!';
                gameActive = false;
                draws++;
                document.getElementById('draws').textContent = draws;
                return;
            }
            
            currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
            document.getElementById('ttt-status').textContent = `Player ${currentPlayer}'s turn`;
        }
        
        function resetTicTacToe() {
            currentPlayer = 'X';
            gameState = ['', '', '', '', '', '', '', '', ''];
            gameActive = true;
            document.getElementById('ttt-status').textContent = `Player ${currentPlayer}'s turn`;
            
            document.querySelectorAll('.ttt-cell').forEach(cell => {
                cell.textContent = '';
                cell.classList.remove('occupied', 'bg-green-100');
            });
        }
        
        // ==================== MEMORY GAME ====================
        const memoryCards = [
            'fa-cat', 'fa-dog', 'fa-horse', 'fa-fish', 
            'fa-dragon', 'fa-kiwi-bird', 'fa-spider', 'fa-frog',
            'fa-cat', 'fa-dog', 'fa-horse', 'fa-fish', 
            'fa-dragon', 'fa-kiwi-bird', 'fa-spider', 'fa-frog'
        ];
        
        let hasFlippedCard = false;
        let lockBoard = false;
        let firstCard, secondCard;
        let moves = 0;
        let pairsFound = 0;
        
        function initMemoryGame() {
            const board = document.querySelector('#memory .grid');
            board.innerHTML = '';
            
            // Shuffle cards
            const shuffledCards = [...memoryCards].sort(() => 0.5 - Math.random());
            
            shuffledCards.forEach((card, index) => {
                const cardElement = document.createElement('div');
                cardElement.classList.add('memory-card', 'h-24', 'cursor-pointer');
                cardElement.setAttribute('data-card', card);
                cardElement.setAttribute('data-index', index);
                
                const cardInner = document.createElement('div');
                cardInner.classList.add('memory-card-inner', 'relative', 'w-full', 'h-full');
                
                const cardFront = document.createElement('div');
                cardFront.classList.add('memory-card-front', 'bg-indigo-600', 'rounded-lg', 'flex', 'items-center', 'justify-center');
                
                const cardBack = document.createElement('div');
                cardBack.classList.add('memory-card-back', 'bg-white', 'border-2', 'border-indigo-300', 'rounded-lg', 'flex', 'items-center', 'justify-center');
                
                const icon = document.createElement('i');
                icon.classList.add('fas', card, 'text-3xl', 'text-indigo-700');
                
                cardBack.appendChild(icon);
                cardInner.appendChild(cardFront);
                cardInner.appendChild(cardBack);
                cardElement.appendChild(cardInner);
                
                cardElement.addEventListener('click', flipCard);
                board.appendChild(cardElement);
            });
            
            resetMemoryGame();
        }
        
        function flipCard() {
            if (lockBoard) return;
            if (this === firstCard) return;
            
            this.classList.add('flipped');
            
            if (!hasFlippedCard) {
                hasFlippedCard = true;
                firstCard = this;
                return;
            }
            
            secondCard = this;
            moves++;
            document.getElementById('moves').textContent = moves;
            checkForMatch();
        }
        
        function checkForMatch() {
            const isMatch = firstCard.getAttribute('data-card') === secondCard.getAttribute('data-card');
            
            if (isMatch) {
                disableCards();
                pairsFound++;
                document.getElementById('pairs').textContent = pairsFound;
                
                if (pairsFound === 8) {
                    setTimeout(() => {
                        alert(`Congratulations! You won in ${moves} moves!`);
                    }, 500);
                }
            } else {
                unflipCards();
            }
        }
        
        function disableCards() {
            firstCard.removeEventListener('click', flipCard);
            secondCard.removeEventListener('click', flipCard);
            
            resetBoard();
        }
        
        function unflipCards() {
            lockBoard = true;
            
            setTimeout(() => {
                firstCard.classList.remove('flipped');
                secondCard.classList.remove('flipped');
                
                resetBoard();
            }, 1000);
        }
        
        function resetBoard() {
            [hasFlippedCard, lockBoard] = [false, false];
            [firstCard, secondCard] = [null, null];
        }
        
        function resetMemoryGame() {
            document.querySelectorAll('.memory-card').forEach(card => {
                card.classList.remove('flipped');
                card.addEventListener('click', flipCard);
            });
            
            moves = 0;
            pairsFound = 0;
            document.getElementById('moves').textContent = '0';
            document.getElementById('pairs').textContent = '0';
            
            setTimeout(() => {
                // Re-shuffle cards
                const cards = Array.from(document.querySelectorAll('.memory-card'));
                const shuffledIndices = [...Array(cards.length).keys()].sort(() => 0.5 - Math.random());
                
                const board = document.querySelector('#memory .grid');
                board.innerHTML = '';
                
                shuffledIndices.forEach(index => {
                    board.appendChild(cards[index]);
                });
            }, 500);
        }
        
        // ==================== SNAKE GAME ====================
        let snakeGame;
        let snake = [];
        let food = {};
        let direction = 'right';
        let nextDirection = 'right';
        let score = 0;
        let gameInterval;
        let gridSize = 20;
        let canvasSize = 400;
        
        function initSnakeGame() {
            const canvas = document.getElementById('snakeCanvas');
            snakeGame = canvas.getContext('2d');
            
            // Set canvas size for high DPI displays
            const scale = window.devicePixelRatio || 1;
            canvas.style.width = canvasSize + 'px';
            canvas.style.height = canvasSize + 'px';
            canvas.width = canvasSize * scale;
            canvas.height = canvasSize * scale;
            snakeGame.scale(scale, scale);
            
            resetSnakeGame();
        }
        
        function resetSnakeGame() {
            clearInterval(gameInterval);
            
            // Initial snake
            snake = [
                {x: 10, y: 10},
                {x: 9, y: 10},
                {x: 8, y: 10}
            ];
            
            direction = 'right';
            nextDirection = 'right';
            score = 0;
            document.getElementById('score').textContent = score;
            
            generateFood();
            drawGame();
            
            // Focus canvas for keyboard controls
            document.getElementById('snakeCanvas').focus();
            
            gameInterval = setInterval(gameLoop, 150);
        }
        
        function gameLoop() {
            moveSnake();
            checkCollision();
            drawGame();
        }
        
        function move
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=AramTM/armgame" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>