Prompt Details
Model
Chat - GPT-3.5 (gpt-3.5-turbo)
Token size
69 ($0.00010 / call)
Example input
To get started, simply copy the prompt and insert it. Then use it as a starting point to create your own look!
Example output
Sure! Here's an example of a simple Tic Tac Toe game using HTML, CSS, and JavaScript:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<title>Tic Tac Toe</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Tic Tac Toe</h1>
<div id="board" class="board">
<div class="cell" onclick="makeMove(0)"></div>
<div class="cell" onclick="makeMove(1)"></div>
<div class="cell" onclick="makeMove(2)"></div>
<div class="cell" onclick="makeMove(3)"></div>
<div class="cell" onclick="makeMove(4)"></div>
<div class="cell" onclick="makeMove(5)"></div>
<div class="cell" onclick="makeMove(6)"></div>
<div class="cell" onclick="makeMove(7)"></div>
<div class="cell" onclick="makeMove(8)"></div>
</div>
<button id="reset-button" onclick="resetGame()">Reset</button>
<script src="script.js"></script>
</body>
</html>
```
CSS (style.css):
```css
body {
text-align: center;
font-family: Arial, sans-serif;
}
h1 {
margin-top: 20px;
}
.board {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
max-width: 300px;
margin: 20px auto;
}
.cell {
width: 100%;
height: 100px;
background-color: lightgray;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
cursor: pointer;
}
button {
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
}
```
JavaScript (script.js):
```javascript
let currentPlayer = "X";
let gameActive = true;
let gameState = ["", "", "", "", "", "", "", "", ""];
const winningConditions = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
const cells = document.querySelectorAll(".cell");
cells.forEach(cell => cell.addEventListener("click", makeMove));
function makeMove(e) {
const cell = e.target;
const cellIndex = Array.from(cells).indexOf(cell);
if (!gameActive || gameState[cellIndex] !== "") {
return;
}
gameState[cellIndex] = currentPlayer;
cell.textContent = currentPlayer;
cell.classList.add(currentPlayer === "X" ? "blue" : "red");
if (checkWin()) {
displayMessage(`${currentPlayer} wins!`);
gameActive = false;
return;
}
if (checkDraw()) {
displayMessage("It's a draw!");
gameActive = false;
return;
}
currentPlayer = currentPlayer === "X" ? "O" : "X";
}
function checkWin() {
for (let condition of winningConditions) {
let [a, b, c] = condition;
if (
gameState[a] === currentPlayer &&
gameState[b] === currentPlayer &&
gameState[c] === currentPlayer
) {
return true;
}
}
return false;
}
function checkDraw() {
return gameState.every(cell => cell !== "");
}
function displayMessage(message) {
// Reemplaza esto con tu propia lógica para mostrar el mensaje en la interfaz de usuario
console.log(message);
}
function resetGame() {
currentPlayer = "X";
gameActive = true;
gameState = ["", "", "", "", "", "", "", "", ""];
cells.forEach(cell => {
cell.textContent = "";
cell.classList.remove("red", "blue");
});
}
const resetButton = document.getElementById("reset-button");
resetButton.addEventListener("click", resetGame);
Instant access
Commercial use
Money‑backBy purchasing this prompt, you agree to our terms of service
2
Favorites
29
Views
GPT-3.5-TURBO
🔀 Create your own dream website! With your favorite game Tic Tac Toe workable at any time.
🔥 You will have everything you need to create it, such as your own html, css and javascript code.
✨⚡️ Workable for any design, GET IT NOW!
...more
Added over 1 month ago
