Tres en raya

1,796 gerlannypaula

Abrir en el editor Publica tu código

Recomendado

1 March 2023

Animación de texto para enlaces

15 May 2025

Generador de contraseñas

19 November 2025

Pantalla de carga animada con puntos en CSS

HTML

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8"/>
        <title>Tic Tac Toe</title>
        <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0normalize.min.css"/>
        <link
        rel="stylesheet"
        href="https://cdnjs.cloundflare.com/ajax/libs/tailwindcss/1.0.2/tailwind.min.css"/>
      
        <link rel="stylesheet" href="./style.css">
    </head>
    <body>
        <body class="w-screen h-sreen ctr">
            <div class="tabel ctr">
                <div class="board">
                    <span id="col-0"></span><span id="col-1"></span>
                    
                    <span id="col-2"></span> <span id="col-3"></span>
                   
                    <span id="col-4"></span><span id="col-5"></span>
                    
                    <span id="col-6"></span><span id="col-7"></span>
                    
                    <span id="col-8"></span>
                                    
                </div>
                <button id="reset">Reset</button>
            </div>
        </body>
        <script src="./main.js"></script>
    </body>
</html>

CSS

@import url("https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap");
* {
  font-family: "Press Start 2P", cursive;
  user-select: none;
}

body {
  background: #d9d7d7;
}

.ctr {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tabel {
  width: 500px;
  height: 500px;
  background: #fffb00;
  border-radius: 100%;
  border: 1px solid #0d152b;
  box-shadow: -2px 20px 0 -3px #0d476d, -20px 20px #0d152b;
  flex-direction: column;
}

.board {
  width: 369.2307692308px;
  height: 369.2307692308px;
  background: #d3e2ea;
  border-radius: 5px;
  border: 1px solid #0d152b;
  box-shadow: -10px 5px 0px -2px #192852;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1px;
  padding: 1px;
}

.board > span {
  background: #0d476d;
  color: #ffffff;
  font-size: 24px;
  padding-left: 9px;
  padding-top: 6px;
  text-align: center;
  border: 2px solid #0d152b;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: -1.2px 2px 0px 0px #141d4c;
}
.board > span:hover {
  background: #0d476d;
}
.board > span:active {
  box-shadow: -1.2px 7.4px 0px -2.5px #141d4c;
}

#reset {
  margin-top: 14px;
  color: #000000;
}

.win {
  background: #55efc4 !important;
}

'use strict'

const _ = document,
          cols = Array.from(_.querySelectorAll('.board > span')),
					reset = _.querySelector('#reset')
let cur = true
let arr = new Array(9).fill(null)
const wins = [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8],
  [0, 3, 6],
  [1, 4, 7],
  [2, 5, 8],
  [0, 4, 8],
  [2, 4, 6]
]
function event(can) {
	reset.addEventListener('click', fnreset)
  for(let col of cols)
    if(can)
      col.addEventListener('click', play)
    else
      col.removeEventListener('click', play)
}
event(true)
function play(e) {
  const __ = e.target
  if(!__.innerHTML){
    cur = !cur
    __.innerHTML = cur ? '<h1 name="O">O</h1>' :  '<h1 name="X">X</h1>'
    move(parseInt(__.id.split(/\D+/g)[1]), __.childNodes[0].getAttribute('name'))
  }
}

function move(ind, sign) {
  arr[ind] = sign
  console.log(arr)

for (let i = 0; i < wins.length; i++) {
     let [a, b, c] = wins[i] 
      if(cmp(arr[a], arr[b], arr[c])){
        console.log(sign, ' wins')
        event(false)
        cols[a].classList.add('win')
        cols[b].classList.add('win')
        cols[c].classList.add('win')
      }
  }
}
function cmp(a, b, c) {
  if(a && b && c)
    return (a === b) && (a === c) && (b === c)
}

function fnreset() {
    for(let col of cols){
      col.classList.remove('win')
      col.innerHTML = ''
    }
    arr = new Array(9).fill(null)
    event(true)
}