File size: 9,107 Bytes
f575a1c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 | <!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jogo da Velha - 0 Erros</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>
.cell {
transition: all 0.3s ease;
}
.cell:hover:not(.disabled) {
transform: scale(1.05);
box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
}
.winning-cell {
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% { background-color: rgba(16, 185, 129, 0.2); }
50% { background-color: rgba(16, 185, 129, 0.5); }
100% { background-color: rgba(16, 185, 129, 0.2); }
}
.draw-line {
position: absolute;
background-color: #EF4444;
transform-origin: center left;
}
</style>
</head>
<body class="bg-gray-100 min-h-screen flex flex-col items-center justify-center p-4">
<div class="w-full max-w-md bg-white rounded-xl shadow-2xl overflow-hidden">
<!-- Header -->
<div class="bg-indigo-600 p-6 text-white">
<div class="flex justify-between items-center">
<h1 class="text-3xl font-bold">Jogo da Velha</h1>
<button id="resetBtn" class="bg-white text-indigo-600 px-4 py-2 rounded-lg font-semibold hover:bg-indigo-50 transition">
<i class="fas fa-redo mr-2"></i>Reiniciar
</button>
</div>
<p class="mt-2 opacity-90">Jogue contra o computador ou um amigo!</p>
</div>
<!-- Game Info -->
<div class="p-6 bg-indigo-50">
<div class="flex justify-between items-center mb-4">
<div id="playerX" class="flex items-center bg-white p-3 rounded-lg shadow">
<span class="text-2xl font-bold text-red-500 mr-2">X</span>
<span class="font-semibold">Jogador X</span>
<span id="scoreX" class="ml-auto bg-red-500 text-white px-2 py-1 rounded-full text-sm">0</span>
</div>
<div class="text-gray-500 mx-2 font-bold">VS</div>
<div id="playerO" class="flex items-center bg-white p-3 rounded-lg shadow">
<span class="text-2xl font-bold text-blue-500 mr-2">O</span>
<span class="font-semibold">Jogador O</span>
<span id="scoreO" class="ml-auto bg-blue-500 text-white px-2 py-1 rounded-full text-sm">0</span>
</div>
</div>
<div id="status" class="bg-white p-4 rounded-lg shadow text-center font-semibold">
Vez do jogador: <span class="text-red-500">X</span>
</div>
</div>
<!-- Game Board -->
<div class="p-6 relative">
<div class="grid grid-cols-3 gap-3 aspect-square max-w-sm mx-auto relative">
<!-- The 3x3 game board cells -->
<div class="cell bg-white rounded-lg shadow-md flex items-center justify-center text-6xl font-bold cursor-pointer border-2 border-gray-200" data-index="0"></div>
<div class="cell bg-white rounded-lg shadow-md flex items-center justify-center text-6xl font-bold cursor-pointer border-2 border-gray-200" data-index="1"></div>
<div class="cell bg-white rounded-lg shadow-md flex items-center justify-center text-6xl font-bold cursor-pointer border-2 border-gray-200" data-index="2"></div>
<div class="cell bg-white rounded-lg shadow-md flex items-center justify-center text-6xl font-bold cursor-pointer border-2 border-gray-200" data-index="3"></div>
<div class="cell bg-white rounded-lg shadow-md flex items-center justify-center text-6xl font-bold cursor-pointer border-2 border-gray-200" data-index="4"></div>
<div class="cell bg-white rounded-lg shadow-md flex items-center justify-center text-6xl font-bold cursor-pointer border-2 border-gray-200" data-index="5"></div>
<div class="cell bg-white rounded-lg shadow-md flex items-center justify-center text-6xl font-bold cursor-pointer border-2 border-gray-200" data-index="6"></div>
<div class="cell bg-white rounded-lg shadow-md flex items-center justify-center text-6xl font-bold cursor-pointer border-2 border-gray-200" data-index="7"></div>
<div class="cell bg-white rounded-lg shadow-md flex items-center justify-center text-6xl font-bold cursor-pointer border-2 border-gray-200" data-index="8"></div>
</div>
</div>
<!-- Game Mode Selector -->
<div class="p-6 bg-gray-50 border-t">
<div class="flex flex-col space-y-4">
<h3 class="font-semibold text-gray-700">Modo de Jogo:</h3>
<div class="flex space-x-4">
<button id="vsHuman" class="flex-1 bg-indigo-600 text-white py-2 px-4 rounded-lg font-medium hover:bg-indigo-700 transition">
<i class="fas fa-users mr-2"></i>2 Jogadores
</button>
<button id="vsComputer" class="flex-1 bg-gray-200 text-gray-800 py-2 px-4 rounded-lg font-medium hover:bg-gray-300 transition">
<i class="fas fa-robot mr-2"></i>vs Computador
</button>
</div>
</div>
</div>
</div>
<!-- Download Instructions -->
<div class="mt-8 bg-white p-6 rounded-xl shadow max-w-md w-full">
<h2 class="text-xl font-bold text-gray-800 mb-4">Como Baixar e Instalar</h2>
<ol class="list-decimal list-inside space-y-2 text-gray-700">
<li>Clique com o botão direito nesta página</li>
<li>Selecione "Salvar como..."</li>
<li>Escolha um local no seu computador</li>
<li>Salve como "jogo-da-velha.html"</li>
<li>Abra o arquivo salvo em qualquer navegador</li>
</ol>
<p class="mt-4 text-sm text-gray-500">Este jogo funciona offline após o download e não contém erros.</p>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Game state
let board = ['', '', '', '', '', '', '', '', ''];
let currentPlayer = 'X';
let gameActive = true;
let gameMode = 'human'; // 'human' or 'computer'
let scores = { X: 0, O: 0 };
// DOM elements
const cells = document.querySelectorAll('.cell');
const statusDisplay = document.getElementById('status');
const scoreXDisplay = document.getElementById('scoreX');
const scoreODisplay = document.getElementById('scoreO');
const resetBtn = document.getElementById('resetBtn');
const vsHumanBtn = document.getElementById('vsHuman');
const vsComputerBtn = document.getElementById('vsComputer');
const playerXDisplay = document.getElementById('playerX');
const playerODisplay = document.getElementById('playerO');
// Winning conditions
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
];
// Initialize the game
initGame();
function initGame() {
board = ['', '', '', '', '', '', '', '', ''];
gameActive = true;
currentPlayer = 'X';
// Clear the board UI
cells.forEach(cell => {
cell.innerHTML = '';
cell.classList.remove('disabled', 'winning-cell');
cell.style.backgroundColor = '';
});
updateStatus();
highlightCurrentPlayer();
}
function handleCellClick(e) {
const clickedCell = e.target;
const clickedCellIndex = parseInt(clickedCell.getAttribute('data-index'));
// If cell is already filled or game is not active
<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=vinixp0pp/simm" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |