0
我创建了这个游戏，现在我想当用户选择任何字符高亮背景。但我的代码时，亮点的背景下，用户选择单词，这是我的代码正确的字符：帆布字搜索游戏
<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>我怎么能突出背景当用户选择任一字符或单词，当它是错的这个亮点必须从画布上移除？ 我该怎么做？
如果你想轻松切换背景颜色，你可能最好使用SVG而比一个画布元素。正如名称所述，一旦您在画布元素上绘制像素，它只是一个彩色像素。如果您想更改某些东西的背景颜色，则必须重新绘制整个部分。 – maechler