Вместо того, чтобы долго изучать программирование по статьям и лекциям, которые скучно описывают какие-то непонятные действия с числами и строками, лучше изучать программирование на красочных примерах, таких, как создание игр!
Естественно, вам потребуется хотя бы теоретическое знание о том, что такое: язык программирования, переменная, цикл, массив. Так же, для чтения этой статьи и изучения программы, желательно иметь представление о: JavaScript, HTML, и CSS (CSS не обязательно — требуется только для украшения).
Структура игры
Эта игра состоит из нескольких частей, которые написаны на HTML, CSS и JavaScript.
Общий принцип такой: на веб-страничке (HTML) делаются ссылки на файл с JavaScript-ом и CSS файл со стилями. Так же, в HTML размечаются те места, где будут элементы игры отображаться. А так же вставлена одна функция на JavaScript, которая запускается сразу после загрузки страницы, и задаёт параметры языка для игры, и даёт команду на создание нового игрового поля.
Как создать программу «КАЛЬКУЛЯТОР» в блокноте
В CSS файле содержатся стили элементов игры, такие, как обводка клеток, и тип курсора мыши, при наведении на клетку.
В JS файле содержится основной код, который и управляет игрой.
Раз мы изучаем на примере, то практически каждая строчка будет содержать комментарий – подробное описание того, чего делает данная команда.
Исходный код CSS файла
CSS (каскадные таблицы стилей) – описывает стиль для отображения игрового поля на HTML страницы. Исходный код CSS приведу без подробных объяснений, только с комментариями, которые начинаются символами /* и заканчиваются символами */.
#gameinfo < font-size: 110%; >/* размер шрифта в текстовом поле, с */
#game table < /* описывает стиль таблицы с крестиками и ноликами */
border:3px groove blue; /* окаёмка таблицы */
background-image:url(«fon.jpg»); /* фоновая картинка для игры */ >
#game table tr td < /* стиль для одной ячейки в таблице – где будет располагаться крестик, либо нолик, или просто будет пустовать */
border:1px dotted #eeb; /* опишем обводку клетки */
cursor:pointer; /* установим вид курсора мыши, чтобы показать, что можно кликать на клетку */ >
#game table tr td:hover < border:1px solid #ffa; >/* подсвечивание клетки, при наведении на неё курсора мыши */
Код на HTML странице
HTML. Следующий код необходимо вставить на веб-страницу. Каждый фрагмент кода подписан.
внутрь тега HEAD:
Так же, нужно прописать параметр 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 идут после двойного слеша //).
// (C) www.AlexeyK.com, 2012.
var gameImgDir=»data/»;
var gTexts=[]; // Для многоязычности.
gTexts[‘win1’]=’Win ‘; gTexts[‘win2′]=’!’;
gTexts[‘playing’]=’. ‘
gTexts[‘start’]=’Begin game!’
var gField=[]; // игровое поле
var hT=»
| «; hT+=» 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; // если картинки выключены, то игра будет в текстовом режиме 🙂
>
for ( i=0 ; i lC=gField[stX+i][stY];
if (lC!=null) for ( j=0 ; j if (lC!=null) return lC;
>
for ( j=0 ; j lC=gField[stX][stY+j];
if (lC!=null) for ( i=0 ; i if (lC!=null) return lC;
>
>
// TO DO — если все клетки заняты, но никто не победил, то ничья, но пока это условие не сделано. Попробуйте сами доделать эту проверку 😉
return false; // если никто не победил
>
Прочие файлы
- c_null.gif — изображение пустой ячейки
- c_x.gif — изображение ячейки с x
- c_o.gif — изображение ячейки с o
- fon.jpg — фоновое изображение
Вот и всё. Попробуйте попрактиковаться в создании html-страничек, и попробуйте запустить эту игру, собрав её самостоятельно. Если получилось, то я специально недоделал сообщение о нечьей. Попробуйте самостоятельно сделать проверку на нечью, и добавить её в игру.
Источник: alexeyk.com
Крестики и нолики на JavaScript
В этом уроке мы создадим простую браузерную игру крестики и нолики на javascript.
Создадим html основу нашего интерфейса:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41
Крестики/нолики 1
Начать заново
это ячейки игрового поля у которых есть атрибуты id с соответствующим порядковым номером ячейки (здесь атрибут id используется не совсем корректно — нарушено правило именования, но так как это учебный пример и это существенно упрощает код, то этим упущением можно пренебречь)
выводят сообщение о статусе раунда (победа игрока или компьютера)
Для придания нашему интерфейсу «правильного» вида, добавим таблицу стилей (style.css)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86
html, body < margin:0px; padding:0px; >.section < text-align: center; margin:0 auto; >.wrapper < width:450px; height:450px; margin:0 auto; position: relative; >.wrapper .cell < background-color: aliceblue; border: 1px solid #cfcfcf; cursor: pointer; float: left; font-size: 100px; height: 148px; text-align: center; width: 148px; >.wrapper .cell.victory < background-color: #e96e6e; >.statistics < font-weight: bold; text-align: center; >.score < text-align: center; margin-bottom:20px; >.restart < text-align: center; padding-top: 20px; >.restart a < display:inline-block; padding:10px 20px; background-color: brown; color:#fff; >.rez_war < background-color: brown; padding: 50px 0; position: absolute; text-align: center; top: 130px; width: 100%; display: none; >.rez_war p < color: #fff; font-size: 66px; font-weight: bold; text-transform: uppercase; >.rez_war_no < background-color: darkolivegreen; padding: 50px 0; position: absolute; text-align: center; top: 130px; width: 100%; display: none; >.rez_text_no < color: #fff; font-size: 66px; font-weight: bold; text-transform: uppercase; >.victory
Интерфейс готов и нам остаётся только добавить алгоритм самой игры (файл script.js)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185
jQuery(document).ready(function() < var mass = new Array(); // массив всех занятых клеток var mass_x = new Array(); // массив клеток с «х» var mass_o = new Array(); // массив клеток с «0» var v = 0; // флаг, есть ли победитель (если да, то «1») jQuery(«.cell»).on(«click», function()< var cell_text = jQuery(this).text(); if(cell_text != «») alert(«занято»); else < jQuery(this).text(«x»); var id_cell = jQuery(this).attr(‘id’); id_cell = parseInt(id_cell); mass.push(id_cell); mass_x.push(id_cell); mass_x.sort(mass_x); var v = victory(mass_x, «Игрок»); //alert(mass.length); if(mass_x.length != 0 mass.length < 8) computer(); if(mass.length == 9 v != 1) noneVictory(); >>); // Проверка на победу function victory(metka, user) < var srt1 = 0; // переменная проверки первой строки var srt2 = 0; // переменная проверки второй строки var srt3 = 0; // переменная проверки третьей строки var st1 = 0; // переменная проверки первого столбца var st2 = 0; // переменная проверки второго столбца var st3 = 0; // переменная проверки третьего столбца var d1 = 0; // переменная проверки первой диагонали var d2 = 0; // переменная проверки второй диагонали for (var i = 0; i < metka.length; i++)< switch(metka[i]) < case 1: < srt1++; st1++; d1++; break; >case 2: < srt1++; st2++; break; >case 3: < srt1++; st3++; d2++; break; >case 4: < srt2++; st1++; break; >case 5: < srt2++; st2++; d1++; d2++; break; >case 6: < srt2++; st3++; break; >case 7: < srt3++; st1++; d2++; break; >case 8: < srt3++; st2++; break; >case 9: < srt3++; st3++; d1++;break; >> if(srt1 == 3 || srt2 == 3 || srt3 == 3) < jQuery(«.victory»).text(«Победил » + user); jQuery(«.victory»).css(«display», «block»); victoryBegin(user); >if(st1 == 3 || st2 == 3 || st3 == 3) < jQuery(«.victory»).text(«Победил » + user); jQuery(«.victory»).css(«display», «block»); victoryBegin(user); >if(d1 == 3 || d2 == 3) < jQuery(«.victory»).text(«Победил » + user); jQuery(«.victory»).css(«display», «block»); victoryBegin(user); >> if(srt1 == 3 || srt2 == 3 || srt3 == 3 || st1 == 3 || st2 == 3 || st3 == 3 || d1 == 3 || d2 == 3) return 1; > // действия в случае победы function victoryBegin(user) < setTimeout(function()< jQuery(«.victory»).css(«display», «none»); jQuery(«.cell»).text(«»); var raund = jQuery(«.statistics span»).text(); raund++; jQuery(«.statistics span»).text(raund); if(user == «Компьютер») < var num = jQuery(«.num_c»).text(); num++; jQuery(«.num_c»).text(num); >else < var num = jQuery(«.num_u»).text(); num++; jQuery(«.num_u»).text(num); >mass.length = 0; mass_x.length = 0; mass_o.length = 0; >, 1000); > // Ход Компьютера function computer() < var number; $flag = false; mass.sort(mass); while(true) < if(mass.length == 9) < noneVictory(); >number = getRandomInRange(1, 9); for (var i = 0; i < mass.length; i++) < if(number == mass[i]) $flag = true; >if($flag == false) break; else < $flag = false; continue; >> jQuery(«.cell»).eq(number-1).text(«o»); mass.push(number); mass_o.push(number); victory(mass_o, «Компьютер»); > // ничья function noneVictory()< setTimeout(function()< jQuery(«.victory»).text(«Ничья»); jQuery(«.victory»).css(«display», «block»); >, 500); setTimeout(function()< jQuery(«.victory»).css(«display», «none»); jQuery(«.cell»).text(«»); var raund = jQuery(«.statistics span»).text(); raund++; jQuery(«.statistics span»).text(raund); mass.length = 0; mass_x.length = 0; mass_o.length = 0; >, 1000); > // Функция генерации случайного числа (возвращает число от 1-9) function getRandomInRange(min, max) < return Math.floor(Math.random() * (max — min + 1)) + min; >>)
Наша игра готова
Дополнительные материалы:
Зарегистрируйтесь для получения материалов к урокам!
Источник: liblessons.ru
Крошечные крестики-нолики на JavaScript (30 строк кода)
От меня в копилку миниатюрные крестики-нолики:
- игрокое поле на div’ах, файл стиля и 2 картинки
- engine.js занимает 30 строк
Мой код:
var t = new Array(9); function ai() < var * 9); t[id] ? ai() : move(id, ‘ai’); >function checkEnd() < if (t[0]==’ai’ t[1]==’ai’ t[2]==’ai’ || t[0]==’player’ t[1]==’player’ t[2]==’player’) return true; if (t[3]==’ai’ t[4]==’ai’ t[5]==’ai’ || t[3]==’player’ t[4]==’player’ t[5]==’player’) return true; if (t[6]==’ai’ t[7]==’ai’ t[8]==’ai’ || t[6]==’player’ t[7]==’player’ t[8]==’player’) return true; if (t[0]==’ai’ t[3]==’ai’ t[6]==’ai’ || t[0]==’player’ t[3]==’player’ t[6]==’player’) return true; if (t[1]==’ai’ t[4]==’ai’ t[7]==’ai’ || t[1]==’player’ t[4]==’player’ t[7]==’player’) return true; if (t[2]==’ai’ t[5]==’ai’ t[8]==’ai’ || t[2]==’player’ t[5]==’player’ t[8]==’player’) return true; if (t[0]==’ai’ t[4]==’ai’ t[8]==’ai’ || t[0]==’player’ t[4]==’player’ t[8]==’player’) return true; if (t[2]==’ai’ t[4]==’ai’ t[6]==’ai’ || t[2]==’player’ t[4]==’player’ t[6]==’player’) return true; if(t[0] t[1] t[2] t[3] t[4] t[5] t[6] t[7] t[8]) return true; >function move(id, role) < if(t[id]) return false; t[id] = role; document.getElementById(id).className = ‘cell ‘ + role; !checkEnd() ? (role == ‘player’) ? ai() : null : reset() >function reset()
Изначально хотелось сделать проверку на окончание игры с помощью рекурсии и пары условий.
Но, если играть честно (не набивать в одну строку десяток), то такой алгоритм не влезет в отведенные для него 9 строк. К тому же, я хотел сохранить переносы строк между функциями для сохранения читабельности кода.
В итоге сделал проверку через простой перебор всех вариантов (8 условий для победы/поражения, 1 для ничьи). Условие проверки получилось длинное, да и запихнул каждый блок if’а в 1 строку.
Ну и сжульничал немного, в html добавил 9 onclick’ов — по одному к каждой клетке.
- javascript
- крестики-нолики
- 30 строк
- JavaScript
- Ненормальное программирование
Источник: habr.com