Question

我创建了这个游戏，现在我想要用户选择任何角色高亮背景。但是我的代码突出显示用户为单词选择正确字符的背景和我的代码：

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title></title>

  <link href="lib/ionic/css/ionic.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">

  <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
        <link href="css/ionic.app.css" rel="stylesheet">
        -->

  <!-- ionic/angularjs js -->
  <script src="lib/ionic/js/ionic.bundle.js"></script>
  <script src="js/jquery.js"></script>
  <!-- cordova script (this will be a 404 during development) -->
  <script src="cordova.js"></script>

  <!-- your app's js -->
  <script src="js/app.js"></script>
</head>

<body ng-app="starter">

  <ion-pane>
    <ion-header-bar class="bar-stable">
      <h1 class="title">Ionic Blank Starter</h1>
    </ion-header-bar>
    <ion-content>
      <h3 id="puzzle">Find: Popcorn tastes good with butter</h3>
      <h4 id="results">Drag through the lettered squares</h4>
      <canvas id="canvas" width=280 height=280></canvas>
    </ion-content>
  </ion-pane>
  <script>
    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);
    });
  </script>
</body>

</html>

当用户选择任何字符或单词时，如何突出显示背景？如果错误，此高亮显示必须从画布中删除？我怎么能这样做？

Answer 1

这样的东西会起作用 - 这是用于选择图像，但它也可以在点击或鼠标悬停时工作。

<!doctype html>
<head>
<title>JQuery Image Selector</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Image Selector Example</h2>
<body>
<div id="image_container">
   <input type="image" src="http://www.javabeat.net/wp-content/uploads/2014/03/amazing-300x214.jpg" alt="amazing" class="aligncenter size-medium wp-image-15551" />
    <input type="image" src="http://www.javabeat.net/wp-content/uploads/2014/05/dummy_image2-300x300.jpg" alt="dummy_image2" width="300" height="300" class="aligncenter size-medium wp-image-19480" />
    <input type="image" src="http://www.javabeat.net/wp-content/uploads/2014/05/dummy_image1-300x210.jpg" alt="dummy_image1" width="300" height="210" class="aligncenter size-medium wp-image-19479" />
</div>
<script>
    $("div#image_container :image").click(function () {
        $("div#image_container :image").css("border", "0");
        $(this).css("border", "14px double green");
    });
</script>
</body>
</html>

源： http://www.javabeat.net/jquery-image-selector/

对于鼠标悬停事件，这是一个非常好的演示和代码示例： http://output.jsbin.com/utowu/376/edit?html,js,output

画布中的单词搜索游戏

1 个答案: