I am using vue & html-canvas try to write a responsive “link Game”, here is the sample
[![enter image description here][1]][1]
But I found a really strange problem, Because I want to check if the line is “legitimate” when user make a line between two dots.
here is the picture describe what is “legitimate”:
[![enter image description here][2]][2]
Group1(which is col-1 & col2) may link together.
Group2(which is col-1 & col2) may link together.
To archive this goal, I use a variable to record each dot’s information.
this.Dotlocation[[RowID,ColID,GroupID],[x_location,y_location]]
But I found that that is whatever I do the information never get correct. here is the result
[
// id,col,group
[ [ 3, 2, 4 ], [ 631.4, 417.43 ] ],
[ [ 3, 1, 3 ], [ 495, 417.43 ] ],
[ [ 2, 1, 3 ], [ 214, 495 ] ],
[ [ 1, 1, 3 ], [ 990, 462 ] ],
[ [ 1, 2, 4 ], [ 631.4, 184.6002 ] ],
[ [ 1, 1, 3 ], [ 495, 184.6002 ] ],
[ [ 0, 1, 3 ], [ 990, 171 ] ],
[ [ 2, 2, 4 ], [ 631.4, 301 ] ],
[ [ 2, 1, 3 ], [ 495, 301 ] ],
[ [ 0, 2, 4 ], [ 631.4, 68.2 ] ],
[ [ 0, 1, 3 ], [ 495, 68.2 ] ],
[ [ 4, 2, 4 ], [ 631.4, 533.801 ] ],
[ [ 4, 1, 3 ], [ 495, 533.801 ] ],
[ [ 1, 1, 3 ], [ 214, 301 ] ],
[ [ 0, 1, 3 ], [ 214, 107 ] ]
]
There are several questions in this array:
- I don’t know why id is disordered.
- The Group&col are incorrect; it seems like the last column’s problem
Here is my code ( I’m sorry it’s a little bit long):
DrawImgOnCanvas(question,context1){
let Column_Amount=question.length;
var onchangegroup = false;
let Column_ID = 1
this.Group = 1
for (let col = 0; col < question.length; col++) { //Column
console.log("col",col);
//紀錄錨點資訊
// let Dot_Row_ID = 1
const Max_Img_Size = this.CountMaxImgSize(this.QuestionDataStructure[col].length);
let RWD_Colum_Gap=this.CountRWDYGap(question[col])
console.log(RWD_Colum_Gap);
for (let Dot_Row_ID = 0; Dot_Row_ID < question[col].length; Dot_Row_ID++) { //Row
console.log("Group1",this.Group);
let Img = new Image();
// let Image_Url=new URL(`../../${question[col][row]}`, import.meta.url).href
let Image_Url = icon //FIXME: change to dynamic import
Img.src = Image_Url;
let Img_Size = this.ResizeRWDImg(Max_Img_Size,Img);
// Img.height = Img_Size.New_Height;
// Img.width = Img_Size.New_Width;
let x = this.Min_border + Max_Img_Size.Max_Width*col + this.RWD_Gap_Width*col
let y = this.Min_border + RWD_Colum_Gap + Max_Img_Size.Max_Height*Dot_Row_ID
// let bordr=100
Img.onload = () => {
console.log(this.Min_border);
context1.drawImage(Img, x, y, Img_Size.New_Width, Img_Size.New_Height);
context1.beginPath();
if (col == 0) {
console.log("Add on Right: Using Group",this.Group);
// add on right
context1.arc((x+Img_Size.New_Width+this.Min_border), (y+(Img_Size.New_Height/2)), this.DotRadius, 0, Math.PI * 2, true);
this.DotLocation.push([[Dot_Row_ID,Column_ID,this.Group],[x+Img_Size.New_Width+this.Min_border, y+Img_Size.New_Height/2]]);
context1.fillStyle = 'black';
context1.fill();
}
else if (col == Column_Amount-1) {
// add on left
context1.arc(x-this.Min_border,(y+(Img_Size.New_Height/2)), this.DotRadius, 0, Math.PI * 2, true);
this.DotLocation.push([[Dot_Row_ID,Column_ID,this.Group],[x-this.Min_border, y+Img_Size.New_Height/2]]);
context1.fillStyle = 'black';
context1.fill();
}
else{
console.log("Add on Both: Using Group",this.Group);
//Right
context1.arc((x+Img_Size.New_Width+this.Min_border), (y+(Img_Size.New_Height/2)), this.DotRadius, 0, Math.PI * 2, true);
this.DotLocation.push([[Dot_Row_ID,Column_ID+1,this.Group+1],[x+Img_Size.New_Width+this.Min_border, y+Img_Size.New_Height/2]]);
//Left
context1.arc(x-this.Min_border,(y+(Img_Size.New_Height/2)), this.DotRadius, 0, Math.PI * 2, true);
this.DotLocation.push([[Dot_Row_ID,Column_ID,this.Group],[x-this.Min_border, y+Img_Size.New_Height/2]]);
context1.fillStyle = 'black';
context1.fill();
}
context1.closePath();
}
// Row_ID++;
}
if (col != 0) {
console.log("Change Group");
this.Group++;
Column_ID +2 ;
}
}
},
here is the input datas:
question:[
['assets/GamePic/Cat.png','assets/GamePic/Cat.png','assets/GamePic/Cat.png'],
['assets/GamePic/Cat.png','assets/GamePic/Cat.png','assets/GamePic/Cat.png','assets/GamePic/Cat.png','assets/GamePic/Cat.png'],
['assets/GamePic/Cat.png','assets/GamePic/Cat.png']
],
Thank you for your patient, hopes for your reply.
[1]: https://i.stack.imgur.com/MmxjB.png
[2]: https://i.stack.imgur.com/MoZX6.png