diff options
| -rw-r--r-- | .gitignore | 1 | ||||
| -rw-r--r-- | css/style.css | 36 | ||||
| -rw-r--r-- | images/forkme_right_red.png | bin | 0 -> 7927 bytes | |||
| -rw-r--r-- | index.html | 9 | ||||
| -rw-r--r-- | js/utility.js | 17 | ||||
| -rw-r--r-- | js/wordsearch.js | 88 |
6 files changed, 111 insertions, 40 deletions
diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..496ee2c --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.DS_Store
\ No newline at end of file diff --git a/css/style.css b/css/style.css index c07319c..b84e219 100644 --- a/css/style.css +++ b/css/style.css @@ -9,6 +9,30 @@ body, h1 { padding: 0; } +h1 { + text-transform: uppercase; +} + +body { + color: #333; +} + +/* ========================================== +/* +/* COMMON +/* +/* ========================================== */ + +.fix { + *zoom: 1; +} + +.fix:after { + display: table; + clear: both; + content: ''; +} + /* ========================================== /* /* HOME @@ -19,6 +43,11 @@ body, h1 { width: 960px; margin: 0 auto; padding-top: 40px; + text-align: center; +} + +.logo, #gameArea { + margin-bottom: 40px; } /* ========================================== @@ -27,9 +56,10 @@ body, h1 { /* /* ========================================== */ -#gamearea { - margin: 10px 20px; - background: #efefef; +#ws-area { + background: #fafafa; + display: inline-block; + padding: 20px; border-radius: 10px; position: relative; }
\ No newline at end of file diff --git a/images/forkme_right_red.png b/images/forkme_right_red.png Binary files differnew file mode 100644 index 0000000..1e19c21 --- /dev/null +++ b/images/forkme_right_red.png @@ -7,16 +7,17 @@ </head> <body> <div class="wrap"> - <h1>Word search game</h1> - <section id="gameArea"></section> + <h1 class="logo">Word search game</h1> + <section id="ws-area" class="fix"></section> </div> + <a href="https://github.com/lizhineng/word-search-game"><img style="position: absolute; top: 0; right: 0; border: 0;" src="images/forkme_right_red.png" alt="Fork me on GitHub"></a> <script src="js/utility.js"></script> <script src="js/wordsearch.js"></script> <script type="text/javascript"> - var gameAreaEl = document.getElementById('gameArea'); + var gameAreaEl = document.getElementById('ws-area'); gameAreaEl.wordSeach({ 'gridSize': 10, - 'words': ['apple'] + 'words': ['one', 'two', 'three', 'four', 'five'] }); </script> </body> diff --git a/js/utility.js b/js/utility.js index ab67cd2..a59841f 100644 --- a/js/utility.js +++ b/js/utility.js @@ -1,3 +1,14 @@ -function range(min, max) { - return Math.floor(Math.random() * (max - min + 1)) + min; -}
\ No newline at end of file +/** + * Returns a random integer between min and max + * + * @param {Number} min + * @param {Number} max + * @return {Number} + */ +Math.rangeInt = function(min, max){ + if (max == undefined) { + max = min; + min = 0; + } + return Math.floor(Math.random() * (max - min + 1)) + min; +} diff --git a/js/wordsearch.js b/js/wordsearch.js index 7cf0375..ce85f0e 100644 --- a/js/wordsearch.js +++ b/js/wordsearch.js @@ -1,13 +1,17 @@ (function(){ + 'use strict'; - Element.prototype.wordSeach = WordSeachHelper; - - function WordSeachHelper(settings) { + // Extend the element method + Element.prototype.wordSeach = function(settings) { return new WordSeach(this, settings); } /** * Word seach + * + * @param {Element} wrapWl the game's wrap element + * @param {Array} settings + * constructor */ function WordSeach(wrapEl, settings) { this.wrapEl = wrapEl; @@ -16,40 +20,39 @@ // Check the words' length if it is overflow the grid if (this.parseWords(this.settings.gridSize)) { // Add words into the martrix data - var isWorded = false; + var isWorked = false; - while (isWorded == false) { + while (isWorked == false) { // initialize the application this.initialize(); - isWorded = this.addWords(); + isWorked = this.addWords(); } - + + // Fill up the remaining blank items + this.fillUpFools(); // Draw the martrix into wrap element this.drawMartrix(); - - console.log(this); } } /** - * Add words into the martrix + * Put the words into the martrix */ WordSeach.prototype.addWords = function() { var keepGoing = true, counter = 0, - isWorded = true; + isWorked = true; while (keepGoing) { - //var dir = Math.floor(Math.random() * 3), - var dir = 3, + var dir = Math.rangeInt(3), // Direction result = this.addWord(this.settings.words[counter], dir), - isWorded = true; + isWorked = true; if (result == false) { keepGoing = false; - isWorded = false; + isWorked = false; } counter++; @@ -58,7 +61,7 @@ } } - return isWorded; + return isWorked; } /** @@ -70,8 +73,8 @@ switch (direction) { case 0: // Horizontal // New row(y) and col(x) - var row = Math.floor(Math.random() * (this.settings.gridSize - 1)), - col = Math.floor(Math.random() * (this.settings.gridSize - word.length + 1)); + var row = Math.rangeInt(this.settings.gridSize - 1), + col = Math.rangeInt(this.settings.gridSize - word.length); for (var i = 0; i < word.length; i++) { var origin = this.martrix[row][col + i].letter; @@ -84,8 +87,8 @@ break; case 1: // vertical - var col = Math.floor(Math.random() * (this.settings.gridSize - 1)), - row = Math.floor(Math.random() * (this.settings.gridSize - word.length + 1)); + var row = Math.rangeInt(this.settings.gridSize - word.length), + col = Math.rangeInt(this.settings.gridSize - 1); for (var i = 0; i < word.length; i++) { var origin = this.martrix[row + i][col].letter; @@ -98,6 +101,8 @@ break; case 2: // From top left to bottom right + var row = Math.rangeInt(this.settings.gridSize - word.length), + col = Math.rangeInt(this.settings.gridSize - word.length); var col = Math.floor(Math.random() * (this.settings.gridSize - word.length + 1)), row = Math.floor(Math.random() * (this.settings.gridSize - word.length + 1)); @@ -112,10 +117,8 @@ break; case 3: // From top right to bottom left - var col = range(this.settings.gridSize - word.length + 1, this.settings.gridSize - 1), - row = range(0, this.settings.gridSize - word.length); - - console.log(word, row, col); + var row = Math.rangeInt(this.settings.gridSize - word.length), + col = Math.rangeInt(word.length - 1, this.settings.gridSize - 1); for (var i = 0; i < word.length; i++) { var origin = this.martrix[row + i][col - i].letter; @@ -146,17 +149,21 @@ } WordSeach.prototype.parseWords = function(maxSize) { - var itWord = true; + var itWorked = true; + + for (var i = 0; i < this.settings.words.length; i++) { + // Convert all the letters to upper case + this.settings.words[i] = this.settings.words[i].toUpperCase(); + var word = this.settings.words[i]; - this.settings.words.forEach(function(word){ if (word.length > maxSize) { alert('The length of word `' + word + '` is overflow the gridSize.'); console.error('The length of word `' + word + '` is overflow the gridSize.'); - itWord = false; + itWorked = false; } - }); + } - return itWord; + return itWorked; } /** @@ -189,15 +196,36 @@ for (var col = 0; col < this.settings.gridSize; col++) { var cvEl = document.createElement('canvas'); + cvEl.setAttribute('class', 'ws-letter'); cvEl.setAttribute('width', 40); cvEl.setAttribute('height', 40); + // Fill text in middle center + var x = cvEl.width / 2, + y = cvEl.height / 2; + var ctx = cvEl.getContext('2d'); - ctx.fillText(this.martrix[row][col].letter, 0, 20); + ctx.font = '30px Calibri'; + ctx.textAlign = 'center'; + ctx.fillStyle = '#333'; // Text color + ctx.fillText(this.martrix[row][col].letter, x, y); divEl.appendChild(cvEl); } } } + /** + * Fill up the remaining blank items + */ + WordSeach.prototype.fillUpFools = function() { + for (var row = 0; row < this.settings.gridSize; row++) { + for (var col = 0; col < this.settings.gridSize; col++) { + if (this.martrix[row][col].letter == '.') { + this.martrix[row][col].letter = String.fromCharCode(Math.rangeInt(65, 90)); + } + } + } + } + })();
\ No newline at end of file |
