Hugging Face's logo

Spaces:
AramTM
/
armgame
Running

App Files Community
armgame / index.html
AramTM's picture
AramTM
Start invite 3 web games - Initial Deployment
2276d3c verified
Raw History Blame Contribute Delete
18.8 kB
<!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>