I created this game and now I want when user select any character highlight background. But my code when highlight background that user select correct characters for word and this my code:
<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>
How I can highlight background when user select any character or word and when it is wrong this highlight must remove from canvas? How I can do this?
Aucun commentaire:
Enregistrer un commentaire