在画布单词搜索游戏中创建线条 [英] Create line in canvas word search game

问题描述

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

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="https://ajax.googleapis.com/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>

这篇关于在画布单词搜索游戏中创建线条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！