Как написать крестики нолики на javascript

Крестики-нолики — разработка игры: как создать игру

Небольшое вступление

Вместо того, чтобы долго изучать программирование по статьям и лекциям, которые скучно описывают какие-то непонятные действия с числами и строками, лучше изучать программирование на красочных примерах, таких, как создание игр!

Естественно, вам потребуется хотя бы теоретическое знание о том, что такое: язык программирования, переменная, цикл, массив. Так же, для чтения этой статьи и изучения программы, желательно иметь представление о: JavaScript, HTML, и CSS (CSS не обязательно — требуется только для украшения).

Структура игры

Эта игра состоит из нескольких частей, которые написаны на HTML, CSS и JavaScript.

Общий принцип такой: на веб-страничке (HTML) делаются ссылки на файл с JavaScript-ом и CSS файл со стилями. Так же, в HTML размечаются те места, где будут элементы игры отображаться. А так же вставлена одна функция на JavaScript, которая запускается сразу после загрузки страницы, и задаёт параметры языка для игры, и даёт команду на создание нового игрового поля.

В CSS файле содержатся стили элементов игры, такие, как обводка клеток, и тип курсора мыши, при наведении на клетку.

В JS файле содержится основной код, который и управляет игрой.

Раз мы изучаем на примере, то практически каждая строчка будет содержать комментарий – подробное описание того, чего делает данная команда.

Исходный код CSS файла

CSS (каскадные таблицы стилей) – описывает стиль для отображения игрового поля на HTML страницы. Исходный код CSS приведу без подробных объяснений, только с комментариями, которые начинаются символами /* и заканчиваются символами */.

Код на HTML странице

HTML. Следующий код необходимо вставить на веб-страницу. Каждый фрагмент кода подписан.

Так же, нужно прописать параметр onload=»initGame();» в тег BODY.

внутрь BODY – туда, где будет управление игрой:

внутрь BODY – туда, где будет игровое поле:

Код JavaScript игры

Самый большой код. И самый главный. В нём есть и ИИ соперника, и функции отображения и построения поля, и проверка победы. Но, так как разбор программы сходу, думаю, будет немного сложноват, то сначала я опишу вкратце, какой фрагмент и функция программы за что отвечает.

Первые строки — переменные отвечают за общие переменные:

• gameImgDir — содержит сведения об расположении относительного адреса графических изображений.
• gTexts — содержит текстовые строки, полезны для поддержки многоязычности.
• gField — двумерный массив — содержит информацию о клетках.

Далее идут функции, которые вызываются со страницы. Посредством этих вызовов в игру передаются команды о выборе пользователя, и ответные реакции игры — сообщение о конце игры, расстановка крестиков и ноликов, расчёт хода компьютерного противника. Вот, что каждая из них делает:

• createField(w,h) — создание нового поля, с размером w на h.
• setCell(x,y,t) — ставит в клетку с координатами [x,y] значение t (крестик, или нолик). А так же заменяет картинки на поле.
• isWin() — проверяет, кто победил.
• CompGame() — вызывает компьютерного игрока, который сначало методом перебора проверяет все варианты, запуская isWin(), а затем делает ход, вызывая setCell(x,y,t).
• onCellClk(x,y) — вызывается по клику, передаются координаты клетки. Вызывает isWin(), setCell(x,y,t) и CompGame(). Сообщает информацию о победе.

