diff options
| -rw-r--r-- | css/style.css | 21 | ||||
| -rw-r--r-- | index.html | 7 | ||||
| -rw-r--r-- | js/utility.js | 30 | ||||
| -rw-r--r-- | js/wordsearch.js | 155 |
4 files changed, 150 insertions, 63 deletions
diff --git a/css/style.css b/css/style.css index b84e219..682d445 100644 --- a/css/style.css +++ b/css/style.css @@ -52,14 +52,29 @@ body { /* ========================================== /* -/* GAMEAREA +/* Game area /* /* ========================================== */ -#ws-area { +.ws-area { background: #fafafa; display: inline-block; padding: 20px; border-radius: 10px; - position: relative; + -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-selected { + background: #ddd; }
\ No newline at end of file @@ -8,17 +8,14 @@ <body> <div class="wrap"> <h1 class="logo">Word search game</h1> - <section id="ws-area" class="fix"></section> + <section id="ws-area"></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('ws-area'); - gameAreaEl.wordSeach({ - 'gridSize': 10, - 'words': ['one', 'two', 'three', 'four', 'five'] - }); + gameAreaEl.wordSeach(); </script> </body> </html>
\ No newline at end of file diff --git a/js/utility.js b/js/utility.js index a59841f..fe1d0f1 100644 --- a/js/utility.js +++ b/js/utility.js @@ -5,10 +5,28 @@ * @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; +if (typeof Math.rangeInt != 'function') { + Math.rangeInt = function(min, max){ + if (max == undefined) { + max = min; + min = 0; + } + return Math.floor(Math.random() * (max - min + 1)) + min; + } +} + +/** + * Mege two objects + * + * @param {Object} o1 Object 1 + * @param {Object} o2 Object 2 + * @return {Object} + */ +if (typeof Object.merge != 'function') { + Object.merge = function(o1, o2) { + for (var i in o1) { + o2[i] = o1[i]; + } + return o2; + } } diff --git a/js/wordsearch.js b/js/wordsearch.js index ce85f0e..6c88ac4 100644 --- a/js/wordsearch.js +++ b/js/wordsearch.js @@ -15,7 +15,20 @@ */ function WordSeach(wrapEl, settings) { this.wrapEl = wrapEl; - this.settings = settings; + + // Add `#ws-area` to wrap element + this.wrapEl.className += ' ws-area'; + + // Default settings + var default_settings = { + 'directions': ['WE', 'NS', 'SN', 'WN', 'EN'], + 'gridSize': 10, + 'words': ['one', 'two', 'three', 'four', 'five'], + 'debug': false + } + this.settings = Object.merge(settings, default_settings); + + this.isClicked = false; // Check the words' length if it is overflow the grid if (this.parseWords(this.settings.gridSize)) { @@ -30,10 +43,15 @@ } // Fill up the remaining blank items - this.fillUpFools(); + if (!this.settings.debug) { + this.fillUpFools(); + } // Draw the martrix into wrap element this.drawMartrix(); + + // Registe mouse events + this.registeMouseEvents(); } } @@ -46,7 +64,8 @@ isWorked = true; while (keepGoing) { - var dir = Math.rangeInt(3), // Direction + // Getting random direction + var dir = this.settings.directions[Math.rangeInt(this.settings.directions.length - 1)], result = this.addWord(this.settings.words[counter], dir), isWorked = true; @@ -66,71 +85,69 @@ /** * Add word into the martrix + * + * @param {String} word + * @param {Number} direction */ WordSeach.prototype.addWord = function(word, direction) { - var itWorked = true; + var itWorked = true, + directions = { + 'WE': [0, 1], // Horizontal (From left to right) + 'NS': [1, 0], // Vertical (From top to bottom) + 'SN': [-1, 0], // Vertical (From bottom to top) + 'WN': [1, 1], // From top left to bottom right + 'EN': [1, -1] // From top right to bottom left + }, + row, col; // y, x switch (direction) { - case 0: // Horizontal - // New row(y) and col(x) + case 'WE': // Horizontal (From left to right) 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; - if (origin == '.' || origin == word[i]) { - this.martrix[row][col + i].letter = word[i]; - } else { - itWorked = false; - } - } break; - case 1: // vertical + case 'NS': // Vertical (From top to bottom) var row = Math.rangeInt(this.settings.gridSize - word.length), col = Math.rangeInt(this.settings.gridSize - 1); + break; - for (var i = 0; i < word.length; i++) { - var origin = this.martrix[row + i][col].letter; - if (origin == '.' || origin == word[i]) { - this.martrix[row + i][col].letter = word[i]; - } else { - itWorked = false; - } - } + case 'SN': // Vertical (From bottom to top) + var row = Math.rangeInt(word.length - 1, this.settings.gridSize - 1), + col = Math.rangeInt(this.settings.gridSize - 1); break; - case 2: // From top left to bottom right + case 'WN': // 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)); - - for (var i = 0; i < word.length; i++) { - var origin = this.martrix[row + i][col + i].letter; - if (origin == '.' || origin == word[i]) { - this.martrix[row + i][col + i].letter = word[i]; - } else { - itWorked = false; - } - } break; - case 3: // From top right to bottom left + case 'EN': // From top right to bottom left var row = Math.rangeInt(this.settings.gridSize - word.length), col = Math.rangeInt(word.length - 1, this.settings.gridSize - 1); + break; - for (var i = 0; i < word.length; i++) { - var origin = this.martrix[row + i][col - i].letter; - if (origin == '.' || origin == word[i]) { - this.martrix[row + i][col - i].letter = word[i]; - } else { - itWorked = false; - } - } + default: + var error = 'UNKNOWN DIRECTION!'; + alert(error); + console.log(error); break; } + // Add words to the martrix + for (var i = 0; i < word.length; i++) { + var newRow = row + i * directions[direction][0], + newCol = col + i * directions[direction][1]; + + // The letter on the board + var origin = this.martrix[newRow][newCol].letter; + + if (origin == '.' || origin == word[i]) { + this.martrix[newRow][newCol].letter = word[i]; + } else { + itWorked = false; + } + } + return itWorked; } @@ -139,7 +156,7 @@ */ WordSeach.prototype.initialize = function() { /** - * Store the words + * Letter martrix * * param {Array} */ @@ -154,8 +171,8 @@ 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]; + var word = this.settings.words[i]; 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.'); @@ -192,11 +209,12 @@ for (var row = 0; row < this.settings.gridSize; row++) { // New row var divEl = document.createElement('div'); + divEl.setAttribute('class', 'ws-row'); this.wrapEl.appendChild(divEl); for (var col = 0; col < this.settings.gridSize; col++) { var cvEl = document.createElement('canvas'); - cvEl.setAttribute('class', 'ws-letter'); + cvEl.setAttribute('class', 'ws-col'); cvEl.setAttribute('width', 40); cvEl.setAttribute('height', 40); @@ -216,16 +234,55 @@ } /** - * Fill up the remaining blank items + * Fill up the remaining 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 == '.') { + // Math.rangeInt(65, 90) => A ~ Z this.martrix[row][col].letter = String.fromCharCode(Math.rangeInt(65, 90)); } } } } + /* + * Registe mouse events + */ + WordSeach.prototype.registeMouseEvents = function() { + var cols = document.querySelectorAll('.ws-col'); + for (var i = 0; i < cols.length; i++) { + cols[i].addEventListener('mousedown', this.onMouseDownHandler(this)); + cols[i].addEventListener('mouseup', this.onMouseUpHandler(this)); + cols[i].addEventListener('mouseover', this.onMouseOverHandler(this)); + } + } + + WordSeach.prototype.onMouseDownHandler = function(ws) { + return function() { + ws.isClicked = true; + this.className += ' ws-selected'; + } + } + + WordSeach.prototype.onMouseUpHandler = function(ws) { + return function() { + ws.isClicked = false; + + var selectedEls = document.querySelectorAll('.ws-selected'); + for (var i = 0; i < selectedEls.length; i++) { + selectedEls[i].setAttribute('class', 'ws-col'); + } + } + } + + WordSeach.prototype.onMouseOverHandler = function(ws) { + return function() { + if (ws.isClicked) { + this.className += ' ws-selected'; + } + } + } + })();
\ No newline at end of file |