← Volver a código

Tic Tac Toe

Explora el código (HTML / CSS / JS) del juego

HTML

  1. <!doctype html>
  2. <html lang="es">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1">
  6.   <title>Tic Tac Toe</title>
  7.   <link rel="stylesheet" href="css/tictactoe.css">
  8. </head>
  9. <body>
  11.   <!-- Estructura del juego (canvas, HUD, botones…) -->
  13.   <script src="js/tictactoe.js"></script>
  14. </body>
  15. </html>
    16.

CSS

  1. * { box-sizing: border-box; margin: 0; padding: 0; }
  3. :root {
  4.   --bg: #06050c;
  5.   --purple: #a55cff;
  6.   --purple-soft: #b56cff;
  7.   --cyan: #24f6d2;
  8.   --yellow: #ffd719;
  9.   --green: #22c55e;
  10.   --red: #ff4d6a;
  11.   --text: #ffffff;
  12.   --muted: rgba(255, 255, 255, 0.64);
  13. }
  15. html, body { width: 100%; min-height: 100%; overflow-x: hidden; }
  17. body {
  18.   min-width: 320px;
  19.   color: var(--text);
  20.   background-color: var(--bg);
  21.   background-position: center;
  22.   background-size: cover;
  23.   background-attachment: fixed;
  24.   font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  25. }
  27. button, a { font: inherit; -webkit-tap-highlight-color: transparent; }
  28. button { cursor: pointer; }
  30. /* ===== Página / shell ===== */
  31. .ttt-page {
  32.   width: min(1400px, 94vw);
  33.   margin: 0 auto;
  34.   padding-bottom: 26px;
  35. }
  37. .game-toolbar {
  38.   display: flex;
  39.   align-items: center;
  40.   justify-content: space-between;
  41.   min-height: 56px;
  42.   padding: 0 4px;
  43. }
  44. .toolbar-link {
  45.   color: var(--purple);
  46.   text-decoration: none;
  47.   font-size: 13px;
  48.   font-weight: 850;
  49.   letter-spacing: 0.06em;
  50.   background: none;
  51.   border: 0;
  52. }
  53. .toolbar-link:hover { color: #d3a7ff; }
  55. .arcade-shell {
  56.   display: grid;
  57.   grid-template-columns: minmax(0, 1.55fr) minmax(330px, 0.95fr);
  58.   min-height: calc(100svh - 160px);
  59.   overflow: hidden;
  60.   border: 1px solid rgba(181, 108, 255, 0.48);
  61.   border-radius: 28px;
  62.   background: linear-gradient(135deg, rgba(11, 8, 25, 0.94), rgba(5, 4, 14, 0.92));
  63.   box-shadow: 0 35px 100px rgba(0, 0, 0, 0.62);
  64.   backdrop-filter: blur(9px);
  65. }
  67. .board-column {
  68.   display: flex;
  69.   min-width: 0;
  70.   flex-direction: column;
  71.   align-items: center;
  72.   padding: 18px 26px 24px;
  73.   border-right: 1px solid rgba(255, 255, 255, 0.08);
  74. }
  76. .ttt-logo {
  77.   display: flex;
  78.   align-items: center;
  79.   justify-content: center;
  80.   gap: 12px;
  81.   min-height: 66px;
  82.   margin: 0 auto 6px;
  83.   color: var(--purple-soft);
  84.   font-size: clamp(28px, 3.4vw, 46px);
  85.   font-weight: 1000;
  86.   letter-spacing: 0.08em;
  87.   text-transform: uppercase;
  88.   text-shadow: 0 0 18px rgba(165, 92, 255, 0.5);
  89. }
  90. .ttt-logo .lg-dot { color: var(--cyan); }
  92. .ttt-turn {
  93.   display: flex;
  94.   align-items: center;
  95.   justify-content: center;
  96.   gap: 10px;
  97.   min-height: 30px;
  98.   margin-bottom: 16px;
  99.   font-size: 13px;
  100.   font-weight: 800;
  101.   letter-spacing: 0.08em;
  102.   text-transform: uppercase;
  103.   color: var(--muted);
  104. }
  105. .ttt-turn b { color: var(--cyan); font-size: 18px; }
  106. .ttt-turn.o-turn b { color: var(--purple-soft); }
  108. /* ===== Tablero ===== */
  109. .ttt-wrap {
  110.   position: relative;
  111.   display: grid;
  112.   place-items: center;
  113.   flex: 1;
  114.   width: 100%;
  115. }
  117. .ttt-board {
  118.   display: grid;
  119.   grid-template-columns: repeat(3, 1fr);
  120.   grid-template-rows: repeat(3, 1fr);
  121.   gap: 12px;
  122.   width: min(440px, 78vw);
  123.   aspect-ratio: 1 / 1;
  124.   padding: 14px;
  125.   border: 2px solid rgba(181, 108, 255, 0.5);
  126.   border-radius: 20px;
  127.   background:
  128.     radial-gradient(120% 120% at 50% 0%, rgba(123, 92, 255, 0.12), transparent 60%),
  129.     #03060c;
  130.   box-shadow: 0 0 30px rgba(123, 92, 255, 0.18), inset 0 0 40px rgba(0, 0, 0, 0.7);
  131. }
  133. .cell {
  134.   position: relative;
  135.   display: grid;
  136.   place-items: center;
  137.   border: 1px solid rgba(255, 255, 255, 0.1);
  138.   border-radius: 14px;
  139.   background: rgba(255, 255, 255, 0.03);
  140.   transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  141. }
  142. .cell:not(.filled):hover {
  143.   background: rgba(123, 92, 255, 0.12);
  144.   border-color: rgba(181, 108, 255, 0.6);
  145.   box-shadow: inset 0 0 20px rgba(123, 92, 255, 0.15);
  146. }
  147. .cell.disabled { pointer-events: none; }
  149. .cell svg { width: 62%; height: 62%; overflow: visible; }
  150. .mark-line {
  151.   fill: none;
  152.   stroke-width: 9;
  153.   stroke-linecap: round;
  154.   stroke-dasharray: 100;
  155.   stroke-dashoffset: 100;
  156.   animation: draw 0.28s ease forwards;
  157. }
  158. .mark-line.d2 { animation-delay: 0.18s; }
  159. @keyframes draw { to { stroke-dashoffset: 0; } }
  161. .cell.x .mark-line { stroke: var(--cyan); filter: drop-shadow(0 0 8px rgba(36, 246, 210, 0.6)); }
  162. .cell.o .mark-line { stroke: var(--purple-soft); filter: drop-shadow(0 0 8px rgba(181, 108, 255, 0.6)); }
  164. .cell.win {
  165.   border-color: var(--green);
  166.   box-shadow: 0 0 0 2px var(--green), 0 0 30px rgba(34, 197, 94, 0.45);
  167.   animation: winpulse 0.9s ease infinite alternate;
  168. }
  169. @keyframes winpulse { to { box-shadow: 0 0 0 2px var(--green), 0 0 45px rgba(34, 197, 94, 0.7); } }
  171. /* Overlay resultado */
  172. .ttt-overlay {
  173.   position: absolute;
  174.   inset: 0;
  175.   z-index: 5;
  176.   display: none;
  177.   place-items: center;
  178.   border-radius: 20px;
  179.   background: rgba(3, 6, 12, 0.72);
  180.   backdrop-filter: blur(3px);
  181.   text-align: center;
  182. }
  183. .ttt-overlay.show { display: grid; }
  184. .ov-title {
  185.   font-size: clamp(30px, 5vw, 46px);
  186.   font-weight: 1000;
  187.   letter-spacing: 0.03em;
  188. }
  189. .ov-title.x { color: var(--cyan); }
  190. .ov-title.o { color: var(--purple-soft); }
  191. .ov-title.draw { color: var(--muted); }
  192. .ov-sub { margin-top: 8px; color: rgba(255, 255, 255, 0.85); font-size: 15px; }
  193. .ov-btn {
  194.   margin-top: 16px;
  195.   padding: 11px 22px;
  196.   border: 2px solid var(--purple-soft);
  197.   border-radius: 12px;
  198.   color: var(--purple-soft);
  199.   background: rgba(24, 14, 46, 0.9);
  200.   font-weight: 900;
  201.   letter-spacing: 0.05em;
  202.   text-transform: uppercase;
  203. }
  204. .ov-btn:hover { color: #fff; box-shadow: 0 0 22px rgba(165, 92, 255, 0.4); }
  206. /* ===== Columna control ===== */
  207. .control-column {
  208.   display: flex;
  209.   min-width: 0;
  210.   flex-direction: column;
  211.   padding: 24px 28px 22px;
  212. }
  214. .mode-switch {
  215.   display: grid;
  216.   grid-template-columns: 1fr 1fr;
  217.   gap: 8px;
  218.   padding: 6px;
  219.   margin-bottom: 20px;
  220.   border: 1px solid rgba(255, 255, 255, 0.12);
  221.   border-radius: 14px;
  222.   background: rgba(255, 255, 255, 0.03);
  223. }
  224. .mode-btn {
  225.   min-height: 42px;
  226.   border: 0;
  227.   border-radius: 10px;
  228.   color: var(--muted);
  229.   background: transparent;
  230.   font-size: 12px;
  231.   font-weight: 800;
  232.   letter-spacing: 0.05em;
  233.   text-transform: uppercase;
  234.   transition: 0.15s ease;
  235. }
  236. .mode-btn.active {
  237.   color: #fff;
  238.   background: rgba(123, 92, 255, 0.25);
  239.   box-shadow: 0 0 16px rgba(165, 92, 255, 0.3);
  240. }
  242. .desktop-stats {
  243.   display: grid;
  244.   grid-template-columns: repeat(3, 1fr);
  245.   gap: 12px;
  246. }
  247. .stat-card {
  248.   display: flex;
  249.   flex-direction: column;
  250.   align-items: center;
  251.   gap: 4px;
  252.   padding: 14px 8px;
  253.   border: 1px solid rgba(255, 255, 255, 0.14);
  254.   border-radius: 16px;
  255.   background: rgba(255, 255, 255, 0.035);
  256.   font-size: 10px;
  257.   font-weight: 800;
  258.   letter-spacing: 0.06em;
  259.   text-transform: uppercase;
  260.   color: var(--muted);
  261. }
  262. .stat-card b { font-size: 24px; line-height: 1; color: var(--yellow); }
  263. .stat-card.x b { color: var(--cyan); }
  264. .stat-card.o b { color: var(--purple-soft); }
  266. .rules-block { margin: 22px 0; }
  267. .rules-block h2 {
  268.   margin-bottom: 16px;
  269.   color: var(--purple);
  270.   font-size: 18px;
  271.   font-weight: 900;
  272.   letter-spacing: 0.045em;
  273. }
  274. .rules-block p { margin: 12px 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.82); }
  275. .rules-block strong { color: var(--cyan); }
  277. .action-row {
  278.   display: grid;
  279.   grid-template-columns: 1fr;
  280.   gap: 12px;
  281.   margin-top: auto;
  282. }
  283. .arcade-action {
  284.   min-height: 46px;
  285.   border: 1px solid rgba(181, 108, 255, 0.45);
  286.   border-radius: 13px;
  287.   color: var(--purple);
  288.   background: rgba(123, 92, 255, 0.08);
  289.   font-size: 12px;
  290.   font-weight: 900;
  291.   letter-spacing: 0.04em;
  292. }
  293. .arcade-action:hover { color: #fff; background: rgba(123, 92, 255, 0.19); }
  295. .btn-start-ttt {
  296.   display: flex;
  297.   align-items: center;
  298.   justify-content: center;
  299.   gap: 12px;
  300.   width: 100%;
  301.   min-height: 58px;
  302.   border: 2px solid var(--purple-soft);
  303.   border-radius: 12px;
  304.   color: var(--purple-soft);
  305.   background: rgba(24, 14, 46, 0.9);
  306.   font-size: 18px;
  307.   font-weight: 900;
  308.   letter-spacing: 0.06em;
  309.   text-transform: uppercase;
  310.   box-shadow: 0 0 18px rgba(165, 92, 255, 0.25);
  311. }
  312. .btn-start-ttt:hover { color: #fff; box-shadow: 0 0 28px rgba(165, 92, 255, 0.45); }
  314. /* ===== Responsive ===== */
  315. @media (max-width: 1050px) {
  316.   .arcade-shell { grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.85fr); }
  317. }
  318. @media (max-width: 820px) {
  319.   .ttt-page { width: calc(100% - 24px); }
  320.   .arcade-shell { display: block; min-height: 0; border-radius: 22px; }
  321.   .board-column { padding: 18px 16px 18px; border-right: 0; }
  322.   .control-column { padding: 4px 16px 20px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
  323.   .action-row { margin-top: 18px; }
  324. }
  325. @media (max-width: 480px) {
  326.   .ttt-page { width: calc(100% - 16px); }
  327.   .desktop-stats { gap: 8px; }
  328.   .stat-card b { font-size: 20px; }
  329. }
    330.

JS

  1. (function () {
  2.   'use strict';
  4.   const $ = (id) => document.getElementById(id);
  6.   const boardEl = $('board');
  7.   const turnWrap = $('turnWrap');
  8.   const turnMark = $('turnMark');
  9.   const overlay = $('overlay');
  10.   const ovTitle = $('overlayTitle');
  11.   const ovSub = $('overlaySub');
  12.   const playAgainBtn = $('playAgainBtn');
  13.   const newGameBtn = $('newGameBtn');
  14.   const resetScoreBtn = $('resetScoreBtn');
  15.   const modeAI = $('modeAI');
  16.   const mode2P = $('mode2P');
  17.   const scoreXEl = $('scoreX');
  18.   const scoreOEl = $('scoreO');
  19.   const scoreDEl = $('scoreD');
  21.   const STORE_KEY = 'ttt_neon_v1';
  23.   const es = {
  24.     turn: 'Turno', win: '¡Gana', draw: '¡Empate!', again: '¿Otra partida?',
  25.     youWin: '¡Ganas!', aiWin: 'Gana la IA', reset: 'Marcador reseteado'
  26.   };
  27.   const en = {
  28.     turn: 'Turn', win: 'Wins', draw: 'Draw!', again: 'Another game?',
  29.     youWin: 'You win!', aiWin: 'AI wins', reset: 'Score reset'
  30.   };
  31.   const T = (window.APP_LOCALE === 'en') ? en : es;
  33.   const WINS = [
  34.     [0, 1, 2], [3, 4, 5], [6, 7, 8],
  35.     [0, 3, 6], [1, 4, 7], [2, 5, 8],
  36.     [0, 4, 8], [2, 4, 6]
  37.   ];
  39.   let board, current, over, mode, scores;
  41.   scores = load();
  42.   renderScores();
  43.   buildBoard();
  44.   newGame();
  46.   modeAI.addEventListener('click', () => setMode('ai'));
  47.   mode2P.addEventListener('click', () => setMode('2p'));
  48.   playAgainBtn.addEventListener('click', newGame);
  49.   newGameBtn.addEventListener('click', newGame);
  50.   resetScoreBtn.addEventListener('click', () => {
  51.     scores = { x: 0, o: 0, d: 0 };
  52.     save();
  53.     renderScores();
  54.   });
  56.   function setMode(m) {
  57.     mode = m;
  58.     modeAI.classList.toggle('active', m === 'ai');
  59.     mode2P.classList.toggle('active', m === '2p');
  60.     newGame();
  61.   }
  63.   function buildBoard() {
  64.     boardEl.innerHTML = '';
  65.     for (let i = 0; i < 9; i++) {
  66.       const c = document.createElement('button');
  67.       c.className = 'cell';
  68.       c.type = 'button';
  69.       c.dataset.i = i;
  70.       c.addEventListener('click', () => onCell(i));
  71.       boardEl.appendChild(c);
  72.     }
  73.   }
  75.   function newGame() {
  76.     board = Array(9).fill('');
  77.     current = 'X';
  78.     over = false;
  79.     if (mode === undefined) mode = 'ai';
  80.     overlay.classList.remove('show');
  81.     Array.from(boardEl.children).forEach((c) => {
  82.       c.className = 'cell';
  83.       c.innerHTML = '';
  84.     });
  85.     updateTurn();
  86.   }
  88.   function onCell(i) {
  89.     if (over || board[i]) return;
  90.     if (mode === 'ai' && current !== 'X') return;
  91.     move(i, current);
  92.     if (over) return;
  93.     if (mode === 'ai' && current === 'O') {
  94.       lockBoard(true);
  95.       setTimeout(() => {
  96.         const best = bestMove();
  97.         if (best > -1) move(best, 'O');
  98.         lockBoard(false);
  99.       }, 380);
  100.     }
  101.   }
  103.   function move(i, player) {
  104.     board[i] = player;
  105.     paint(i, player);
  106.     const line = winningLine(board, player);
  107.     if (line) return finish(player, line);
  108.     if (board.every((v) => v)) return finish('D', null);
  109.     current = player === 'X' ? 'O' : 'X';
  110.     updateTurn();
  111.   }
  113.   function paint(i, player) {
  114.     const cell = boardEl.children[i];
  115.     cell.classList.add('filled', player.toLowerCase());
  116.     cell.innerHTML = player === 'X'
  117.       ? '<svg viewBox="0 0 100 100"><line class="mark-line" pathLength="100" x1="20" y1="20" x2="80" y2="80"/><line class="mark-line d2" pathLength="100" x1="80" y1="20" x2="20" y2="80"/></svg>'
  118.       : '<svg viewBox="0 0 100 100"><circle class="mark-line" pathLength="100" cx="50" cy="50" r="32"/></svg>';
  119.   }
  121.   function finish(winner, line) {
  122.     over = true;
  123.     if (winner === 'D') {
  124.       scores.d++;
  125.       show(T.draw, T.again, 'draw');
  126.     } else {
  127.       scores[winner.toLowerCase()]++;
  128.       if (line) line.forEach((idx) => boardEl.children[idx].classList.add('win'));
  129.       let title;
  130.       if (mode === 'ai') title = winner === 'X' ? T.youWin : T.aiWin;
  131.       else title = (T.win === 'Wins' ? winner + ' ' + T.win : T.win + ' ' + winner + '!');
  132.       show(title, T.again, winner.toLowerCase());
  133.     }
  134.     save();
  135.     renderScores();
  136.   }
  138.   function show(title, sub, cls) {
  139.     ovTitle.textContent = title;
  140.     ovTitle.className = 'ov-title ' + cls;
  141.     ovSub.textContent = sub;
  142.     setTimeout(() => overlay.classList.add('show'), 500);
  143.   }
  145.   function updateTurn() {
  146.     turnMark.textContent = current;
  147.     turnWrap.classList.toggle('o-turn', current === 'O');
  148.   }
  150.   function lockBoard(v) {
  151.     Array.from(boardEl.children).forEach((c) => c.classList.toggle('disabled', v));
  152.   }
  154.   function winningLine(b, p) {
  155.     for (const w of WINS) {
  156.       if (b[w[0]] === p && b[w[1]] === p && b[w[2]] === p) return w;
  157.     }
  158.     return null;
  159.   }
  161.   /* IA minimax (O maximiza) */
  162.   function bestMove() {
  163.     let bestScore = -Infinity;
  164.     let best = -1;
  165.     for (let i = 0; i < 9; i++) {
  166.       if (!board[i]) {
  167.         board[i] = 'O';
  168.         const s = minimax(board, 0, false);
  169.         board[i] = '';
  170.         if (s > bestScore) { bestScore = s; best = i; }
  171.       }
  172.     }
  173.     return best;
  174.   }
  176.   function minimax(b, depth, isMax) {
  177.     if (winningLine(b, 'O')) return 10 - depth;
  178.     if (winningLine(b, 'X')) return depth - 10;
  179.     if (b.every((v) => v)) return 0;
  181.     if (isMax) {
  182.       let best = -Infinity;
  183.       for (let i = 0; i < 9; i++) {
  184.         if (!b[i]) { b[i] = 'O'; best = Math.max(best, minimax(b, depth + 1, false)); b[i] = ''; }
  185.       }
  186.       return best;
  187.     }
  188.     let best = Infinity;
  189.     for (let i = 0; i < 9; i++) {
  190.       if (!b[i]) { b[i] = 'X'; best = Math.min(best, minimax(b, depth + 1, true)); b[i] = ''; }
  191.     }
  192.     return best;
  193.   }
  195.   function renderScores() {
  196.     scoreXEl.textContent = scores.x;
  197.     scoreOEl.textContent = scores.o;
  198.     scoreDEl.textContent = scores.d;
  199.   }
  201.   function save() { try { localStorage.setItem(STORE_KEY, JSON.stringify(scores)); } catch (e) {} }
  202.   function load() {
  203.     try {
  204.       const raw = localStorage.getItem(STORE_KEY);
  205.       if (!raw) return { x: 0, o: 0, d: 0 };
  206.       const p = JSON.parse(raw);
  207.       return { x: +p.x || 0, o: +p.o || 0, d: +p.d || 0 };
  208.     } catch (e) { return { x: 0, o: 0, d: 0 }; }
  209.   }
  210. })();
    211.