После того, как мы изучили основные принципы игры, теперь можно смотреть весь исходный код файла gamescript.js. Все основные моменты кода даны с комментариями (комментарии в JS идут после двойного слеша //).

var gameImgDir=»data/»;
var gTexts=[]; // Для многоязычности.
gTexts[‘win1’]=’Win ‘; gTexts[‘win2′]=’!’;
gTexts[‘playing’]=’. ‘
gTexts[‘start’]=’Begin game!’

function createField(w,h) < // Задаёт размер игрового поля.
gField=new Array(w); // создание нового массива.
for (i=0;i // теперь переделаем массив в матрицу.

var hT=»

«; // вставка таблицы на страницу.
document.getElementById(‘gameinfo’).innerText=gTexts[‘start’]; // отобразить сообщение
>
function setCell(x,y,t) < // Поставить крестик или нолик
gField[x][y]=t; // Запомнить t в массиве
var imgsrc=gameImgDir+’c_null.gif’; // изображение по умолчанию
if (t==’x’) imgsrc=gameImgDir+’c_x.gif’; // картинка для крестика
if (t==’o’) imgsrc=gameImgDir+’c_o.gif’; // картинка для нолика
var oName=»c»+x+»_»+y; // составление имени картинки
document.getElementById(oName).src = imgsrc; // замена изображения
if (t!=null) document.getElementById(oName).alt = t; // если картинки выключены, то игра будет в текстовом режиме 🙂
>

function isWin() < // Проверка победы.
// проверка зон 3 на 3.
for ( stX=0 ; stX // Если размер поля больше трёх.
<
var lC=gField[stX][stY]; // проверка линии
if (lC!=null) for ( i=0 ; i // если проверяемая клетка не содержит lC, то сбросить значение lC
if (lC!=null) return lC; // если победа обнаружена.
lC=gField[2+stX][stY];
if (lC!=null) for ( i=0 ; i // проверка по вертикали
lC=gField[stX+i][stY];
if (lC!=null) for ( j=0 ; j // проверка по горизонтали
lC=gField[stX][stY+j];
if (lC!=null) for ( i=0 ; i // TO DO — если все клетки заняты, но никто не победил, то ничья, но пока это условие не сделано. Попробуйте сами доделать эту проверку 😉
return false; // если никто не победил
>

function CompGame() < // Так сказать ИИ :)
var tx=null,ty=null,tp=0; // tp — приоритет выбранной целевой клетки.
var stX=0,stY=0;
for ( stX=0 ; stX // для каждой клетки
<
var lC=gField[stX][stY];
if ( (lC!=’x’)&&(lC!=’o’)) < // только для пустых клеток
gField[stX][stY]=’x’;
if ( isWin()==’x’ ) < // пробуем победить
tx=stX;ty=stY;
tp=3;
> else if (tp // или помешать победить игроку.
tx=stX;ty=stY;
tp=2;
>else if (tp // или.
var mini=-1,maxi=1,minj=-1,maxj=1;
if (stX>=gField.length-1) maxi=0; if (stY>=gField[0].length-1) maxj=0;
if (stX // найти ближайший нолик.
for (i=mini;i // если есть рядом своя занятая клетка — поближе к своим
if (gField[stX+i][stY+j]==’o’) <
tx=stX;ty=stY;
tp=1;
>
>
if (tp // или хотя бы на свободную клетку поставить.
tx=stX;ty=stY;
>
>
>
gField[stX][stY]=lC;
>
>
if ( (tx!=null)&&(ty!=null) ) < // если целевая клетка выбранна
setCell(tx,ty, ‘o’); // поставим нолик в клетку.
>
>

function onCellClk(x,y) < // Действия при клике по клетке
if (gField[x][y]==null) < // если клетка пустая
var win = isWin(); // проверка на победу.
if ( !win ) setCell(x,y, ‘x’);
win = isWin(); // проверка на победу
if ( !win ) <
CompGame(); // запуск компьютерного игрока
win = isWin(); // проверка на победу
>
if (!win) <
gameinfo.innerText = gTexts[‘playing’] // отображение сообщения
> else <
var mes=gTexts[‘win1’] + win + gTexts[‘win2’];
alert(mes); // отображение сообщения о победе
gameinfo.innerText = mes;
>
>
>

Прочие файлы

Так же, для игры требуются графические файлы:

• c_null.gif — изображение пустой ячейки
• c_x.gif — изображение ячейки с x
• c_o.gif — изображение ячейки с o
• fon.jpg — фоновое изображение

Если использовать GIF анимацию, то она тоже работает, но в разных браузерах начало анимации отображается слегка по разному.

Вот и всё. Попробуйте попрактиковаться в создании html-страничек, и попробуйте запустить эту игру, собрав её самостоятельно. Если получилось, то я специально недоделал сообщение о нечьей. Попробуйте самостоятельно сделать проверку на нечью, и добавить её в игру.

Источник статьи: http://alexeyk.com/ru/text/js_tictactoegame.html

Крестики нолики на javascript

Приветствую вас дорогие друзья! В этом уроке я покажу, как можно сделать браузерную игру — крестики нолики, на javascript! Все вы знаете, что это за игра и как в нее играть, но еще раз напомню:

Крестики-нолики — это логическая игра между двумя игроками на квадратном поле 3 на 3 клетки (возможно и бо́льшего размера). Один играет «крестиками», а второй — «ноликами».

P.S. как и во всех подобных уроках по javascript, в конце статьи вы можете скачать исходный файл, а также посмотреть результат работы на demo примере!

Описание создаваемой игры

Давайте рассмотрим особенности игры:

• игра начинается сразу после загрузки страницы;
• право ходить первым выбирается случайным образом (либо вы начинаете ходить, либо компьютер);
• знак, который вы будете ставить, выбирается случайным образом (крестик или нолик);
• если выигрывает игрок, то победные символы (полоса крестиков или ноликов) выделяется зеленым цветом;
• если игрок проигрывает компьютеру, то полоса выделяется красным цветом;
• над полем имеется строка информации, где выводится результат (победа или поражение).

Логика

Я не стал придумывать сложных (универсальных) алгоритмов для игрового поля 3 на 3 клетки, я пошел другим путем — перебором! (об этом чуть позже). Я выделил три основных последовательных этапа, на которых и держится вся логика:

1 этап: проверяем — победил ли игрок?

На этом этапе мы проверяем, имеются ли 3 клетки (на одной линии), заполненные одинаковыми символами играющего (крестиками или нолями). Т.е. не смотря на то, какой этой ход (пусть даже первый) мы всегда сначала проверяем — выиграл ли играющий. Вот так выглядит победа:

2 этап: проверяем — может ли компьютер победить следующим ходом?

На этом этапе мы ищем линию, где были бы 2 клетки заполненные компьютером и одна пустая клетка — то есть пытаемся выиграть за счет невнимательности игрока. Вот так выглядит поражение (т.е. победа компьютера):

3 этап: не даем выиграть!

Здесь мы ищем такую же линию, как и на втором этапе, только 2 клетки должны быть заполнены игровыми знаками игрока, то есть на этом этапе не даем проиграть компьютеру, поставив знак в пустую клетку. Каждый из этапов представляем собой самостоятельную функцию — это вы можете увидеть в js коде ниже.

Реализация

Разметка игрового поля очень простая — в основном блоке размещена строка информации (класс — result) и 9 блоков, представляющих собой клетки (класс — block) HTML разметка клеток:

Вспомогательный класс cell[1..9] необходим для того, чтобы точно идентифицировать нужную клетку на игровом поле. CSS стили для игрового поля:

Теперь давайте рассмотрим весь JS код, после чего я расскажу об основных моментах:

Сначала мы объявляем переменные: znak_user — в этой переменной мы храним знак, которым будет играть пользователь (по умолчанию там хранится нолик — это английская будка «О»). znak_comp — в этой переменной мы храним знак, которым будет играть компьютер (по умолчанию там хранится крестик — это английская будка «икс»).

Далее мы генерируем случайное число (rand_num) от 1 до 9, оно необходимо нам для определения того, кто будет ходить первым, и какие будут использоваться знаки (крестик или нолик) у компьютера и игрока.

Логика такая: если случайное число больше 3, то компьютер играет ноликами, и он же (компьютер) делает первый ход.

Вы можете изменить эту логику так, как удобно вам, например, можно создать несколько случайных цифр, дабы сделать больше вариантов того, кто будет хоть первым и какими знаками. exit_flag — этот флаг (переменная) отвечает за выход из функции, то есть, например, когда компьютер уже сделал свой ход, и нужно выйти из функции и передать ход игроку. win_user_array — в этом массиве хранятся все победные варианты заполнения клеток. Чтобы стало понятно, давайте взглянем вот на эту картинку:

Каждый элемент массива — это строка из трех цифр, которая является выигрышной комбинацией, то есть, например, если заполнить клетки под цифрами 1, 2 и 3, то наступит победа (или поражение). Как видите, всего существует 8 победных вариантов, наша задача — перебрать все эти варианты. Далее идут 3 функции:

Назначение этих функций описано (в виде трех этапов) в разделе Логика (выше). Эти функции вызываются по клику на любую из клеток поля. В каждую из функций передается параметр (znak) — это знак игрока или компьютера (крестик или нолик), например, в функцию, определяющую победу игрока (check_3_user), мы передаем знак игрока, для того, чтобы найти 3 одинаковых знака на одной линии.

После трех функций (если компьютер еще не сделал ход), компьютер заполняем одну из свободных клеток. Здесь, вы можете усложнить игровой процесс, например, сделав так, что если свободна центральная клетка (клетка под номером 5), то сначала ставить в нее, если она занята, то ставить в один из свободных углов (это клетки № 1, 3, 7 и 9) и так далее — в общем, здесь уже на ваше усмотрение.

Вот, в принципе и все, что требуется для создания подобной игры.

Теперь можете посмотреть игру на демо примере и скачать исходный файл (всего 1 файл).

На этом у меня все, надеюсь, данный урок был полезен для вас, желаю вам удачи, пока!

Источник статьи: http://travelguidance.ru/javascript-s-primerami-krestiki-noliki-na-javascript

Познаем основы Java и создаем крестики-нолики

Немного о Java

Java — это не только язык, это целая экосистема, включающая в себя средства разработки, платформу для запуска готовых приложений, огромный свод документации и активное сообщество. Одним из преимуществ Java на начальном этапе была кросс-платформенность (принцип — «написано один раз — запускается везде»).

Дело в том, что программа на Java исполняется не на прямую процессором компьютера, а виртуальной машиной Java (JVM). Это позволяет абстрагироваться от многих нюансов конкретных платформ. Программу, написанную на Java, можно без изменений кода запускать на Windows, Linux, MacOS и других операционных системах (если, конечно, программа не использует специфичные для ОС функции).

Кто застал начало 2000х, наверное помнит огромное количество мобильных телефонов (тогда еще они не были смартфонами), на каждом телефоне была по сути своя маленькая ОС, но при этом почти на каждом можно было запустить Java игру или приложение.

На сегодняшний день Java по-прежнему входит в топ языков для изучения, а Java как платформа — в топ используемых технологий в мире IT и смежных областях.

Создание проекта, первые шаги

Сегодня мы начнем изучать Java, причем сразу с примера игры «Крестики-нолики».

Итак, поехали. Надеюсь как установить java SDK ты уже разобрался. Мы будем писать код в IDE IntelliJ IDEA, но если у вас какая-то другая, например Eclipse, то разницы большой не будет.

Итак, создаем новый проект: нажимаем «create new project», выбираем java и щелкаем «next» до окна, где требуется ввести имя проекта, вводим TicTacToe (крестики-нолики). В некоторых случаях на этапе создания потребуется выбрать шаблон проекта, тогда смело выбирай что-либо похожее на JavaConsoleApplication.

После этого нажимаем «Finish». Idea немного подумает и сгенерирует нам проект с классом Main, в котором определена функция main().

Давайте разберемся, что здесь что. Слева открыто окно структуры проекта «Project», как мы видим в папке src в пакете com.company находится единственный java-файл нашей программы с именем Main. Справа показано его содержимое. Тут надо сделать небольшое отступление, дело в том, что в Java почти все представлено классами. В том числе и файлы программы описывают классы, причем имя файла должно совпадать с классом, который описывается в этом файле (например, у нас файл Main.java описывает класс Main). Пусть слово «класс» не смущает на первом этапе. Пока лишь отмечу, что для глубокого изучения Java так или иначе придется познакомиться с объектно-ориентированным подходом. В двух словах, класс можно воспринимать как шаблон, идею, а экземпляры класса — как реализацию этой идеи. Экземпляры класса называются его объектами. Например, вы можете представить идею стола (нечто, на что можно класть предметы), однако конкретных экземпляров такого стола огромное множество (на одной ножке, на четырех, круглые, квадратные, из разных материалов). Примерно так соотносятся классы и объекты в объектно-ориентированном программировании.

Внутри нашего класса Main описана функция main(), в Java с этой функции начинается исполнение программы, это точка входа в наше приложение. Сейчас там написан только автоматический комментарий (комментарии в Java начинаются с двух символов //). Попробуем кое-что добавить в наш код и проверить работоспособность приложения. Внутри функции main() допишем две строки:

Встроенная функция println() просто выводит на экран текстовую информацию. Запустим наше приложение (нажимаем shift-F10 или зеленый треугольник). Внизу, во вкладке run появится вывод нашей программы:

Функция main() отработала и закончилась, вместе с ней закончилась наша программа.

В игре пользователю конечно захочется взаимодействовать с программой более продвинутым способом, поэтому нам понадобится окно. Набираем внутри функции main() следующие строки:

Смысл большинства строк понятен из комментариев к ним, отдельно отмечу строку window.setLayout() — здесь устанавливается менеджер расположения, который будет применяется к компонентам, добавляемым в наше окно. Менеджер BorderLayout может располагать новые компоненты относительно сторон света (North(верх), West(слева), East(справа), South(низ)), Center (центр)). По умолчанию он располагает компоненты по центру. Подробнее с менеджерами расположения можно познакомиться в документации.

Теперь, если запустить нашу программу, мы увидим окно:

Пока в этом окне ничего нет. Создадим свой компонент, который и будет отрисовывать графику игры.

Свой компонент для рисования

Очевидно, что рисовать в консоли у нас не получится, нужен какой-то компонент для более продвинутого взаимодействия с пользователем. Для этой цели создадим еще один класс, назовем его TicTacToe. Щелкаем правой клавишей мыши на имени пакета приложения (в данном случае это com.company)

И в появившемся меню выбираем пункт «New» → «Java Class». В окне создания класса набираем его имя «TicTacToe» и нажимаем «Enter».

У нас в проекте появился еще один класс. В главное окно можно добавлять только объекты класса JComponent, кроме того, нам нужна область для рисования. Поэтому наследуем наш класс TicTacToe от JComponent. Ой сколько непонятных слов! Сейчас постараюсь пояснить.

Наследование классов — это как создание уточненного шаблона на базе существующего. Например, есть класс Стол, описывающий идею стола вообще. Но нам очень часто приходится создавать столы на четырех ногах с деревянной столешницей, поэтому для удобства мы можем уточнить идею класса Стол и создать шаблон ДеревянныйСтол — он будет иметь все те же основные свойства, что и родительская идея, но зато часть свойств у него уже определены и понятны — это число ног, равное четырем и материал столешницы — дерево.

С JComponent то же самое — данный класс реализует идею некоторого графического компонента пользовательского интерфейса. Такой компонент можно добавить в окно и он умеет как-то себя отрисовывать. Например, класс JButton — наследник класса JComponent, это компонент, который выглядит, как кнопка и умеет показывать анимацию клика мышкой.

Здесь же, наследуя класс JComponent, мы создадим свой компонент, в котором сможем рисовать то, что нам нужно.

Итак дописываем extends JComponent в строку описания класса:

Источник статьи: http://vc.ru/dev/141885-poznaem-osnovy-java-i-sozdaem-krestiki-noliki