1 回答

TA貢獻38條經驗 獲得超46個贊
利用HTML5的canvas,將解鎖的圈圈劃出,利用touch事件解鎖這些圈圈,直接看代碼。
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
? function createCircle() {// 創建解鎖點的坐標,根據canvas的大小來平均分配半徑
?
????????var n = chooseType;// 畫出n*n的矩陣
????????lastPoint = [];
????????arr = [];
????????restPoint = [];
????????r = ctx.canvas.width / (2 + 4 * n);// 公式計算 半徑和canvas的大小有關
????????for (var i = 0 ; i < n ; i++) {
????????????for (var j = 0 ; j < n ; j++) {
????????????????arr.push({
????????????????????x: j * 4 * r + 3 * r,
????????????????????y: i * 4 * r + 3 * r
????????????????});
????????????????restPoint.push({
????????????????????x: j * 4 * r + 3 * r,
????????????????????y: i * 4 * r + 3 * r
????????????????});
????????????}
????????}
????????//return arr;
????}
? ?
canvas里的圓圈畫好之后可以進行事件綁定
添加回答
舉報