Инструкция по созданию игры «Крестики-нолики» с помощью React-Native

React Native позволяет приложениям запускать единую базу кода на нескольких платформах, таких как Android и iOS. Научившись разрабатывать игры TicTacToe, вы сможете изучить основы стиля, взаимодействия с пользователем и многое другое. Все это поможет вам улучшить базовую основу React-Native.

Необходимые условия для программирования игры «Крестики-нолики» с использованием React Native

2. Реагировать нативный
3. Реагировать на нативные компоненты
4. Обработка событий React
5. Экспо CLI

Инструкция по созданию игры «Крестики-нолики» с помощью React Native

Компонент реагирования под названием TicTacToe был создан для реализации игровой логики, таблиц, стилей и обработки событий. Логика игры включает в себя обработку действий пользователя, таких как нажатие на квадраты на доске и перезапуск игровых кнопок. Игровая логика также включает в себя логику проверки победителя на каждом ходу и перезапуска игры. При нажатии на кнопку перезапуска игра будет перезагружена. Когда у обоих игроков не останется ходов, игра заканчивается.

Правила игры в крестики-нолики

1. Это игра, в которой используется сетка 3×3.
2. Один игрок выберет символ X, другой игрок выберет символ O.
3. Игроки могут отмечать эти символы на сетке.
4. Победителем будет считаться тот игрок, который первым попадет в 3 последовательные горизонтальные, вертикальные или диагональные отметки.
5. Если у обоих игроков закончились ходы, игра заканчивается вничью.

Шаги по созданию проекта

Шаг 1. Создайте приложение React-Native с помощью следующей команды:

npx create-expo-app tictactoe

Шаг 2. Откройте папку проекта React Native с помощью команды cd:

компакт-диск крестики-нолики

Шаг 3. Установите пакет «npm install response-native-paper» с помощью следующей команды установки npm:

npm установить реакцию-native-paper

Структура проекта:

Например: напишите приведенный ниже код в файле App.js:

импортировать React, {Компонент} из «реагировать»; импортировать {View, Text, TouchableOpacity, Button, StyleSheet} из «реагировать-родной»; импортировать {Поставщик как PaperProvider, Appbar} из «реагировать-родной-бумаги»; класс TicTacToe расширяется Компонент {конструктор (реквизит) {супер (реквизит); this.state = { квадраты: Array(9).fill(null), xIsNext: true, }; } // Функция для обработки кликов по квадратам handleClick(i) { const Squares = this.state.squares.slice(); if (calculateWinner(squares) || Squares(i)) { return; } Squares(i) = this.state.xIsNext? «Х»: «О»; this.setState({ квадраты: квадраты, xIsNext: !this.state.xIsNext, }); } // Функция перезапуска игры restartGame() { this.setState({ // Устанавливаем значения по умолчанию для сброса игровых квадратов: Array(9).fill(null), xIsNext: true, }); } // Функция для рендеринга квадратов во время воспроизведения renderSquare(i) { return ( // рендеринг отдельных квадратов this.handleClick(i)} > {this.state.squares(i)} ); } // Функция для рендеринга всего, что находится внутри компонента render() { const Winner = CalculateWinner(this.state.squares); пусть статус; // если кто-то выиграл игру, измените статус на победителя // если все квадраты заполнены и ни один не выигран, Отображать как ничью! if (победитель) { status = `Победитель: ${winner}`; } else if (this.state.squares.every((square) => Square !== null)) { status=”Draw!”; } else { status = `Следующий игрок: ${this.state.xIsNext? ‘X’: ‘O’}`; } // возвращаем весь игровой экран return ( Крестики-нолики {this.renderSquare(0)} {this.renderSquare(1)} {this.renderSquare(2)} {this.renderSquare(3)} {this.renderSquare(4) )} {this.renderSquare(5)} {this.renderSquare(6)} {this.renderSquare(7)} {this.renderSquare(8)} {status} this.restartGame()} mstyle={styles.restartButton} /> ); }}// Stylingsconststyles = StyleSheet.create({Container: { flex: 1, justifyContent: ‘center’, alignItems: ‘center’, backgroundColor: ‘#FFFFE0’, }, title: { FontSize: 24, MarginBottom: 20 , }, Square: { ширина: 100, высота: 100, borderWidth: 1, borderColor: ‘черный’, justifyContent: ‘center’, alignItems: ‘center’, }, SquareText: { FontSize: 40, }, статус: { MarginVertical: 20, FontSize: 20, }, restartButton: { MarginTop: 10, },});// Функция определения победителя function CalculateWinner(squares) { constlines = ( (0, 1, 2), (3, 4, 5), (6, 7, 8), (0, 3, 6), (1, 4, 7), (2, 5, 8), (0, 4, 8), (2, 4, 6), ); для (пусть я = 0; я

Шаги по запуску игры «Крестики-нолики»

Шаг 1. Перейдите в командную строку/терминал и выполните следующую команду, чтобы запустить приложение Tic Tac Toe.

начало выставки npx

Шаг 2. В зависимости от типа операционной системы введите следующую команду:

Чтобы запустить приложение на устройстве Android:

Npx реагирует на собственный запуск Android

Чтобы запустить приложение на iOS:

Npx реагирует на собственный запуск iOS

Результат:

Готово! Удачи!

В приведенной выше статье вы познакомились с «Инструкциями по созданию игры «Крестики-нолики» с использованием React-Native». СоветыНадейтесь, что эта статья вам поможет! Если эта статья кажется вам интересной и полезной, не забудьте поделиться ею. Спасибо!