"use strict"; var animateLines = []; var wordSearch; var winMouseDown = false; var imgMouseDown = false; var wD = window.devicePixelRatio; var lineFadeSpeed = 10; var imgMousePos = {dx1: null, dy1: null, dx2: null, dy2: null, mx1: null, my1: null, mx2: null, my2: null}; var currentColor = 0; var cat = 0; function reDrawLines() { var i; var x1; var y1; var x2; var y2; var b = wordSearch.blockSize; for (i = 0; i < wordSearch.loc.length; i += 1) { if (wordSearch.loc[i].found) { x1 = (wordSearch.loc[i].x + 1) * b - (b * 0.5); y1 = (wordSearch.loc[i].y + 1) * b - (b * 0.5); x2 = (wordSearch.loc[i].x2 + 1) * b - (b * 0.5); y2 = (wordSearch.loc[i].y2 + 1) * b - (b * 0.5); var ctx = wordSearch.tableImg.getContext("2d"); ctx.beginPath(); ctx.lineCap = "round"; ctx.lineWidth = (b / 2) * wD; ctx.globalAlpha = 0.5; ctx.strokeStyle = wordSearch.loc[i].clr; ctx.moveTo(x1 * wD, y1 * wD); ctx.lineTo(x2 * wD, y2 * wD); ctx.stroke(); ctx.globalAlpha = 1; ctx.closePath(); lineOutWord(i); } } } function updateBaseImage() { var ctx = wordSearch.tableImg.getContext("2d"); var imgData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height); wordSearch.baseImg.getContext("2d").putImageData(imgData, 0, 0); } function lineOutWord(index) { var con_imgList = document.getElementById("con_img_list"); var word = wordSearch.loc[index].word; var c = wordSearch.loc[index].clr; var h = wordSearch.letterHeight / 7; var w = wordSearch.listImg.offsetWidth / 3; var wl = 0; var ctx = wordSearch.listImg.getContext("2d"); var x; var y; var x1; var y1; var i = 0; for (x = 0; x < 3; x += 1) { for (y = 0; y < 7; y += 1) { x1 = w * x; y1 = (5 + (h * y)) + ((h * 1) * 0.5); if (wordSearch.wordList[wordSearch.category][y + (x * 7)] == word) { wl = ctx.measureText(word).width; x1 = x1 + (w / 2); ctx.beginPath(); ctx.lineWidth = (h / 2) * 0.5; ctx.strokeStyle = c; ctx.globalAlpha = 0.5; ctx.lineCap = "round"; ctx.moveTo(x1 - (wl / 2), y1 - 1); ctx.lineTo(x1 + (wl / 2), y1 - 1); ctx.stroke(); ctx.closePath(); } } } } function drawLineOnBase(locIndex) { var ctx = wordSearch.baseImg.getContext("2d"); ctx.beginPath(); ctx.lineCap = "round"; ctx.lineWidth = (wordSearch.blockSize / 2) * wD; ctx.globalAlpha = 0.5; ctx.strokeStyle = wordSearch.loc[locIndex].clr; ctx.moveTo(imgMousePos.dx * wD, imgMousePos.dy * wD); ctx.lineTo(imgMousePos.mx * wD, imgMousePos.my * wD); ctx.stroke(); ctx.closePath(); } function changeLineColor() { var y = Math.floor(Math.random() * wordSearch.fillColor.length); wordSearch.lineColor = wordSearch.fillColor[y]; wordSearch.fillColor.splice(y, 1); return wordSearch.lineColor; } function check_If_Done() { var i; for (i = 0; i < wordSearch.loc.length; i += 1) { if (wordSearch.loc[i].found == false) { return false; } } return true; } function check_If_Word() { var x; for (x = 0; x < wordSearch.loc.length; x += 1) { if ((imgMousePos.dx2 == wordSearch.loc[x].x && imgMousePos.mx2 == wordSearch.loc[x].x2) || (imgMousePos.dx2 == wordSearch.loc[x].x2 && imgMousePos.mx2 == wordSearch.loc[x].x)) { if ((imgMousePos.dy2 == wordSearch.loc[x].y && imgMousePos.my2 == wordSearch.loc[x].y2) || (imgMousePos.dy2 == wordSearch.loc[x].y2 && imgMousePos.my2 == wordSearch.loc[x].y)) { if (wordSearch.loc[x].found == false) { wordSearch.loc[x].clr = currentColor; drawLineOnBase(x); wordSearch.loc[x].found = true; lineOutWord(x); currentColor = changeLineColor(); } } } } if (check_If_Done()) { cat += 1; wordSearch.category = cat; if (wordSearch.category < 4) { alert("Well Done, Next Puzzle"); wordSearch.stop(); startGame(); } else { alert("Game Over!"); } } } function resizeImage(img, base, align) { var fnt = img.getContext("2d").font; var w = img.clientWidth * wD; var h = img.clientHeight * wD; if (base === undefined) { base = "top"; } if (align === undefined) { align = "center"; } img.height = (h != img.height) ? h: img.height; img.width = (w != img.width) ? w: img.width; img.getContext("2d").textAlign = align; img.getContext("2d").textBaseline = base; img.getContext("2d").font = fnt; img.getContext("2d").scale(wD, wD); } function LineComponent(img, x1, y1, x2, y2, clr, alpha) { this.x1 = x1; this.y1 = y1; this.x2 = x2; this.y2 = y2; this.alpha = alpha; this.clr = clr; this.ctx = img.getContext("2d"); } LineComponent.prototype.update = function() { this.alpha = this.alpha - 0.01; this.ctx.beginPath(); this.ctx.lineCap = "round"; this.ctx.lineWidth = (wordSearch.blockSize / 2) * wD; if (this.alpha < 0.1) { this.alpha = 0; } this.ctx.globalAlpha = this.alpha; this.ctx.strokeStyle = this.clr; this.ctx.moveTo(this.x1 * wD, this.y1 * wD); this.ctx.lineTo(this.x2 * wD, this.y2 * wD); this.ctx.stroke(); this.ctx.closePath(); }; function createLine(img, x1, y1, x2, y2, clr, alpha) { animateLines.push(new LineComponent(img, x1, y1, x2, y2, clr, alpha)); } function dRawImg(Img1, Img2) { var ctx1 = Img1.getContext("2d"); var ctx2 = Img2.getContext("2d"); ctx1.drawImage(Img2, 0, 0, ctx1.canvas.width, ctx1.canvas.height, 0, 0, ctx2.canvas.width / wD, ctx2.canvas.height / wD); } function updateImages() { var i = 0; var ctx = wordSearch.tableImg.getContext("2d"); ctx.clearRect(0, 0, wordSearch.tableImg.width, wordSearch.tableImg.height); dRawImg(wordSearch.tableImg, wordSearch.baseImg); if (winMouseDown) { dRawImg(wordSearch.tableImg, wordSearch.lineImg); } else { wordSearch.lineImg.getContext("2d").clearRect(0, 0, wordSearch.lineImg.width, wordSearch.lineImg.height); } wordSearch.animateImg.getContext("2d").clearRect(0, 0, wordSearch.tableImg.width, wordSearch.tableImg.height); for (i = 0; i < animateLines.length; i += 1) { wordSearch.animateImg.getContext("2d").globalAlph = 1; animateLines[i].update(wordSearch.animateImg); if (animateLines[i].alpha < 0.02) { animateLines.shift(); i -= 1; } } dRawImg(wordSearch.tableImg, wordSearch.animateImg); } function addToGrid(maxcol, mincol, maxrow, minrow, dir, word, originalWord, indx) { var good = true; var wch = word.split(""); var dd = 0; var x = 0; var y = 0; x = Math.floor(Math.random() * (maxcol - mincol)) + mincol; y = Math.floor(Math.random() * (maxrow - minrow)) + minrow; var x2 = 0; var y2 = 0; var c = 0; for (c = 0; c < word.length; c += 1) { switch (dir) { case 0: case 4: // horizontal x2 = x + c; y2 = y; if ((wordSearch.chars[x + c][y] == null || wordSearch.chars[x + c][y] == wch[c]) && dd < 1) { good = true; if (wordSearch.chars[x + c][y] == wch[c]) { dd += 1; } } else { good = false; } break; case 1: case 5: // veritcal x2 = x; y2 = y + c; if ((wordSearch.chars[x][y + c] == null || wordSearch.chars[x][y + c] == wch[c]) && dd < 1) { good = true; if (wordSearch.chars[x][y + c] == wch[c]) { dd += 1; } } else { good = false; } break; case 2: case 6: // diagonal L x2 = x + c; y2 = y + c; if ((wordSearch.chars[x + c][y + c] == null || wordSearch.chars[x + c][y + c] == wch[c]) && dd < 1) { good = true; if (wordSearch.chars[x + c][y + c] == wch[c]) { dd += 1; } } else { good = false; } break; case 3: case 7: // diagonal R x2 = x + c; y2 = y - c; if ((wordSearch.chars[x + c][y - c] == null || wordSearch.chars[x + c][y - c] == wch[c]) && dd < 1) { good = true; if (wordSearch.chars[x + c][y - c] == wch[c]) { dd += 1; } } else { good = false; } break; } if (good === false) { return false; } } if (good === true) { wordSearch.loc[indx].word = originalWord; wordSearch.loc[indx].x = x; wordSearch.loc[indx].y = y; wordSearch.loc[indx].x2 = x2; wordSearch.loc[indx].y2 = y2; wordSearch.loc[indx].dir = dir; for (c = 0; c < word.length; c += 1) { switch (dir) { case 0: case 4: wordSearch.chars[x + c][y] = wch[c]; break; case 1: case 5: wordSearch.chars[x][y + c] = wch[c]; break; case 2: case 6: wordSearch.chars[x + c][y + c] = wch[c]; break; case 3: case 7: wordSearch.chars[x + c][y - c] = wch[c]; break; } } } return good; } function position(word, indx) { var mincol = 0; var minrow = 0; var maxcol = 0; var maxrow = 0; var wordLength = word.length - 1; var reverseWord = word.split("").reverse().join(""); var dir = Math.floor(Math.random() * 8); var w = (dir > 3) ? reverseWord: word; switch (dir) { case 0: case 4: // horizontal maxrow = wordSearch.columns; maxcol = wordSearch.columns - wordLength; break; case 1: case 5: // veritcal maxrow = wordSearch.columns - wordLength; maxcol = wordSearch.columns; break; case 2: case 6: // diagonal L maxrow = wordSearch.columns - wordLength; maxcol = wordSearch.columns - wordLength; break; case 3: case 7: // diagonal R minrow = wordLength; maxrow = wordSearch.columns; maxcol = wordSearch.columns - wordLength; break; } if (addToGrid(maxcol, mincol, maxrow, minrow, dir, w, word, indx) !== true) { position(word, indx); } } function createPuzzle() { wordSearch.wordList[wordSearch.category].sort(function (a, b) { return b.length - a.length; }); var c = 0; var x = 0; var y = 0; for (c = 0; c < wordSearch.wordList[wordSearch.category].length; c += 1) { position(wordSearch.wordList[wordSearch.category][c], c); } wordSearch.wordList[wordSearch.category].sort(); for (x = 0; x <= wordSearch.columns; x += 1) { for (y = 0; y <= wordSearch.columns; y += 1) { if (wordSearch.chars[x][y] == null) { wordSearch.chars[x][y] = String.fromCharCode((Math.floor(Math.random() * 26)) + 65); } } } } function drawLine(img, x1, y1, x2, y2, clr) { var ctx = img.getContext("2d"); ctx.clearRect(0, 0, img.width, img.height); ctx.beginPath(); ctx.lineCap = "round"; ctx.lineWidth = (wordSearch.blockSize / 2) * wD; ctx.globalAlpha = 0.5; ctx.strokeStyle = clr; ctx.moveTo(x1 * wD, y1 * wD); ctx.lineTo(x2 * wD, y2 * wD); ctx.stroke(); ctx.closePath(); } function resizePage() { var word_list = document.getElementById("word_list"); var con_imgList = document.getElementById("con_img_list"); var con_imgTable = document.getElementById("con_img_table"); var span = document.getElementById("sizer"); var x = 0; wordSearch.blockSize = Math.floor(con_imgTable.offsetWidth / wordSearch.columns); wordSearch.sqr = Math.floor(wordSearch.blockSize * wordSearch.columns); wordSearch.tableImg.style.width = wordSearch.sqr + "px"; wordSearch.tableImg.style.height = wordSearch.sqr + "px"; con_imgTable.style.height = wordSearch.sqr + "px"; wordSearch.listImg.style.visibility = "hidden"; var str = wordSearch.wordList[wordSearch.category].sort().join(); span.innerHTML = str.replace(/,/g, "
"); var h = 0; var w = con_imgList.offsetWidth; wordSearch.list_fontSize = 10.0; var w3 = 0; span.style.fontSize = wordSearch.list_fontSize + "px"; while (w3 < (w / 3)) { wordSearch.list_fontSize = wordSearch.list_fontSize + 0.5; if (wordSearch.list_fontSize > 100.0) { break; } span.style.fontSize = wordSearch.list_fontSize + "px"; w3 = span.offsetWidth; } h = (span.offsetHeight / 3); word_list.style.height = h + 10 + "px"; span.style.fontSize = (wordSearch.blockSize) * 0.75 + "px"; wordSearch.table_fontSize = Math.floor((span.offsetHeight) / wordSearch.wordList[wordSearch.category].length); wordSearch.listImg.style.visibility = "visible"; var fot = window.getComputedStyle(span, null).getPropertyValue("font-family"); wordSearch.listImg.getContext("2d").font = (wordSearch.list_fontSize - 2.0) + "px " + fot; wordSearch.tableImg.getContext("2d").font = (wordSearch.blockSize) * 0.75 + "px " + fot; span.innerHTML = ""; wordSearch.listImg.style.width = con_imgList.offsetWidth; wordSearch.listImg.style.height = con_imgList.offsetHeight; con_imgTable.style.height = con_imgTable.offsetWidth + "px"; wordSearch.tableImg.style.marginTop = (con_imgTable.offsetHeight - wordSearch.tableImg.offsetHeight) / 2 + "px"; resizeImage(wordSearch.listImg); resizeImage(wordSearch.tableImg, "top", "center"); wordSearch.baseImg.style.width = wordSearch.tableImg.style.width; wordSearch.baseImg.style.height = wordSearch.tableImg.style.height; wordSearch.lineImg.style.width = wordSearch.tableImg.style.width; wordSearch.lineImg.style.height = wordSearch.tableImg.style.height; wordSearch.animateImg.style.width = wordSearch.tableImg.style.width; wordSearch.animateImg.style.height = wordSearch.tableImg.style.height; wordSearch.baseImg.width = wordSearch.tableImg.width; wordSearch.baseImg.height = wordSearch.tableImg.height; wordSearch.lineImg.width = wordSearch.tableImg.width; wordSearch.lineImg.height = wordSearch.tableImg.height; wordSearch.animateImg.width = wordSearch.tableImg.width; wordSearch.animateImg.height = wordSearch.tableImg.height; wordSearch.letterHeight = h; var ictx = wordSearch.listImg.getContext("2d"); var x1 = 0; var y1 = 0; for (x = 0; x < 7; x += 1) { wordSearch.listImg.getContext("2d").fillText(wordSearch.wordList[wordSearch.category][x], ((w / 3) * 1) - (w / 6), 5 + (h / 7) * x, (w / 3)); wordSearch.listImg.getContext("2d").fillText(wordSearch.wordList[wordSearch.category][x + 7], ((w / 3) * 2) - (w / 6), 5 + (h / 7) * x, (w / 3)); wordSearch.listImg.getContext("2d").fillText(wordSearch.wordList[wordSearch.category][x + 14], ((w / 3) * 3) - (w / 6), 5 + (h / 7) * x, (w / 3)); } } function resizeMe() { resizePage(); wordSearch.drawLetters(); reDrawLines(); updateBaseImage(); } function correctPos(posX, posY) { var posX2 = posX; var posY2 = posY; if (posX >= wordSearch.columns) { posX2 = wordSearch.columns - 1; } else if (posX < 0) { posX2 = 0; } if (posY >= wordSearch.columns) { posY2 = wordSearch.columns - 1; } else if (posY < 0) { posY2 = 0; } return {x : posX2, y : posY2}; } function windowMouseDown(m) { winMouseDown = true; if (imgMouseDown) { var posX = Math.floor((m.clientX - (wordSearch.tableImg.offsetLeft - window.pageXOffset)) / wordSearch.blockSize); var posY = Math.floor((m.clientY - (wordSearch.tableImg.offsetTop - window.pageYOffset)) / wordSearch.blockSize); var bt = correctPos(posX, posY); posX = bt.x; posY = bt.y; imgMousePos.dx = Math.floor((posX + 0.5) * wordSearch.blockSize); imgMousePos.dy = Math.floor((posY + 0.5) * wordSearch.blockSize); imgMousePos.dx2 = posX; imgMousePos.dy2 = posY; } } function windowMouseMove(m) { if (winMouseDown && imgMouseDown) { if (m.clientX < 0) { m.clientX = 0; } if (m.clientY < 0) { m.clientY = 0; } var posX = Math.floor((m.clientX - (wordSearch.tableImg.offsetLeft - window.pageXOffset)) / wordSearch.blockSize); var posY = Math.floor((m.clientY - (wordSearch.tableImg.offsetTop - window.pageYOffset)) / wordSearch.blockSize); var bt = correctPos(posX, posY); posX = bt.x; posY = bt.y; imgMousePos.mx = Math.floor((posX + 0.5) * wordSearch.blockSize); imgMousePos.my = Math.floor((posY + 0.5) * wordSearch.blockSize); imgMousePos.mx2 = posX; imgMousePos.my2 = posY; drawLine(wordSearch.lineImg, imgMousePos.dx, imgMousePos.dy, imgMousePos.mx, imgMousePos.my, wordSearch.lineColor); } } function windowMouseUp(m) { winMouseDown = false; if (imgMouseDown) { createLine(wordSearch.animateImg, imgMousePos.dx, imgMousePos.dy, imgMousePos.mx, imgMousePos.my, wordSearch.lineColor, 0.5); check_If_Word(); } } function imageMouseDown(m) { imgMouseDown = true; m.preventDefault(); var touches = m.changedTouches; if (touches !== undefined) { winMouseDown = true; var i = 0; var iTop = wordSearch.tableImg.offsetTop - window.pageYOffset; var iLeft = wordSearch.tableImg.offsetLeft - document.body.scrollLeft; var posX = Math.floor((touches[i].clientX - iLeft) / wordSearch.blockSize); var posY = Math.floor((touches[i].clientY - iTop) / wordSearch.blockSize); var bt = correctPos(posX, posY); posX = bt.x; posY = bt.y; imgMousePos.dx = Math.floor((posX + 0.5) * wordSearch.blockSize); imgMousePos.dy = Math.floor((posY + 0.5) * wordSearch.blockSize); imgMousePos.dx2 = posX; imgMousePos.dy2 = posY; } } function imageMouseMove(m) { m.preventDefault(); var touches = m.changedTouches; if (touches !== undefined) { var i = 0; var iTop = wordSearch.tableImg.offsetTop - window.pageYOffset; var iLeft = wordSearch.tableImg.offsetLeft - document.body.scrollLeft; var posX = Math.floor((touches[i].clientX - iLeft) / wordSearch.blockSize); var posY = Math.floor((touches[i].clientY - iTop) / wordSearch.blockSize); var bt = correctPos(posX, posY); posX = bt.x; posY = bt.y; imgMousePos.mx = Math.floor((posX + 0.5) * wordSearch.blockSize); imgMousePos.my = Math.floor((posY + 0.5) * wordSearch.blockSize); imgMousePos.mx2 = posX; imgMousePos.my2 = posY; drawLine(wordSearch.lineImg, imgMousePos.dx, imgMousePos.dy, imgMousePos.mx, imgMousePos.my, wordSearch.lineColor); } } function imageMouseUp(m) { m.preventDefault(); windowMouseUp(m); imgMouseDown = false; } var list = [ [ "BLOG", "CHALLENGE", "COURSES", "CPLUS", "CSHARP", "CSS", "DISCUSS", "HTML", "JAVA", "JAVASCRIPT", "JQUERY", "LANGUAGE", "LEARN", "MYCODE", "PHP", "PLAYGROUND", "PYTHON", "RUBY", "SOLOLEARN", "SQL", "SWIFT" ], [ "BLITZ", "DEFENCE", "FIELD", "FIELDGOAL", "FLAG", "FOOTBALL", "FUMBLE", "GOAL", "LINEBACKER", "NFL", "OFFENCE", "PASS", "PLAY", "PUNT", "QUARTERBACK", "STADIUM", "TACKLE", "THROW", "TOUCHDOWN", "TEAM", "YARDS" ], [ "BELLS", "CANDY", "CAROLS", "CHRISTMAS", "COOKIES", "DECORATIONS", "ELVES", "GIFTS", "LIGHTS", "MISTLETOE", "PRESENTS", "REINDEER", "RUDOPLH", "SANTA", "SLEIGH", "SNOW", "SNOWMAN", "STOCKINGS", "TREE", "TOYS", "WORKSHOP" ], [ "ARROW", "BEAUTIFUL", "BEMINE", "CANDY", "CARDS", "CHOCOLATE", "CUPID", "DOVE", "FEELINGS", "FLOWERS", "GIFTS", "HEART", "HUGS", "KISS", "LOVE", "MARRIAGE", "MUSIC", "ROMANCE", "ROSES", "SWEETHEART", "VALENTINE" ] ]; var lColor = [ "red", "blue", "green", "orange", "grey", "purple", "pink", "teal", "brown", "yellow", "lime", "maroon", "navy", "orchid", "steelblue", "tan", "tomato", "thistle", "skyblue", "olive", "gold", "salmon" ]; function startGame() { wordSearch = { animateImg : document.createElement("canvas"), tableImg : document.getElementById("img_table"), baseImg : document.createElement("canvas"), lineImg : document.createElement("canvas"), listImg : document.getElementById("img_list"), wordList : list, chars : [], loc : [], blockSize : 0, columns : 13, sqr : 0, category : cat, fillColor : [], table_fontSize : 0, list_fontSize : 0, listBlockSize : 0, letterHeight : 0, interval : 0, lineColor : 0, start : function() { var x = 0; for (x = 0; x < this.wordList[this.category].length; x += 1) { this.loc.push({word: "", x: 0, y: 0, x2: 0, y2: 0, dir: null, found: false, clr: ""}); this.fillColor.push(lColor[x]); } this.chars = new Array(this.columns + 1); for (x = 0; x < this.columns + 1; x += 1) { this.chars[x] = new Array(this.columns + 1); } resizePage(); createPuzzle(); this.drawLetters(); updateBaseImage(); }, drawLetters : function() { var x = 0; var y = 0; var x2 = 0; var y2 = 0; for (x = 0; x <= this.columns; x += 1) { for (y = 0; y <= this.columns; y += 1) { x2 = (x * this.blockSize) + (this.blockSize) / 2; y2 = (y * this.blockSize) + (this.blockSize - this.table_fontSize); this.tableImg.getContext("2d").fillText(this.chars[x][y], x2, y2); } } }, runAnimation : function () { this.interval = setInterval(updateImages, lineFadeSpeed); }, stop : function() { clearInterval(this.interval); } }; wordSearch.start(); window.addEventListener("mousedown", windowMouseDown, false); window.addEventListener("mousemove", windowMouseMove, false); window.addEventListener("mouseup", windowMouseUp, false); wordSearch.tableImg.addEventListener("mousedown", imageMouseDown, false); wordSearch.tableImg.addEventListener("mousemove", imageMouseMove, false); wordSearch.tableImg.addEventListener("mouseup", imageMouseUp, false); wordSearch.tableImg.addEventListener("touchstart", imageMouseDown, false); wordSearch.tableImg.addEventListener("touchmove", imageMouseMove, false); wordSearch.tableImg.addEventListener("touchend", imageMouseUp, false); wordSearch.tableImg.addEventListener("touchcancel", imageMouseUp, false); currentColor = changeLineColor(); wordSearch.runAnimation(); resizeMe(); resizeImage(wordSearch.tableImg); }

Word Search (Beta)