Skip to content
Sign upLog in
This post is read-only. Explore Repls and connect with other creators on Community.View Community
The info in this post might be out of date, check out our docs instead. View docs
8

Tic Tac Toe - Play a game of Tic Tac Toe (pure HTML)

CodingElf66
CodingElf66

Tic Tac Toe - Play a simple Tic Tac Toe game (pure HTML)

Intro

Hello, Replit Community! This is a Tic Tac Toe game, written in HTML, CSS, and Javascript. You will always be O, and your opponent or the other player will be X. Anyways, just hope you enjoy the CSS Styling and the background, and of course, the main game. This is pure HTML, and actually does not use Javascript.

About

This Tic Tac Toe game is just a simple project I created, without using Python's Flask server, also without using Javascript! It's just a game that took a week to create that I hope you enjoy!

Code

If you want to view the code, I'll just write it here for you.

CSS:

@font-face { font-family: Cyber; src: url("https://assets.codepen.io/605876/Blender-Pro-Bold.otf"); font-display: swap; } * { box-sizing: border-box; } :root { --size: 300px; --piece-size: calc((var(--size) / 3)); --line: #e6e6e6; --bg: #060d13; --naught: #00aa55; --naught-alpha: rgba(40, 212, 126, 0.5); --cross: #7800b4; --cross-alpha: rgba(166, 83, 207, 0.5); --draw-speed: 0.15; --color: #2a2222; } @media (min-width: 768px) { :root { --size: 50vmin; } } @media (max-height: 500px) { :root { --size: 300px; } } body { display: grid; margin: 0; overflow-x: hidden; background-repeat: no-repeat; background-position: center center; background-image: url("https"); justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(-45deg, #23d5ab, #2bd645, #d8e30b, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradient 20s ease infinite; color: var(--color); font-family: 'Cyber', sans-serif; text-transform: uppercase; } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } svg { filter: drop-shadow(0 -0.25vmin 0.25vmin #000) drop-shadow(0 0 0.5vmin var(--alpha)) drop-shadow(0 0 1vmin var(--alpha)) drop-shadow(0 0 5vmin var(--stroke)) brightness(1.2); stroke: var(--stroke); } form, .board { display: grid; place-items: center; position: relative; } .game__result { display: none; position: absolute; width: calc(var(--size) * 1.5); height: calc(var(--size) * 1.5); transform: translate(-50%, -50%); top: 50%; left: 50%; } label, .o, .x { position: absolute; display: inline-block; height: var(--piece-size); width: var(--piece-size); } label { cursor: pointer; } label:hover .ghost { opacity: 0.5; } .ghost { opacity: 0; transition: opacity calc(var(--draw-speed) * 1s); } .o { --alpha: var(--naught-alpha); --stroke: var(--naught); transform: rotateX(180deg); } .x { --alpha: var(--cross-alpha); --stroke: var(--cross); } .x path:nth-of-type(2) { --delay: var(--draw-speed); } :checked + .x { display: block; } :checked + .o { display: block; } .board { height: var(--size); width: var(--size); grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); } .board__x, .board__o { display: none; left: calc(var(--x) * (100% / 3)); top: calc(var(--y) * (100% / 3)); z-index: 2; position: absolute; } .board__line { --stroke: var(--line); --alpha: rgba(230,230,230,0.5); width: calc(var(--size) * 0.05); height: var(--size); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(calc(var(--rotate) * -90deg)) translate(calc(var(--shift) * ((var(--size) / 3) * 0.5)), 0); } .board__cell { height: var(--piece-size); width: var(--piece-size); } input, button { position: absolute; } button { top: 125%; background: transparent; border: 0; padding: 0; height: 5vmin; width: 5vmin; min-height: 48px; min-width: 48px; outline: transparent; cursor: pointer; display: none; transition: transform calc(var(--draw-speed) * 1s); -webkit-animation: fadeIn calc(var(--draw-speed) * 4s) calc(var(--draw-speed) * 2s) both; animation: fadeIn calc(var(--draw-speed) * 4s) calc(var(--draw-speed) * 2s) both; } button:hover { transform: translate(0, -4%); } button:active { transform: translate(0, 2%) scale(0.8); } .reset { height: 100%; fill: var(--line); } input { position: fixed; left: 100%; } .result { -webkit-animation: flyIn calc(var(--draw-speed) * 3s) ease-in both; animation: flyIn calc(var(--draw-speed) * 3s) ease-in both; -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px); z-index: 10; } .result__content { height: 40%; width: 40%; top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; border-radius: 15%; background: rgba(36,51,66,0.8); color: #fff; align-items: center; display: flex; justify-content: center; flex-direction: column; font-weight: bold; font-size: 2rem; box-shadow: 0 3vmin 2.5vmin -2.5vmin #000; } .result__winner { position: static; height: calc((var(--size) / 3)); } .zzz { --stroke: #197fe6; fill: var(--stroke); } :checked ~ .board .board__cell label:nth-of-type(odd), :checked ~ :checked ~ :checked ~ .board .board__cell label:nth-of-type(odd), :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ .board .board__cell label:nth-of-type(odd), :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ .board .board__cell label:nth-of-type(odd), :checked ~ :checked ~ .board .board__cell label:nth-of-type(even), :checked ~ :checked ~ :checked ~ :checked ~ .board .board__cell label:nth-of-type(even), :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ .board .board__cell label:nth-of-type(even), :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ .board .board__cell label:nth-of-type(even) { display: block; } :checked ~ .board .board__cell label:nth-of-type(even), :checked ~ :checked ~ :checked ~ .board .board__cell label:nth-of-type(even), :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ .board .board__cell label:nth-of-type(even), :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ .board .board__cell label:nth-of-type(even), :checked ~ :checked ~ .board .board__cell label:nth-of-type(odd), :checked ~ :checked ~ :checked ~ :checked ~ .board .board__cell label:nth-of-type(odd), :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ .board .board__cell label:nth-of-type(odd), :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ .board .board__cell label:nth-of-type(odd) { display: none; } #x-0:checked ~ #x-1:checked ~ #x-2:checked ~ .game__result--x, #x-3:checked ~ #x-4:checked ~ #x-5:checked ~ .game__result--x, #x-6:checked ~ #x-7:checked ~ #x-8:checked ~ .game__result--x, #x-0:checked ~ #x-3:checked ~ #x-6:checked ~ .game__result--x, #x-1:checked ~ #x-4:checked ~ #x-7:checked ~ .game__result--x, #x-2:checked ~ #x-5:checked ~ #x-8:checked ~ .game__result--x, #x-0:checked ~ #x-4:checked ~ #x-8:checked ~ .game__result--x, #x-2:checked ~ #x-4:checked ~ #x-6:checked ~ .game__result--x, #o-0:checked ~ #o-1:checked ~ #o-2:checked ~ .game__result--o, #o-3:checked ~ #o-4:checked ~ #o-5:checked ~ .game__result--o, #o-6:checked ~ #o-7:checked ~ #o-8:checked ~ .game__result--o, #o-0:checked ~ #o-3:checked ~ #o-6:checked ~ .game__result--o, #o-1:checked ~ #o-4:checked ~ #o-7:checked ~ .game__result--o, #o-2:checked ~ #o-5:checked ~ #o-8:checked ~ .game__result--o, #o-0:checked ~ #o-4:checked ~ #o-8:checked ~ .game__result--o, #o-2:checked ~ #o-4:checked ~ #o-6:checked ~ .game__result--o { display: flex; } #x-0:checked ~ #x-1:checked ~ #x-2:checked ~ .game__result--x ~ .game__result--draw, #x-3:checked ~ #x-4:checked ~ #x-5:checked ~ .game__result--x ~ .game__result--draw, #x-6:checked ~ #x-7:checked ~ #x-8:checked ~ .game__result--x ~ .game__result--draw, #x-0:checked ~ #x-3:checked ~ #x-6:checked ~ .game__result--x ~ .game__result--draw, #x-1:checked ~ #x-4:checked ~ #x-7:checked ~ .game__result--x ~ .game__result--draw, #x-2:checked ~ #x-5:checked ~ #x-8:checked ~ .game__result--x ~ .game__result--draw, #x-0:checked ~ #x-4:checked ~ #x-8:checked ~ .game__result--x ~ .game__result--draw, #x-2:checked ~ #x-4:checked ~ #x-6:checked ~ .game__result--x ~ .game__result--draw, #o-0:checked ~ #o-1:checked ~ #o-2:checked ~ .game__result--o ~ .game__result--draw, #o-3:checked ~ #o-4:checked ~ #o-5:checked ~ .game__result--o ~ .game__result--draw, #o-6:checked ~ #o-7:checked ~ #o-8:checked ~ .game__result--o ~ .game__result--draw, #o-0:checked ~ #o-3:checked ~ #o-6:checked ~ .game__result--o ~ .game__result--draw, #o-1:checked ~ #o-4:checked ~ #o-7:checked ~ .game__result--o ~ .game__result--draw, #o-2:checked ~ #o-5:checked ~ #o-8:checked ~ .game__result--o ~ .game__result--draw, #o-0:checked ~ #o-4:checked ~ #o-8:checked ~ .game__result--o ~ .game__result--draw, #o-2:checked ~ #o-4:checked ~ #o-6:checked ~ .game__result--o ~ .game__result--draw { display: none; } #x-0:checked ~ #x-1:checked ~ #x-2:checked ~ .game__result--x ~ button, #x-3:checked ~ #x-4:checked ~ #x-5:checked ~ .game__result--x ~ button, #x-6:checked ~ #x-7:checked ~ #x-8:checked ~ .game__result--x ~ button, #x-0:checked ~ #x-3:checked ~ #x-6:checked ~ .game__result--x ~ button, #x-1:checked ~ #x-4:checked ~ #x-7:checked ~ .game__result--x ~ button, #x-2:checked ~ #x-5:checked ~ #x-8:checked ~ .game__result--x ~ button, #x-0:checked ~ #x-4:checked ~ #x-8:checked ~ .game__result--x ~ button, #x-2:checked ~ #x-4:checked ~ #x-6:checked ~ .game__result--x ~ button, #o-0:checked ~ #o-1:checked ~ #o-2:checked ~ .game__result--o ~ button, #o-3:checked ~ #o-4:checked ~ #o-5:checked ~ .game__result--o ~ button, #o-6:checked ~ #o-7:checked ~ #o-8:checked ~ .game__result--o ~ button, #o-0:checked ~ #o-3:checked ~ #o-6:checked ~ .game__result--o ~ button, #o-1:checked ~ #o-4:checked ~ #o-7:checked ~ .game__result--o ~ button, #o-2:checked ~ #o-5:checked ~ #o-8:checked ~ .game__result--o ~ button, #o-0:checked ~ #o-4:checked ~ #o-8:checked ~ .game__result--o ~ button, #o-2:checked ~ #o-4:checked ~ #o-6:checked ~ .game__result--o ~ button { display: block; } :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ .game__result--draw { display: block; } :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ button { display: block; } .board__line path, .o circle, .x path { -webkit-animation: draw calc(var(--draw-speed) * 1s) calc(var(--delay, 0) * 1s) ease-in both; animation: draw calc(var(--draw-speed) * 1s) calc(var(--delay, 0) * 1s) ease-in both; } .confetti { position: absolute; top: 50%; left: 50%; font-size: 2rem; -webkit-animation: celebrate 1s forwards, fadeOut calc(var(--draw-speed) * 1s) calc((1 - var(--draw-speed)) * 1s) forwards; animation: celebrate 1s forwards, fadeOut calc(var(--draw-speed) * 1s) calc((1 - var(--draw-speed)) * 1s) forwards; } @-webkit-keyframes fadeIn { from { opacity: 0; } } @keyframes fadeIn { from { opacity: 0; } } @-webkit-keyframes flyIn { from { opacity: 0; transform: translate(-50%, 250%) scale(0); } } @keyframes flyIn { from { opacity: 0; transform: translate(-50%, 250%) scale(0); } } @-webkit-keyframes draw { to { stroke-dashoffset: 0; } } @keyframes draw { to { stroke-dashoffset: 0; } } @-webkit-keyframes fadeOut { to { opacity: 0; } } @keyframes fadeOut { to { opacity: 0; } } @-webkit-keyframes celebrate { from { transform: translate(-50%, -50%) rotate(calc(var(--rotation) * 1deg)) scale(0) translate(0, 0); } to { transform: translate(-50%, -50%) rotate(calc(var(--rotation) * 1deg)) scale(1) translate(0, calc(var(--travel) * 1vmin)); } } @keyframes celebrate { from { transform: translate(-50%, -50%) rotate(calc(var(--rotation) * 1deg)) scale(0) translate(0, 0); } to { transform: translate(-50%, -50%) rotate(calc(var(--rotation) * 1deg)) scale(1) translate(0, calc(var(--travel) * 1vmin)); } }

HTML:

<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="shortcut icon" href="favicon.png"/> <link rel="apple-touch-icon" type="image/png" href="https://i.ibb.co/852XnXC/Icon.png"/> <meta name="apple-mobile-web-app-title" content="Cooli"> <link href="style.css" rel="stylesheet" type="text/css"/> <link rel="shortcut icon" type="image/x-icon" href="https://i.ibb.co/852XnXC/Icon.png"/> <link rel="mask-icon" type="" href="https://i.ibb.co/852XnXC/Icon.png"/> <title>Tic Tac Toe</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> </head> <body translate="no" > <form class="game"> <input type="checkbox" id="x-0"/> <svg class="x board__x" style="--x: 0; --y: 0;" viewBox="0 0 100 100"> <path class="cross" d="M 80 20 L 20 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path> <path class="cross" d="M 20 20 L 80 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path> </svg> <input type="checkbox" id="o-0"/> <svg class="o board__o" style="--x: 0; --y: 0;" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="30" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="200" stroke-dashoffset="200"></circle> </svg> <input type="checkbox" id="x-1"/> <svg class="x board__x" style="--x: 1; --y: 0;" viewBox="0 0 100 100"> <path class="cross" d="M 80 20 L 20 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path> <path class="cross" d="M 20 20 L 80 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path> </svg> <input type="checkbox" id="o-1"/> <svg class="o board__o" style="--x: 1; --y: 0;" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="30" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="200" stroke-dashoffset="200"></circle> </svg> <input type="checkbox" id="x-2"/> <svg class="x board__x" style="--x: 2; --y: 0;" viewBox="0 0 100 100"> <path class="cross" d="M 80 20 L 20 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path> <path class="cross" d="M 20 20 L 80 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path> </svg> <input type="checkbox" id="o-2"/> <svg class="o board__o" style="--x: 2; --y: 0;" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="30" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="200" stroke-dashoffset="200"></circle> </svg> <input type="checkbox" id="x-3"/> <svg class="x board__x" style="--x: 0; --y: 1;" viewBox="0 0 100 100"> <path class="cross" d="M 80 20 L 20 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path> <path class="cross" d="M 20 20 L 80 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path> </svg> <input type="checkbox" id="o-3"/> <svg class="o board__o" style="--x: 0; --y: 1;" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="30" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="200" stroke-dashoffset="200"></circle> </svg> <input type="checkbox" id="x-4"/> <svg class="x board__x" style="--x: 1; --y: 1;" viewBox="0 0 100 100"> <path class="cross" d="M 80 20 L 20 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path> <path class="cross" d="M 20 20 L 80 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path> </svg> <input type="checkbox" id="o-4"/> <svg class="o board__o" style="--x: 1; --y: 1;" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="30" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="200" stroke-dashoffset="200"></circle> </svg> <input type="checkbox" id="x-5"/> <svg class="x board__x" style="--x: 2; --y: 1;" viewBox="0 0 100 100"> <path class="cross" d="M 80 20 L 20 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path> <path class="cross" d="M 20 20 L 80 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path> </svg> <input type="checkbox" id="o-5"/> <svg class="o board__o" style="--x: 2; --y: 1;" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="30" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="200" stroke-dashoffset="200"></circle> </svg> <input type="checkbox" id="x-6"/> <svg class="x board__x" style="--x: 0; --y: 2;" viewBox="0 0 100 100"> <path class="cross" d="M 80 20 L 20 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path> <path class="cross" d="M 20 20 L 80 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path> </svg> <input type="checkbox" id="o-6"/> <svg class="o board__o" style="--x: 0; --y: 2;" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="30" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="200" stroke-dashoffset="200"></circle> </svg> <input type="checkbox" id="x-7"/> <svg class="x board__x" style="--x: 1; --y: 2;" viewBox="0 0 100 100"> <path class="cross" d="M 80 20 L 20 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path> <path class="cross" d="M 20 20 L 80 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path> </svg> <input type="checkbox" id="o-7"/> <svg class="o board__o" style="--x: 1; --y: 2;" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="30" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="200" stroke-dashoffset="200"></circle> </svg> <input type="checkbox" id="x-8"/> <svg class="x board__x" style="--x: 2; --y: 2;" viewBox="0 0 100 100"> <path class="cross" d="M 80 20 L 20 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path> <path class="cross" d="M 20 20 L 80 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path> </svg> <input type="checkbox" id="o-8"/> <svg class="o board__o" style="--x: 2; --y: 2;" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="30" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="200" stroke-dashoffset="200"></circle> </svg> <div class="board"> <svg class="board__line" viewBox="0 0 10 300" style="--rotate: 0; --shift: -1; --delay: 0.75;"> <path d="M 5 5 L 5 295" stroke-width="10" stroke-linecap="round" stroke-dasharray="300" stroke-dashoffset="300"></path> </svg> <svg class="board__line" viewBox="0 0 10 300" style="--rotate: 1; --shift: -1; --delay: 0.5;"> <path d="M 5 5 L 5 295" stroke-width="10" stroke-linecap="round" stroke-dasharray="300" stroke-dashoffset="300"></path> </svg> <svg class="board__line" viewBox="0 0 10 300" style="--rotate: 0; --shift: 1; --delay: 1;"> <path d="M 5 5 L 5 295" stroke-width="10" stroke-linecap="round" stroke-dasharray="300" stroke-dashoffset="300"></path> </svg> <svg class="board__line" viewBox="0 0 10 300" style="--rotate: 1; --shift: 1; --delay: 0.25;"> <path d="M 5 5 L 5 295" stroke-width="10" stroke-linecap="round" stroke-dasharray="300" stroke-dashoffset="300"></path> </svg> <div class="board__cell"> <label for="x-0"> <svg class="x ghost" viewBox="0 0 100 100"> <path class="cross" d="M 80 20 L 20 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path> <path class="cross" d="M 20 20 L 80 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path> </svg> </label> <label for="o-0"> <svg class="o ghost" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="30" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="200" stroke-dashoffset="200"></circle> </svg> </label> </div> <div class="board__cell"> <label for="x-1"> <svg class="x ghost" viewBox="0 0 100 100"> <path class="cross" d="M 80 20 L 20 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path> <path class="cross" d="M 20 20 L 80 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path> </svg> </label> <label for="o-1"> <svg class="o ghost" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="30" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="200" stroke-dashoffset="200"></circle> </svg> </label> </div> <div class="board__cell"> <label for="x-2"> <svg class="x ghost" viewBox="0 0 100 100"> <path class="cross" d="M 80 20 L 20 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path> <path class="cross" d="M 20 20 L 80 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path> </svg> </label> <label for="o-2"> <svg class="o ghost" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="30" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="200" stroke-dashoffset="200"></circle> </svg> </label> </div> <div class="board__cell"> <label for="x-3"> <svg class="x ghost" viewBox="0 0 100 100"> <path class="cross" d="M 80 20 L 20 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path> <path class="cross" d="M 20 20 L 80 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path> </svg> </label> <label for="o-3"> <svg class="o ghost" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="30" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="200" stroke-dashoffset="200"></circle> </svg> </label> </div> <div class="board__cell"> <label for="x-4"> <svg class="x ghost" viewBox="0 0 100 100"> <path class="cross" d="M 80 20 L 20 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path> <path class="cross" d="M 20 20 L 80 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path> </svg> </label> <label for="o-4"> <svg class="o ghost" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="30" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="200" stroke-dashoffset="200"></circle> </svg> </label> </div> <div class="board__cell"> <label for="x-5"> <svg class="x ghost" viewBox="0 0 100 100"> <path class="cross" d="M 80 20 L 20 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path> <path class="cross" d="M 20 20 L 80 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path> </svg> </label> <label for="o-5"> <svg class="o ghost" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="30" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="200" stroke-dashoffset="200"></circle> </svg> </label> </div> <div class="board__cell"> <label for="x-6"> <svg class="x ghost" viewBox="0 0 100 100"> <path class="cross" d="M 80 20 L 20 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path> <path class="cross" d="M 20 20 L 80 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path> </svg> </label> <label for="o-6"> <svg class="o ghost" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="30" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="200" stroke-dashoffset="200"></circle> </svg> </label> </div> <div class="board__cell"> <label for="x-7"> <svg class="x ghost" viewBox="0 0 100 100"> <path class="cross" d="M 80 20 L 20 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path> <path class="cross" d="M 20 20 L 80 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path> </svg> </label> <label for="o-7"> <svg class="o ghost" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="30" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="200" stroke-dashoffset="200"></circle> </svg> </label> </div> <div class="board__cell"> <label for="x-8"> <svg class="x ghost" viewBox="0 0 100 100"> <path class="cross" d="M 80 20 L 20 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path> <path class="cross" d="M 20 20 L 80 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path> </svg> </label> <label for="o-8"> <svg class="o ghost" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="30" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="200" stroke-dashoffset="200"></circle> </svg> </label> </div> </div> <div class="game__result game__result--x result"> <div class="confetti" style="--rotation: -31.353619404712802; --travel: -99.74711967700532;">🎉</div> <div class="confetti" style="--rotation: -62.14556953725793; --travel: -75.3054749248626;">🎉</div> <div class="confetti" style="--rotation: -6.116947970263553; --travel: -62.98349009454603;">🎉</div> <div class="confetti" style="--rotation: -88.95834073992728; --travel: -85.11475891046084;">🎉</div> <div class="confetti" style="--rotation: -34.79879551523619; --travel: -65.02989759307958;">🎉</div> <div class="confetti" style="--rotation: 45.565949472463046; --travel: -70.41423111030053;">🎉</div> <div class="confetti" style="--rotation: -89.10215821006788; --travel: -36.55305991842119;">🎉</div> <div class="confetti" style="--rotation: -50.93578392438416; --travel: -70.41679464052615;">🎉</div> <div class="confetti" style="--rotation: -76.36797169260923; --travel: -24.25497291568648;">🎉</div> <div class="confetti" style="--rotation: 28.70735096425831; --travel: -78.14821446314097;">🎉</div> <div class="result__content"> <div class="result__title">Winner!</div> <svg class="x result__winner" viewBox="0 0 100 100"> <path class="cross" d="M 80 20 L 20 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path> <path class="cross" d="M 20 20 L 80 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path> </svg> </div> </div> <div class="game__result game__result--o result"> <div class="confetti" style="--rotation: 71.52497694325714; --travel: -51.051505609812885;">🎉</div> <div class="confetti" style="--rotation: -50.92713872528324; --travel: -7.770462649348642;">🎉</div> <div class="confetti" style="--rotation: -73.59659243198831; --travel: -45.32194662425408;">🎉</div> <div class="confetti" style="--rotation: 2.8258231472586743; --travel: -68.49413362119896;">🎉</div> <div class="confetti" style="--rotation: -36.465009120331054; --travel: -97.04268104810289;">🎉</div> <div class="confetti" style="--rotation: -25.971359216281513; --travel: -14.504033623408418;">🎉</div> <div class="confetti" style="--rotation: -83.73422103374475; --travel: -71.77415613367528;">🎉</div> <div class="confetti" style="--rotation: -30.543903608578972; --travel: -71.15973630460229;">🎉</div> <div class="confetti" style="--rotation: -12.122800502981505; --travel: -46.561118208615326;">🎉</div> <div class="confetti" style="--rotation: -22.350258156700875; --travel: -87.57860619649011;">🎉</div> <div class="result__content"> <div class="result__title">Winner!</div> <svg class="o result__winner" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="30" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="200" stroke-dashoffset="200"></circle> </svg> </div> </div> <div class="game__result game__result--draw result"> <div class="result__content"> <div class="result__title">Draw...</div> <svg class="zzz result__winner" viewBox="0 0 24 24"> <path d="M23,12H17V10L20.39,6H17V4H23V6L19.62,10H23V12M15,16H9V14L12.39,10H9V8H15V10L11.62,14H15V16M7,20H1V18L4.39,14H1V12H7V14L3.62,18H7V20Z"></path> </svg> </div> </div> <button type="reset" title="Reset Board"> <svg class="reset" viewBox="0 0 24 24"> <path d="M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z"></path> </svg> </button> </form> </body> </html>

There's nothing in script.js, but if you need an explanation or detail of the code be glad to ask below.

Credits

Here are the credits!

  • @QuickV
    for the background
  • W3Schools for CSS
  • Google for letting me research

Closing

Anyways, I hope you enjoyed this post or game. Please leave a comment if you have any comments, suggestions, feedback, compliments, etc.. If not, I'll see you next time for another amazing post!

General note: This site is not a test like my fake URL Shortener

1 year ago
You are viewing a single comment. View All
1