Введение:
В этой статье я расскажу о том, как создать игру "Крестики-Нолики" простыми способами, без необходимости писать код. Для этого мы будем использовать нейросеть ChatGPT3.
Понимание игровой логики:
Для начала разберемся с самой игрой "Крестики-Нолики". Цель игры - заполнить горизонтальный, вертикальный или диагональный ряд из трех символов, будь то крестики (X) или нолики (O). Игроки чередуются, чтобы ставить свои символы на свободные клетки на игровом поле. Игра заканчивается, когда кто-то выигрывает или наступает ничья.
Взаимодействие с ChatGPT :
Для визуализации игры мы будем использовать HTML и JavaScript. Мы запрашиваем игровое поле с помощью сетки из 9 клеток. Игра будет работать в режиме для двух игроков, на одном устройстве.
"Ты квалифицированный программист, специализирующийся в написании сайтов и игр на языке программирования HTML и JavaScript. Напиши код для игры "Крестики-Нолики" в виде landing-сайта. Код должен быть исправным и полным"
ChatGPT вывел мне данный* код, в дальнейшем вы можете использовать его в виде отправной точки для кастомизации на свой вкус.
<!DOCTYPE html>
<html>
<head>
<title>Крестики-нолики</title>
<style>
.game {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.board {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
gap: 10px;
}
.cell {
display: flex;
justify-content: center;
align-items: center;
font-size: 48px;
font-weight: bold;
color: #333;
background: #eee;
cursor: pointer;
transition: background 0.3s ease;
}
.cell:hover {
background: #ddd;
}
</style>
</head>
<body>
<div class="game">
<div class="board">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</div>
<script>
const board = document.querySelector(".board");
const cells = Array.from(document.querySelectorAll(".cell"));
const winningCombinations = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
let currentPlayer = "X";
let gameOver = false;
function checkWin() {
for (let i = 0; i < winningCombinations.length; i++) {
const [a, b, c] = winningCombinations[i];
if (
cells[a].innerText &&
cells[a].innerText === cells[b].innerText &&
cells[a].innerText === cells[c].innerText
) {
return true;
}
}
return false;
}
function handleClick(event) {
const cell = event.target;
const index = cells.indexOf(cell);
if (cell.innerText || gameOver) {
return;
}
cell.innerText = currentPlayer;
cell.style.color = currentPlayer === "X" ? "blue" : "red";
if (checkWin()) {
gameOver = true;
setTimeout(() => {
alert(`Игрок ${currentPlayer} победил!`);
}, 100);
return;
}
if (cells.every(cell => cell.innerText)) {
gameOver = true;
setTimeout(() => {
alert("Ничья!");
}, 100);
return;
}
currentPlayer = currentPlayer === "X" ? "O" : "X";
}
board.addEventListener("click", handleClick);
</script>
</body>
</html>
ChatGPT выдал мне рабочий код игры в светлых тонах. Однако, я хочу сделать игру для темной темы браузера. Попросим ChatGPT "подстроить этот код под темную версию браузера", а также добавим "приветственную надпись "Welcome to Tic Tac Toe!" белыми буквами по центру над игровым полем, шрифтом Times New Roman".
Заключение:
Итак, мы рассмотрели, как создать игру "Крестики-Нолики" методом зерокодинг, используя нейросеть ChatGPT. Это позволяет нам создавать интерактивные игры без необходимости быть профессиональным разработчиком.
Я считаю, что мой эксперимент удался ввиду простой составляющей самой игры. На данный момент, ChatGPT3 не сможет самостоятельно написать что-то серьезнее "змейки" или "сапёра", однако может быть весьма полезен в качестве помощи и объяснения частей кода.
Снизу будет приведен код для данной игры:
<!DOCTYPE html>
<html>
<head>
<title>Крестики-нолики</title>
<style>
h1 {
font-family: "Times New Roman", serif
}
:root {
--background-color: #111;
--cell-background: #D2D2D2;
--cell-color: #eee;
--cell-hover-color: #ddd;
--x-color: #437FB1;
--o-color: #DA0038;
--win-color: #00ff00;
--text-color: #fff;
}
body {
background-color: var(--background-color);
margin: 0;
padding: 0;
}
.game {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
}
.board {
display: grid;
grid-template-columns: repeat(3, 180px);
grid-template-rows: repeat(3, 180px);
gap: 1px;
}
.cell {
display: flex;
justify-content: center;
align-items: center;
font-size: 48px;
font-weight: bold;
color: var(--cell-color);
background: var(--cell-background);
cursor: pointer;
transition: background 0.3s ease;
}
.cell:hover {
background: var(--cell-hover-color);
}
.win {
color: var(--win-color);
}
.title {
font-size: 48px;
font-weight: bold;
color: #D2D2D2;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="game">
<h1 class="title">Welcome to Tic Tac Toe!</h1>
<div class="board">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</div>
<script>
const board = document.querySelector(".board");
const cells = Array.from(document.querySelectorAll(".cell"));
const winningCombinations = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
let currentPlayer = "X";
let gameOver = false;
function checkWin() {
for (let i = 0; i < winningCombinations.length; i++) {
const [a, b, c] = winningCombinations[i];
if (
cells[a].innerText &&
cells[a].innerText === cells[b].innerText &&
cells[a].innerText === cells[c].innerText
) {
cells[a].classList.add("win");
cells[b].classList.add("win");
cells[c].classList.add("win");
return true;
}
}
return false;
}
function handleClick(event) {
const cell = event.target;
const index = cells.indexOf(cell);
if (cell.innerText || gameOver) {
return;
}
cell.innerText = currentPlayer;
cell.style.color = currentPlayer === "X" ? "var(--x-color)" : "var(--o-color)";
if (checkWin()) {
gameOver = true;
setTimeout(() => {
alert(`Игрок ${currentPlayer} победил!`);
}, 100);
return;
}
if (cells.every(cell => cell.innerText)) {
gameOver = true;
setTimeout(() => {
alert("Ничья!");
}, 100);
return;
}
currentPlayer = currentPlayer === "X" ? "O" : "X";
}
board.addEventListener("click", handleClick);
</script>
</body>
</html>Комментарии (6)
gsaw
06.12.2023 07:11А зачем в запросе "квалифицированный программист ", если указать "низкоквалифицированный", то код хуже выдает или дольше? И почему "landing сайт", в чем это выражается?
fpga421
06.12.2023 07:11постойте, это не "зерокодинг", это "зерогуглинг".
использование названия игры вместо описания требуемой логики, это чит.
cry_san
Промпт.
Вжииих.
Все расходимся...