Вы когда-нибудь играли в слова в любой из тех дешевых книг, которые вы покупаете на вокзале или в автобусе? Идея супа букв, состоит в том, чтобы найти список слов в таблице (так называемый суп). На этот раз вы научитесь легко создавать буквенную игру с использованием Javascript и wordfind.js (со всеми возможными вариантами использования в качестве решения, множественной ориентацией, перекрытием слов и другими).
Требования
Чтобы создать наш суп из букв, мы собираемся работать с wordfind.js, wordfind — это простая библиотека javascript для генерации головоломок поиска слов (также называемых поиском слов). Вы можете получить копию скрипт в официальном репозитории Github здесь, однако хранилище не предоставляет его сокращенную версию, поэтому вы можете использовать следующую уменьшенную версию в своем проекте:
// wordfind.js
/**
* Wordfind.js
* (c) 2012 Bill, BunKat LLC.
* Wordfind is freely distributable under the MIT license.
* @documentation http://github.com/bunkat/wordfind
*/
(function(){"use strict";var n=function(){var n="abcdefghijklmnoprstuvwy",r=["horizontal","horizontalBack","vertical","verticalUp","diagonal","diagonalUp","diagonalBack","diagonalUpBack"],t={horizontal:function(n,r,t){return{x:n+t,y:r}},horizontalBack:function(n,r,t){return{x:n-t,y:r}},vertical:function(n,r,t){return{x:n,y:r+t}},verticalUp:function(n,r,t){return{x:n,y:r-t}},diagonal:function(n,r,t){return{x:n+t,y:r+t}},diagonalBack:function(n,r,t){return{x:n-t,y:r+t}},diagonalUp:function(n,r,t){return{x:n+t,y:r-t}},diagonalUpBack:function(n,r,t){return{x:n-t,y:r-t}}},o={horizontal:function(n,r,t,o,e){return o>=n+e},horizontalBack:function(n,r,t,o,e){return n+1>=e},vertical:function(n,r,t,o,e){return t>=r+e},verticalUp:function(n,r,t,o,e){return r+1>=e},diagonal:function(n,r,t,o,e){return o>=n+e&&t>=r+e},diagonalBack:function(n,r,t,o,e){return n+1>=e&&t>=r+e},diagonalUp:function(n,r,t,o,e){return o>=n+e&&r+1>=e},diagonalUpBack:function(n,r,t,o,e){return n+1>=e&&r+1>=e}},e={horizontal:function(n,r,t){return{x:0,y:r+1}},horizontalBack:function(n,r,t){return{x:t-1,y:r}},vertical:function(n,r,t){return{x:0,y:r+100}},verticalUp:function(n,r,t){return{x:0,y:t-1}},diagonal:function(n,r,t){return{x:0,y:r+1}},diagonalBack:function(n,r,t){return{x:t-1,y:n>=t-1?r+1:r}},diagonalUp:function(n,r,t){return{x:0,y:t-1>r?t-1:r+1}},diagonalUpBack:function(n,r,t){return{x:t-1,y:n>=t-1?r+1:r}}},i=function(n,r){var t,o,e,i=[];for(t=0;tv;v++)for(var d=r.orientations[v],s=o[d],x=t[d],y=e[d],k=0,B=0;l>B;)if(s(k,B,l,c,h)){var w=u(i,n,k,B,x);(w>=g||!r.preferOverlap&&w>-1)&&(g=w,a.push({x:k,y:B,orientation:d,overlap:w})),k++,k>=c&&(k=0,B++)}else{var U=y(k,B,h);k=U.x,B=U.y}return r.preferOverlap?f(a,g):a},u=function(n,r,t,o,e){for(var i=0,a=0,l=n.length;l>a;a++){var u=e(t,o,a),f=r[u.y][u.x];if(f===n[a])i++;else if(""!==f)return-1}return i},f=function(n,r){for(var t=[],o=0,e=n.length;e>o;o++)n[o].overlap>=r&&t.push(n[o]);return t},c=function(n,r,t,o,e){for(var i=0,a=r.length;a>i;i++){var l=e(t,o,i);n[l.y][l.x]=r[i]}};return{validOrientations:r,orientations:t,newPuzzle:function(n,t){var o,e,a=0,l=t||{};o=n.slice(0).sort(function(n,r){return n.lengthi;i++)if(!r[t][i]){var l=Math.floor(Math.random()*n.length);r[t][i]=n[l]}},solve:function(n,t){for(var o={height:n.length,width:n[0].length,orientations:r,preferOverlap:!0},e=[],i=[],a=0,u=t.length;u>a;a++){var f=t[a],c=l(n,o,f);c.length>0&&c[0].overlap===f.length?(c[0].word=f,e.push(c[0])):i.push(f)}return{found:e,notFound:i}},print:function(n){for(var r="",t=0,o=n.length;o>t;t++){for(var e=n[t],i=0,a=e.length;a>i;i++)r+=(""===e[i]?" ":e[i])+" ";r+="\n"}return console.log(r),r}}},r="undefined"!=typeof exports&&null!==exports?exports:window;r.wordfind=n()}).call(this); Добавьте ссылку на ваш HTML-документ, используя тег script, и вы готовы к работе:
Реализация с GUI
Если вам нужна полная реализация (и уже созданный пользовательский интерфейс, и обработчики событий в качестве выбора пользователя и т. Д.), Вам нужно иметь jQuery в качестве зависимости в вашем проекте. Вы можете добавить ссылку на jQuery в свой проект из CDN:
Кроме того, вам нужно добавить еще один скрипт, который будет отвечать за создание графического интерфейса для пользователя (wordfindgame.js):
/**
* wordfindgame.js
* Script to create the GUI
* Wordfindgame.js
* (c) 2012 Bill, BunKat LLC.
* Wordfind is freely distributable under the MIT license.
* For all details and documentation: http://github.com/bunkat/wordfind
*/
!function(e,t,n){"use strict";var r=function(){var r,o,a,l=function(e,n){for(var r="",o=0,a=n.length;a>o;o++){var l=n[o];r+="
";for(var u=0,s=l.length;s>u;u++)r+='',r+=l[u]||" ",r+="";r+="
"}t(e).html(r)},u=function(e,n){for(var r="",o=0,a=n.length;a>o;o++){var l=n[o];r+='- '+l}r+="
",t(e).html(r)},s=[],i="",d=function(){t(this).addClass("selected"),o=this,s.push(this),i=t(this).text()},c=function(e){if(o){var n=s[s.length-1];if(n!=e){for(var r,l=0,u=s.length;u>l;l++)if(s[l]==e){r=l+1;break}for(;rn;n++)if(0===r[n].indexOf(i+t(e).text())){t(e).addClass("selected"),s.push(e),i+=t(e).text();break}},z=function(){for(var e=0,n=r.length;n>e;e++)r[e]===i&&(t(".selected").addClass("found"),r.splice(e,1),t("."+i).addClass("wordFound")),0===r.length&&t(".puzzleSquare").addClass("complete");t(".selected").removeClass("selected"),o=null,s=[],i="",a=null},p=function(e,t,r,o){for(var a in n.orientations){var l=n.orientations[a],u=l(e,t,1);if(u.x===r&&u.y===o)return a}return null};return{create:function(e,o,a,s){r=e.slice(0).sort();var i=n.newPuzzle(e,s);return l(o,i),u(a,r),window.navigator.msPointerEnabled?(t(".puzzleSquare").on("MSPointerDown",d),t(".puzzleSquare").on("MSPointerOver",c),t(".puzzleSquare").on("MSPointerUp",z)):(t(".puzzleSquare").mousedown(d),t(".puzzleSquare").mouseenter(v),t(".puzzleSquare").mouseup(z),t(".puzzleSquare").on("touchstart",d),t(".puzzleSquare").on("touchmove",f),t(".puzzleSquare").on("touchend",z)),i},solve:function(e,r){for(var o=n.solve(e,r).found,a=0,l=o.length;l>a;a++){var u=o[a].word,s=o[a].orientation,i=o[a].x,d=o[a].y,c=n.orientations[s];if(!t("."+u).hasClass("wordFound")){for(var f=0,v=u.length;v>f;f++){var h=c(i,d,f);t('[x="'+h.x+'"][y="'+h.y+'"]').addClass("solved")}t("."+u).addClass("wordFound")}}}}};window.wordfindgame=r()}(document,jQuery,wordfind);И добавьте ссылку в ваш документ:
В следующем примере показана полная реализация (но без пользовательских параметров при инициализации) с использованием обоих сценариев (wordfind.js а также wordfindgame.js)
Wordfind game Javascript
// An array with the words to show
var words = ['cows', 'tracks', 'arrived', 'located', 'sir', 'seat',
'division', 'effect', 'underline', 'view', 'annual',
'anniversary', 'centennial', 'millennium', 'perennial',
'artisan', 'apprentice', 'meteorologist', 'blizzard', 'tornado',
'intensify','speed','count','consonant','someone',
'sail','rolled','bear','wonder','smiled','angle', 'absent',
'decadent', 'excellent', 'frequent', 'impatient', 'cell',
'cytoplasm', 'organelle', 'diffusion', 'osmosis',
'respiration'
];
// Start a basic word game without customization !
var gamePuzzle = wordfindgame.create(words, '#puzzle-container', '#puzzle-words');
$("#solveBTN").click(function(){
// Solve the puzzle !
var result = wordfindgame.solve(gamePuzzle, words);
console.log(result);
});
И результатом должен быть буквенный суп, похожий на:
Замечания: это зависит от вас, чтобы применить стили к контейнеру div головоломки. Если вы не чувствуете вдохновения сегодня, вы можете использовать предоставленные стили в репозитории (с недостаточно префиксом, чтобы предотвратить несовместимость с существующими библиотеками и стилями) или использовать следующие правила, которые будут применяться только к контейнеру головоломки.
В этом случае правила стиля основаны на упомянутых селекторах в нашем коде (#puzzle-container а также #puzzle-words):
#puzzle-container {
border: 1px solid black;
padding: 20px;
float: left;
margin: 30px 20px;
}
#puzzle-container div {
width: 100%;
margin: 0 auto;
}
/* style for each square in the puzzle */
#puzzle-container .puzzleSquare {
height: 30px;
width: 30px;
text-transform: uppercase;
background-color: white;
border: 0;
font: 1em sans-serif;
}
#puzzle-container button::-moz-focus-inner {
border: 0;
}
/* indicates when a square has been selected */
#puzzle-container .selected {
background-color: orange;
}
/* indicates that the square is part of a word that has been found */
#puzzle-container .found {
background-color: blue;
color: white;
}
#puzzle-container .solved {
background-color: purple;
color: white;
}
/* indicates that all words have been found */
#puzzle-container .complete {
background-color: green;
}
/**
* Styles for the word list
*/
#puzzle-words {
padding-top: 20px;
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
column-count: 2;
column-gap: 20px;
width: 300px;
}
#puzzle-words ul {
list-style-type: none;
}
#puzzle-words li {
padding: 3px 0;
font: 1em sans-serif;
}
/* indicates that the word has been found */
#puzzle-words .wordFound {
text-decoration: line-through;
color: gray;
}
/**
* Styles for the button
*/
#solve {
margin: 0 30px;
}И ты готов к работе!
Реализация без GUI
Если вы ищете только логику, которая генерирует игру wordfind, то сегодня ваш счастливый день! Wordfind предоставляет простой API для получения структуры игры в массиве.
var words = ['cow'];
var puzzle = wordfind.newPuzzle(words, {
// Set dimensions of the puzzle
height: 3,
width: 3,
// or enable all with => orientations: wordfind.validOrientations,
orientations: ['horizontal', 'vertical'],
// Set a random character the empty spaces
fillBlanks: true,
preferOverlap: false
});
console.log(puzzle);
// Output array:
//[[A, X, C],
// [P, E, O],
// [J, I, W]]Переменная головоломки будет массивом, каждый элемент в ней эквивалентен строке таблицы:
| Икс | С | |
| п | Е | О |
| J | я | W |
Эта функция пригодится, если вы хотите самостоятельно реализовать пользовательский интерфейс и вам нужна только логика генерации супа букв. Есть много полезные опции доступны в библиотеке, и вы должны прочитать.
Если вы хотите, вы можете увидеть Официальная рабочая реализация здесь. Повеселись !
