在画布单词搜索游戏中创建线条

本文介绍了在画布单词搜索游戏中创建线条的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我在画布中创建了单词搜索游戏.现在我想当用户选择字符来确定用于突出显示的单词绘制线，但这是我的结果:

I created word search game in canvas. Now I want when user select character for determine word draw line for highlight that but this is my results:

和

我想像下面的图片一样画线:这是我本节的代码:

I want draw line like bellow image: And this is my code for this section:

function checkForWord() { // get the starting & ending grid-cell // that the user dragged across var startCol = parseInt(startX / colWidth); var startRow = parseInt(startY / rowHeight); var lastCol = parseInt(mouseX / colWidth); var lastRow = parseInt(mouseY / rowHeight); // get the word that the user dragged across // by adding the letters from the starting cell // to the ending cell var word = ""; var length = Math.max(Math.abs(startCol - lastCol) + 1, Math.abs(startRow - lastRow) + 1); var dx = 0; var dy = 0; var x = startCol; var y = startRow; if (lastCol > startCol) { dx = 1; } if (lastCol < startCol) { dx = -1; } if (lastRow > startRow) { dy = 1; } if (lastRow < startRow) { dy = -1; } while (length > 0) { // add the letter in this grid-cell to the word word += letters[y * colCount + x]; // highlight the squares that the user selected ctx1.save(); ctx1.fillStyle = "#f5aded"; ctx1.lineCap = 'round' ctx1.globalAlpha = 1.00; ctx1.globalCompositeOperation = "destination-over"; ctx1.fillRect((x) * colWidth , (y) * rowHeight , colWidth , rowHeight); ctx1.restore(); // increment x/y/length for the next letter x += dx; y += dy; length--; } // reverse the word if dragged backwards if (dx < 0 || dy < 0) { word.split('').reverse().join(''); } // test if the word is a solution word assuming it's spelled frontwards var frontwards = words.indexOf(word.toLowerCase()); // test if the word is a solution word assuming it's spelled backwards var backwards = words.indexOf(stringBackwards(word).toLowerCase()); // if the selected word matches a puzzle word // tell the user they found the word an remove the word from the puzzle // if the selected word doesn't match any remaining puzzle word // tell the user to try again if (frontwards >= 0 || backwards >= 0) { var index = Math.max(frontwards, backwards); $results.text("You just found: " + words[index]); words.splice(index, 1); if (words.length > 0) { var remainingWords = "Find:" for (var i = 0; i < words.length; i++) { remainingWords += " " + words[i]; } $puzzle.text(remainingWords); } else { $puzzle.text("Congratulations..."); $results.text("You found all the words in the puzzle!"); } } else { if (words.length > 0) { $results.text("Sorry...Try Again."); } } }

请帮助我如何完成这项工作！

How I can do this work please help!

推荐答案

下面是一个使用圆角半透明笔迹突出显示的单词搜索示例:

Here's an example Word Search using rounded semi-transparent stokes for highlighting:

var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var cw=canvas.width; var ch=canvas.height; function reOffset(){ var BB=canvas.getBoundingClientRect(); offsetX=BB.left; offsetY=BB.top; } var offsetX,offsetY; reOffset(); window.onscroll=function(e){ reOffset(); } var isDown=false; var startX,startY,endX,endY; var rows=7; var cols=7; var cellWidth=40; var cellHeight=40; var letters = ['g', 'b', 's', 'i', 'c', 'e', 'n', 'o', 'b', 'u', 'w', 'v', 'r', 'd', 'o', 'k', 'i', 't', 'o', 'n', 'd', 'd', 't', 'm', 'c', 't', 'a', 'a', 'h', 'a', 'p', 'y', 's', 'e', 'c', 'k', 'o', 'z', 'b', 'z', 'i', 'r', 'p', 't', 'a', 's', 't', 'e', 's']; var solutions=[]; solutions.push({start:{col:0,row:0},end:{col:0,row:3},color:'gold',word:'butter',isSolved:false}); solutions.push({start:{col:1,row:0},end:{col:6,row:5},color:'purple',word:'good',isSolved:false}); solutions.push({start:{col:0,row:6},end:{col:6,row:0},color:'green',word:'popcorn',isSolved:false}); solutions.push({start:{col:1,row:6},end:{col:6,row:6},color:'blue',word:'tastes',isSolved:false}); solutions.push({start:{col:3,row:1},end:{col:0,row:4},color:'red',word:'with',isSolved:false}); ctx.lineCap = "round"; ctx.lineWidth=20; ctx.font='14px verdana'; ctx.textAlign='center'; ctx.textBaseline='middle'; drawLetters(letters); highlightSolvedWords(); function testSolution(){ var col0=parseInt(startX/cellWidth); var row0=parseInt(startY/cellHeight); var col1=parseInt(endX/cellWidth); var row1=parseInt(endY/cellHeight); for(var i=0;i<solutions.length;i++){ var s=solutions[i]; var index=-1; if(s.start.col==col0 && s.start.row==row0 && s.end.col==col1 && s.end.row==row1){ index=i; } if(s.start.col==col1 && s.start.row==row1 && s.end.col==col0 && s.end.row==row0){ index=i; } if(index>=0){ solutions[index].isSolved=true; highlightWord(solutions[index]); } } } function highlightSolvedWords(){ for(var i=0;i<solutions.length;i++){ var solution=solutions[i]; if(solution.isSolved){ highlightWord(solution); } } } function drawLetters(letters){ ctx.fillStyle='black'; for(var i=0;i<letters.length;i++){ var row=parseInt(i/cols); var col=i-row*cols; ctx.fillText(letters[i],col*cellWidth+cellWidth/2,row*cellHeight+cellHeight/2); } } function highlightWord(word){ var x0=word.start.col*cellWidth+cellWidth/2; var y0=word.start.row*cellHeight+cellHeight/2; var x1=word.end.col*cellWidth+cellWidth/2; var y1=word.end.row*cellHeight+cellHeight/2; ctx.beginPath(); ctx.moveTo(x0,y0); ctx.lineTo(x1,y1); ctx.strokeStyle=word.color; ctx.globalAlpha=0.25; ctx.stroke(); ctx.globalAlpha=1.00; } function handleMouseDown(e){ // tell the browser we're handling this event e.preventDefault(); e.stopPropagation(); startX=parseInt(e.clientX-offsetX); startY=parseInt(e.clientY-offsetY); // Put your mousedown stuff here isDown=true; } function handleMouseUpOut(e){ // Put your mouseup stuff here isDown=false; // tell the browser we're handling this event e.preventDefault(); e.stopPropagation(); endX=parseInt(e.clientX-offsetX); endY=parseInt(e.clientY-offsetY); testSolution(); } $("#canvas").mousedown(function(e){handleMouseDown(e);}); $("#canvas").mousemove(function(e){handleMouseMove(e);}); $("#canvas").mouseup(function(e){handleMouseUpOut(e);}); $("#canvas").mouseout(function(e){handleMouseUpOut(e);});

body{ background-color: ivory; } #canvas{border:1px solid red;}

<script src="ajax.googleapis/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <h4>MouseDown at start of word. MouseUp at end of word.</h4> <h4>Find: Popcorn tastes good with butter</h4> <canvas id="canvas" width=300 height=300></canvas>