Jogo da velha

Abrir no Editor Publique Seu Código

Recomendado

15 July 2025

Estrutura HTML da barra de progresso animada em CSS

21 September 2024

<!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;
}

JS

'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)
}

Jogo da velha

Recomendado

dança dom

Estrutura HTML da barra de progresso animada em CSS

Entrada de senha Light

HTML

CSS

JS

Recomendado

dança dom

Estrutura HTML da barra de progresso animada em CSS

Entrada de senha Light

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS