diff options
| -rw-r--r-- | css/style.css | 1 | ||||
| -rw-r--r-- | css/style.min.css | 2 | ||||
| -rw-r--r-- | css/wordsearch.css | 37 | ||||
| -rw-r--r-- | css/wordsearch.min.css | 2 | ||||
| -rw-r--r-- | js/wordsearch.js | 31 | ||||
| -rw-r--r-- | js/wordsearch.min.js | 2 |
6 files changed, 72 insertions, 3 deletions
diff --git a/css/style.css b/css/style.css index f68994c..6c4a5ef 100644 --- a/css/style.css +++ b/css/style.css @@ -32,6 +32,7 @@ body { margin: 0 auto; padding: 40px 0; text-align: center; + position:relative; } .logo, #gameArea { diff --git a/css/style.min.css b/css/style.min.css index 36d31ef..98940d1 100644 --- a/css/style.min.css +++ b/css/style.min.css @@ -1 +1 @@ -body,h1{margin:0;padding:0}h1{text-transform:uppercase}body{color:#333}.wrap{width:960px;margin:0 auto;padding:40px 0;text-align:center}.logo,#gameArea{margin-bottom:40px}.ws-area,.ws-words{display:inline-block;vertical-align:top}.ws-words{margin-left:20px;text-align:left}.ws-word{margin-bottom:4px}
\ No newline at end of file +body,h1{margin:0;padding:0}h1{text-transform:uppercase}body{color:#333}.fix{zoom:1}.fix:after{display:table;clear:both;content:''}.wrap{width:960px;text-align:center;position:relative;margin:0 auto;padding:40px 0}.logo,#gamearea{margin-bottom:40px}.ws-area,.ws-words{display:inline-block;vertical-align:top}.ws-words{margin-left:20px;text-align:left}.ws-word{margin-bottom:4px}
\ No newline at end of file diff --git a/css/wordsearch.css b/css/wordsearch.css index 02853f0..149c36e 100644 --- a/css/wordsearch.css +++ b/css/wordsearch.css @@ -25,4 +25,41 @@ .ws-found { background: yellow; +} + +.ws-game-over-outer { + background: rgba(0, 0, 0, 0.85); + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; +} + +.ws-game-over-inner { + width:100%; + height:100%; + padding:0; + margin:0; + display:table; +} + +.ws-game-over { + display:table-cell; + vertical-align:middle; +} + +.ws-game-over h2 { + color:#FFFFFF; + font-size:2em; + text-transform:uppercase; + padding:0; + margin:0 0 9px 0; +} + +.ws-game-over p { + color:#FFFFFF; + font-size:1em; + padding:0; + margin:0; }
\ No newline at end of file diff --git a/css/wordsearch.min.css b/css/wordsearch.min.css index ac2f261..0e49dc3 100644 --- a/css/wordsearch.min.css +++ b/css/wordsearch.min.css @@ -1 +1 @@ -.ws-area{background:#fafafa;display:inline-block;padding:20px;border-radius:10px;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none}.ws-row{line-height:0}.ws-col{cursor:pointer}.ws-col.ws-selected{background:#eee}.ws-found{background:yellow}
\ No newline at end of file +.ws-area{background:#fafafa;display:inline-block;border-radius:10px;-moz-user-select:0;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;padding:20px}.ws-row{line-height:0}.ws-col{cursor:pointer}.ws-col.ws-selected{background:#eee}.ws-found{background:#FF0}.ws-game-over-outer{background:rgba(0,0,0,0.85);height:100%;left:0;position:absolute;top:0;width:100%}.ws-game-over-inner{width:100%;height:100%;display:table;margin:0;padding:0}.ws-game-over{display:table-cell;vertical-align:middle}.ws-game-over h2{color:#FFF;font-size:2em;text-transform:uppercase;margin:0 0 9px;padding:0}.ws-game-over p{color:#FFF;font-size:1em;margin:0;padding:0}
\ No newline at end of file diff --git a/js/wordsearch.js b/js/wordsearch.js index 17b54d8..964f61d 100644 --- a/js/wordsearch.js +++ b/js/wordsearch.js @@ -19,6 +19,9 @@ // Add `.ws-area` to wrap element this.wrapEl.classList.add('ws-area'); + //Words solved. + this.solved = 0; + // Default settings var default_settings = { 'directions': ['W', 'N', 'WN', 'EN'], @@ -339,10 +342,38 @@ wordListItems[i].innerHTML = "<del>"+wordListItems[i].innerHTML+"</del>"; } } + + //Increment solved words. + this.solved++; + + //Game over? + if(this.solved == this.settings.words.length){ + this.gameOver(); + } } } /** + * Game Over + */ + WordSearch.prototype.gameOver = function() { + //Create overlay. + var overlay = document.createElement("div"); + overlay.setAttribute("id", "ws-game-over-outer"); + overlay.setAttribute("class", "ws-game-over-outer"); + this.wrapEl.parentNode.appendChild(overlay); + + //Create overlay content. + var overlay = document.getElementById("ws-game-over-outer"); + overlay.innerHTML = "<div class='ws-game-over-inner' id='ws-game-over-inner'>"+ + "<div class='ws-game-over' id='ws-game-over'>"+ + "<h2>Congratulations!</h2>"+ + "<p>You've found all of the words!</p>"+ + "</div>"+ + "</div>"; + } + + /** * Mouse event - Mouse down * @param {Object} item */ diff --git a/js/wordsearch.min.js b/js/wordsearch.min.js index 8bc3957..2511d88 100644 --- a/js/wordsearch.min.js +++ b/js/wordsearch.min.js @@ -1 +1 @@ -!function(){"use strict";function t(t,e){this.wrapEl=t,this.wrapEl.classList.add("ws-area");var r={directions:["W","N","WN","EN"],gridSize:10,words:["one","two","three","four","five"],debug:!1};if(this.settings=Object.merge(e,r),this.parseWords(this.settings.gridSize)){for(var i=!1;0==i;)this.initialize(),i=this.addWords();this.settings.debug||this.fillUpFools(),this.drawmatrix()}}Element.prototype.wordSearch=function(e){return new t(this,e)},t.prototype.parseWords=function(t){for(var e=!0,r=0;r<this.settings.words.length;r++){this.settings.words[r]=this.settings.words[r].toUpperCase();var i=this.settings.words[r];i.length>t&&(alert("The length of word `"+i+"` is overflow the gridSize."),console.error("The length of word `"+i+"` is overflow the gridSize."),e=!1)}return e},t.prototype.addWords=function(){for(var t=!0,e=0,r=!0;t;){var i=this.settings.directions[Math.rangeInt(this.settings.directions.length-1)],s=this.addWord(this.settings.words[e],i),r=!0;0==s&&(t=!1,r=!1),e++,e>=this.settings.words.length&&(t=!1)}return r},t.prototype.addWord=function(t,e){var r,i,s=!0,o={W:[0,1],N:[1,0],WN:[1,1],EN:[1,-1]};switch(e){case"W":var r=Math.rangeInt(this.settings.gridSize-1),i=Math.rangeInt(this.settings.gridSize-t.length);break;case"N":var r=Math.rangeInt(this.settings.gridSize-t.length),i=Math.rangeInt(this.settings.gridSize-1);break;case"WN":var r=Math.rangeInt(this.settings.gridSize-t.length),i=Math.rangeInt(this.settings.gridSize-t.length);break;case"EN":var r=Math.rangeInt(this.settings.gridSize-t.length),i=Math.rangeInt(t.length-1,this.settings.gridSize-1);break;default:var n="UNKNOWN DIRECTION "+e+"!";alert(n),console.log(n)}for(var a=0;a<t.length;a++){var h=r+a*o[e][0],l=i+a*o[e][1],d=this.matrix[h][l].letter;"."==d||d==t[a]?this.matrix[h][l].letter=t[a]:s=!1}return s},t.prototype.initialize=function(){this.matrix=[],this.selectFrom=null,this.selected=[],this.initmatrix(this.settings.gridSize)},t.prototype.initmatrix=function(t){for(var e=0;t>e;e++)for(var r=0;t>r;r++){var i={letter:".",row:e,col:r};this.matrix[e]||(this.matrix[e]=[]),this.matrix[e][r]=i}},t.prototype.drawmatrix=function(){for(var t=0;t<this.settings.gridSize;t++){var e=document.createElement("div");e.setAttribute("class","ws-row"),this.wrapEl.appendChild(e);for(var r=0;r<this.settings.gridSize;r++){var i=document.createElement("canvas");i.setAttribute("class","ws-col"),i.setAttribute("width",40),i.setAttribute("height",40);var s=i.width/2,o=i.height/2,n=i.getContext("2d");n.font="400 28px Calibri",n.textAlign="center",n.textBaseline="middle",n.fillStyle="#333",n.fillText(this.matrix[t][r].letter,s,o),i.addEventListener("mousedown",this.onMousedown(this.matrix[t][r])),i.addEventListener("mouseover",this.onMouseover(this.matrix[t][r])),i.addEventListener("mouseup",this.onMouseup()),e.appendChild(i)}}},t.prototype.fillUpFools=function(){for(var t=0;t<this.settings.gridSize;t++)for(var e=0;e<this.settings.gridSize;e++)"."==this.matrix[t][e].letter&&(this.matrix[t][e].letter=String.fromCharCode(Math.rangeInt(65,90)))},t.prototype.getItems=function(t,e,r,i){var s=[];if(t===r||e===i||Math.abs(r-t)==Math.abs(i-e)){var o=t===r?0:r>t?1:-1,n=e===i?0:i>e?1:-1,a=t,h=e;s.push(this.getItem(a,h));do a+=o,h+=n,s.push(this.getItem(a,h));while(a!==r||h!==i)}return s},t.prototype.getItem=function(t,e){return this.matrix[t]?this.matrix[t][e]:void 0},t.prototype.clearHighlight=function(){for(var t=document.querySelectorAll(".ws-selected"),e=0;e<t.length;e++)t[e].classList.remove("ws-selected")},t.prototype.lookup=function(t){for(var e=[""],r=0;r<t.length;r++)e[0]+=t[r].letter;if(e.push(e[0].split("").reverse().join("")),this.settings.words.indexOf(e[0])>-1||this.settings.words.indexOf(e[1])>-1){for(var r=0;r<t.length;r++){var i=t[r].row+1,s=t[r].col+1,o=document.querySelector(".ws-area .ws-row:nth-child("+i+") .ws-col:nth-child("+s+")");o.classList.add("ws-found")}for(var n=document.querySelector(".ws-words"),a=n.getElementsByTagName("li"),r=0;r<a.length;r++)e[0].toLowerCase()==a[r].innerHTML.toLowerCase()&&(a[r].innerHTML="<del>"+a[r].innerHTML+"</del>")}},t.prototype.onMousedown=function(t){var e=this;return function(){e.selectFrom=t}},t.prototype.onMouseover=function(t){var e=this;return function(){if(e.selectFrom){e.selected=e.getItems(e.selectFrom.row,e.selectFrom.col,t.row,t.col),e.clearHighlight();for(var r=0;r<e.selected.length;r++){var i=e.selected[r],s=i.row+1,o=i.col+1,n=document.querySelector(".ws-area .ws-row:nth-child("+s+") .ws-col:nth-child("+o+")");n.className+=" ws-selected"}}}},t.prototype.onMouseup=function(){var t=this;return function(){t.selectFrom=null,t.clearHighlight(),t.lookup(t.selected),t.selected=[]}}}();
\ No newline at end of file +!function(){"use strict";function t(t,e){this.wrapEl=t,this.wrapEl.classList.add("ws-area"),this.solved=0;var r={directions:["W","N","WN","EN"],gridSize:10,words:["one","two","three","four","five"],debug:!1};if(this.settings=Object.merge(e,r),this.parseWords(this.settings.gridSize)){for(var i=!1;0==i;)this.initialize(),i=this.addWords();this.settings.debug||this.fillUpFools(),this.drawmatrix()}}Element.prototype.wordSearch=function(e){return new t(this,e)},t.prototype.parseWords=function(t){for(var e=!0,r=0;r<this.settings.words.length;r++){this.settings.words[r]=this.settings.words[r].toUpperCase();var i=this.settings.words[r];i.length>t&&(alert("The length of word `"+i+"` is overflow the gridSize."),console.error("The length of word `"+i+"` is overflow the gridSize."),e=!1)}return e},t.prototype.addWords=function(){for(var t=!0,e=0,r=!0;t;){var i=this.settings.directions[Math.rangeInt(this.settings.directions.length-1)],s=this.addWord(this.settings.words[e],i),r=!0;0==s&&(t=!1,r=!1),e++,e>=this.settings.words.length&&(t=!1)}return r},t.prototype.addWord=function(t,e){var r,i,s=!0,o={W:[0,1],N:[1,0],WN:[1,1],EN:[1,-1]};switch(e){case"W":var r=Math.rangeInt(this.settings.gridSize-1),i=Math.rangeInt(this.settings.gridSize-t.length);break;case"N":var r=Math.rangeInt(this.settings.gridSize-t.length),i=Math.rangeInt(this.settings.gridSize-1);break;case"WN":var r=Math.rangeInt(this.settings.gridSize-t.length),i=Math.rangeInt(this.settings.gridSize-t.length);break;case"EN":var r=Math.rangeInt(this.settings.gridSize-t.length),i=Math.rangeInt(t.length-1,this.settings.gridSize-1);break;default:var n="UNKNOWN DIRECTION "+e+"!";alert(n),console.log(n)}for(var a=0;a<t.length;a++){var h=r+a*o[e][0],l=i+a*o[e][1],d=this.matrix[h][l].letter;"."==d||d==t[a]?this.matrix[h][l].letter=t[a]:s=!1}return s},t.prototype.initialize=function(){this.matrix=[],this.selectFrom=null,this.selected=[],this.initmatrix(this.settings.gridSize)},t.prototype.initmatrix=function(t){for(var e=0;t>e;e++)for(var r=0;t>r;r++){var i={letter:".",row:e,col:r};this.matrix[e]||(this.matrix[e]=[]),this.matrix[e][r]=i}},t.prototype.drawmatrix=function(){for(var t=0;t<this.settings.gridSize;t++){var e=document.createElement("div");e.setAttribute("class","ws-row"),this.wrapEl.appendChild(e);for(var r=0;r<this.settings.gridSize;r++){var i=document.createElement("canvas");i.setAttribute("class","ws-col"),i.setAttribute("width",40),i.setAttribute("height",40);var s=i.width/2,o=i.height/2,n=i.getContext("2d");n.font="400 28px Calibri",n.textAlign="center",n.textBaseline="middle",n.fillStyle="#333",n.fillText(this.matrix[t][r].letter,s,o),i.addEventListener("mousedown",this.onMousedown(this.matrix[t][r])),i.addEventListener("mouseover",this.onMouseover(this.matrix[t][r])),i.addEventListener("mouseup",this.onMouseup()),e.appendChild(i)}}},t.prototype.fillUpFools=function(){for(var t=0;t<this.settings.gridSize;t++)for(var e=0;e<this.settings.gridSize;e++)"."==this.matrix[t][e].letter&&(this.matrix[t][e].letter=String.fromCharCode(Math.rangeInt(65,90)))},t.prototype.getItems=function(t,e,r,i){var s=[];if(t===r||e===i||Math.abs(r-t)==Math.abs(i-e)){var o=t===r?0:r>t?1:-1,n=e===i?0:i>e?1:-1,a=t,h=e;s.push(this.getItem(a,h));do a+=o,h+=n,s.push(this.getItem(a,h));while(a!==r||h!==i)}return s},t.prototype.getItem=function(t,e){return this.matrix[t]?this.matrix[t][e]:void 0},t.prototype.clearHighlight=function(){for(var t=document.querySelectorAll(".ws-selected"),e=0;e<t.length;e++)t[e].classList.remove("ws-selected")},t.prototype.lookup=function(t){for(var e=[""],r=0;r<t.length;r++)e[0]+=t[r].letter;if(e.push(e[0].split("").reverse().join("")),this.settings.words.indexOf(e[0])>-1||this.settings.words.indexOf(e[1])>-1){for(var r=0;r<t.length;r++){var i=t[r].row+1,s=t[r].col+1,o=document.querySelector(".ws-area .ws-row:nth-child("+i+") .ws-col:nth-child("+s+")");o.classList.add("ws-found")}for(var n=document.querySelector(".ws-words"),a=n.getElementsByTagName("li"),r=0;r<a.length;r++)e[0].toLowerCase()==a[r].innerHTML.toLowerCase()&&(a[r].innerHTML="<del>"+a[r].innerHTML+"</del>");this.solved++,this.solved==this.settings.words.length&&this.gameOver()}},t.prototype.gameOver=function(){var t=document.createElement("div");t.setAttribute("id","ws-game-over-outer"),t.setAttribute("class","ws-game-over-outer"),this.wrapEl.parentNode.appendChild(t);var t=document.getElementById("ws-game-over-outer");t.innerHTML="<div class='ws-game-over-inner' id='ws-game-over-inner'><div class='ws-game-over' id='ws-game-over'><h2>Congratulations!</h2><p>You've found all of the words!</p></div></div>"},t.prototype.onMousedown=function(t){var e=this;return function(){e.selectFrom=t}},t.prototype.onMouseover=function(t){var e=this;return function(){if(e.selectFrom){e.selected=e.getItems(e.selectFrom.row,e.selectFrom.col,t.row,t.col),e.clearHighlight();for(var r=0;r<e.selected.length;r++){var i=e.selected[r],s=i.row+1,o=i.col+1,n=document.querySelector(".ws-area .ws-row:nth-child("+s+") .ws-col:nth-child("+o+")");n.className+=" ws-selected"}}}},t.prototype.onMouseup=function(){var t=this;return function(){t.selectFrom=null,t.clearHighlight(),t.lookup(t.selected),t.selected=[]}}}();
\ No newline at end of file |