I'm a new leaner for JavaScript. I wanna create an array to store multiple x and y values for one object (array[0]), then use this values to pare with canvas drawing object x and y coordinates.
For example I have the fix x and y values as below: (x : y) 585 : 225 584 : 231 579 : 254 573 : 271 570 : 279 570 : 280
I will get the drawing object x and y coordinates and pare with the above values. if more then 3 group of x and y values wrong then show:wrong answer. it's possible to do that? Thank you! please help...
here is the coding:
<!DOCTYPE html>
<html><head>
<style>
#contain {
width: 500px;
height: 120px;
top : 15px;
margin: 0 auto;
position: relative;
}
</style>
<script>
var touchList = [];
var plates = [];
var currentPlates;
var currentIndex = 0;
var canvas;
var ctx;
var lastPt=null;
var letsdraw = false;
var offX = 440, offY = 25;
function init() {
var touchzone = document.getElementById("layer1");
touchzone.addEventListener("touchmove", draw, false);
touchzone.addEventListener("touchend", end, false);
ctx = touchzone.getContext("2d");
}
function draw(e) {
e.preventDefault();
var selectedCoordinate = new Object();
selectedCoordinate.x = e.touches[0].pageX;
selectedCoordinate.y = e.touches[0].pageY;
touchList.push(selectedCoordinate);
console.log("X: " + e.touches[0].pageX + " Y: " + e.touches[0].pageY);
if (lastPt != null) {
ctx.beginPath();
ctx.moveTo(lastPt.x, lastPt.y);
ctx.lineTo(e.touches[0].pageX - offX,
e.touches[0].pageY - offY);
ctx.stroke();
}
lastPt = {
x: e.touches[0].pageX - offX,
y: e.touches[0].pageY - offY
};
}
function end(e) {
for(var i=0; i<touchList.length; i++)
console.log(touchList[i].x + " : " + touchList[i].y);
var touchzone = document.getElementById("layer1");
e.preventDefault();
//Terminate touch path
lastPt = null;
}
function clear_canvas_width ()
{
var s = document.getElementById ("layer1");
var w = s.width;
s.width = 10;
s.width = w;
}
function initPlates() {
plates[0] = new Plates(1, 568, 262);
generateQuestion(isEasy);
for(var i=0; i<currentPlates.length; i++) {
console.log("Index: " + i + " value: " + currentPlates[i].index);
}
}
function Plates(index, correct, deficient) {
this.index = index;
this.correct = correct;
this.deficient = deficient;
}
Plates.prototype.checkAnswer = function(answer) {
console.log("Checking user answer: " + answer);
this.userAnswer = answer;
if(answer == this.correct)
this.result = "Correct";
else
this.result = "Wrong";
}
</script>
</head>
<body onload="init()">
<div id="contain">
<canvas id="layer1" width="450" height="440" style="position: absolute; left: 0; top: 0;z-index:0; border: 1px solid #ccc;"></canvas>
</div>
</body>
</html>
I'm a new leaner for JavaScript. I wanna create an array to store multiple x and y values for one object (array[0]), then use this values to pare with canvas drawing object x and y coordinates.
For example I have the fix x and y values as below: (x : y) 585 : 225 584 : 231 579 : 254 573 : 271 570 : 279 570 : 280
I will get the drawing object x and y coordinates and pare with the above values. if more then 3 group of x and y values wrong then show:wrong answer. it's possible to do that? Thank you! please help...
here is the coding:
<!DOCTYPE html>
<html><head>
<style>
#contain {
width: 500px;
height: 120px;
top : 15px;
margin: 0 auto;
position: relative;
}
</style>
<script>
var touchList = [];
var plates = [];
var currentPlates;
var currentIndex = 0;
var canvas;
var ctx;
var lastPt=null;
var letsdraw = false;
var offX = 440, offY = 25;
function init() {
var touchzone = document.getElementById("layer1");
touchzone.addEventListener("touchmove", draw, false);
touchzone.addEventListener("touchend", end, false);
ctx = touchzone.getContext("2d");
}
function draw(e) {
e.preventDefault();
var selectedCoordinate = new Object();
selectedCoordinate.x = e.touches[0].pageX;
selectedCoordinate.y = e.touches[0].pageY;
touchList.push(selectedCoordinate);
console.log("X: " + e.touches[0].pageX + " Y: " + e.touches[0].pageY);
if (lastPt != null) {
ctx.beginPath();
ctx.moveTo(lastPt.x, lastPt.y);
ctx.lineTo(e.touches[0].pageX - offX,
e.touches[0].pageY - offY);
ctx.stroke();
}
lastPt = {
x: e.touches[0].pageX - offX,
y: e.touches[0].pageY - offY
};
}
function end(e) {
for(var i=0; i<touchList.length; i++)
console.log(touchList[i].x + " : " + touchList[i].y);
var touchzone = document.getElementById("layer1");
e.preventDefault();
//Terminate touch path
lastPt = null;
}
function clear_canvas_width ()
{
var s = document.getElementById ("layer1");
var w = s.width;
s.width = 10;
s.width = w;
}
function initPlates() {
plates[0] = new Plates(1, 568, 262);
generateQuestion(isEasy);
for(var i=0; i<currentPlates.length; i++) {
console.log("Index: " + i + " value: " + currentPlates[i].index);
}
}
function Plates(index, correct, deficient) {
this.index = index;
this.correct = correct;
this.deficient = deficient;
}
Plates.prototype.checkAnswer = function(answer) {
console.log("Checking user answer: " + answer);
this.userAnswer = answer;
if(answer == this.correct)
this.result = "Correct";
else
this.result = "Wrong";
}
</script>
</head>
<body onload="init()">
<div id="contain">
<canvas id="layer1" width="450" height="440" style="position: absolute; left: 0; top: 0;z-index:0; border: 1px solid #ccc;"></canvas>
</div>
</body>
</html>
- 1 Search for multidimensional arrays. – Igl3 Commented Oct 29, 2013 at 7:48
-
1
var coords = [[585,225],[584,231],[579,254],[573,271],[570,279],[570,280]]; coords [1][0] //584– Moritz Roessler Commented Oct 29, 2013 at 8:04
1 Answer
Reset to default 5You can try to store object instead of multidimensional array.
var coords=new Array();
coords.push({x:584,y:225});
coords.push({x:588,y:222});
var xcoord =coords[0].x;
var ycoord =coords[0].y;