前端开发canvas 连连看
摘要： 前端开发如何实现后台调用 如何提高前端开发 做前端开发时后端如何解决 html 代码 <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″ /> ……
| 前端开发如何实现后台调用 |
| 如何提高前端开发 |
| 做前端开发时后端如何解决 |
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<title></title>
<style>
#wrap {
width: 672px;
height: 432px;
margin: 10px auto;
}
#canvas {
display: block;
margin: 10px auto;
border: 1px solid #b9b9b9;
}
.Mtop {
margin-top: 10px;
}
#tipNum {
margin-left: 20px;
}
</style>
</head>
<body>
<div id=”wrap”>
<div class=”Mtop”>
<span id=”lv”>Lv1</span> <span id=”tipNum”>提示数：0次</span>
</div>
<div class=”Mtop”><button id=”tip”>提示</button></div>
<canvas id=”canvas” width=”672″ height=”432″></canvas>
</div>
<script>
var canvas = document.getElementById(‘canvas’)
var ctx = canvas.getContext(‘2d’)
var arr = [] // 二维数组，标记不同图形及空位
var holdP = { x: -1, y: -1 } // 选中的图形位置
var clear = false // 是否清除
var clearTime // 清除的时间
var onePoint // 第一个折点
var twoPoint // 第二个折点
var out_w = 42,
out_h = 48 // 一个格子的宽高
var in_w = 41,
in_h = 47 // 一个格子的宽高（不包括左上边框）
var level = 1 // 等级
var lvCount = 18 // 当前等级的不同类个数
var tipNum = 0 // 提示数
for (var j = 0; j < 9; j++) {
arr[j] = []
for (var i = 0; i < 16; i++) {
arr[j][i] = -1
}
}
var img = new Image()
;(img.src =
‘http://cdn.attach.qdfuns.com/notes/pics/201704/10/191012k72zfv1dj9x11a55.jpg’),
(img.onload = function() {
init()
})
function init() {
$(‘#lv’).text(‘Lv’ + level)
switch (level) {
case 1:
lvCount = 18
break
case 2:
lvCount = 24
break
case 3:
lvCount = 24
break
case 4:
lvCount = 24
break
case 5:
lvCount = 24
break
case 6:
lvCount = 24
break
case 7:
lvCount = 24
break
case 8:
lvCount = 36
break
}
for (var j = 0; j < 9; j++) {
for (var i = 0; i < 16; i++) {
if (i % 2 == 0) {
var t = Math.floor(Math.random() * lvCount)
arr[j][i] = t
arr[j][i + 1] = t
}
}
}
for (var j = 0; j < 9; j++) {
for (var i = 0; i < 16; i++) {
var x = Math.floor(Math.random() * 9)
var y = Math.floor(Math.random() * 16)
if (!(x == j && y == i)) {
var temp = arr[x][y]
arr[x][y] = arr[j][i]
arr[j][i] = temp
}
}
}
drawBall()
}
function drawBall() {
var ff = true
for (var j = 0; j < 9; j++) {
for (var i = 0; i < 16; i++) {
var t = arr[j][i]
if (t != -1) {
ctx.drawImage(
img,
1,
out_h * t + 1,
in_w,
in_h,
out_w * i + 1,
out_h * j + 1,
in_w,
in_h,
)
ff = false
}
}
}
if (ff) {
level++
init()
alert(‘you win’)
return
}
if (holdP.x != -1) {
var t = arr[holdP.y][holdP.x]
ctx.drawImage(
img,
1 + out_w,
out_h * t + 1,
in_w,
in_h,
out_w * holdP.x + 1,
out_h * holdP.y + 1,
in_w,
in_h,
)
}
}
canvas.onmousemove = function(ev) {
var x = ev.offsetX
var y = ev.offsetY
var i = Math.floor(x / out_w)
var j = Math.floor(y / out_h)
if (j == 9 || i == 16 || i == -1 || j == -1) {
return
}
// if(clear){
// var nowTime = new Date().getTime();
// if(nowTime-clearTime<200){
// return;
// }else{
// clear = false;
// }
// }
if (arr[j][i] == -1) {
return
}
ctx.clearRect(0, 0, canvas.width, canvas.height)
drawBall()
ctx.strokeStyle = ‘#E61A2E’
ctx.strokeRect(i * out_w, j * out_h, 42, 48)
}
canvas.onclick = function(ev) {
var x = ev.offsetX
var y = ev.offsetY
var i = Math.floor(x / out_w)
var j = Math.floor(y / out_h)
var t = arr[j][i]
if (holdP.x == i && holdP.y == j) {
return
}
if (arr[j][i] == -1) {
return
}
if (holdP.x != -1 && holdP.y != -1) {
if (arr[j][i] == arr[holdP.y][holdP.x]) {
if (judge(i, j)) {
ctx.drawImage(
img,
1 + out_w,
out_h * arr[j][i] + 1,
in_w,
in_h,
out_w * i + 1,
out_h * j + 1,
in_w,
in_h,
)
connectLine(i, j, holdP.x, holdP.y)
eliminateInit(i, j)
clear = true
clearTime = new Date().getTime()
setTimeout(function() {
clear = false
ctx.clearRect(0, 0, canvas.width, canvas.height)
drawBall()
}, 200)
return
}
}
}
holdP.x = i
holdP.y = j
ctx.drawImage(
img,
1 + out_w,
out_h * t + 1,
in_w,
in_h,
out_w * i + 1,
out_h * j + 1,
in_w,
in_h,
)
}
// 消除后置空
function eliminateInit(i, j) {
arr[j][i] = -1
arr[holdP.y][holdP.x] = -1
switch (level) {
case 1:
break
case 2:
LevelBottom(i, j)
break
case 3:
break
case 4:
LevelBottom(i, j)
break
case 5:
LevelTop(i, j)
break
case 6:
LevelLeft(i, j)
break
case 7:
LevelRight(i, j)
break
}
holdP.x = -1
holdP.y = -1
tipMethod()
}
// 连接线
function connectLine(x0, y0, x1, y1) {
var a = judge(x0, y0, x1, y1)
if (a == 1) {
drawLine(x1, y1, x0, y0)
} else if (a == 2) {
drawLine(x1, y1, onePoint.x, onePoint.y)
drawLine(onePoint.x, onePoint.y, x0, y0)
} else if (a == 3) {
drawLine(x1, y1, twoPoint.x, twoPoint.y)
drawLine(twoPoint.x, twoPoint.y, onePoint.x, onePoint.y)
drawLine(onePoint.x, onePoint.y, x0, y0)
}
}
// 判断
function judge(i, j, _x, _y) {
var x = _x != void 0 ? _x : holdP.x
var y = _y != void 0 ? _y : holdP.y
if (judgeComm(x, y, i, j)) {
return 1
}
if (judgeOneFold(x, y, i, j)) {
return 2
}
if (judgeTwoFold(x, y, i, j)) {
return 3
}
return 0
}
// 一折
function judgeOneFold(x0, y0, x1, y1) {
var a1 = arr[y0][x1]
var a2 = arr[y1][x0]
if (x0 == x1 || y0 == y1) {
return false
}
if (
a2 == -1 &&
judgeComm(x0, y0, x0, y1) &&
judgeComm(x0, y1, x1, y1)
) {
onePoint = { x: x0, y: y1 }
return true
}
if (
a1 == -1 &&
judgeComm(x0, y0, x1, y0) &&
judgeComm(x1, y0, x1, y1)
) {
onePoint = { x: x1, y: y0 }
return true
}
return false
}
// 两折
function judgeTwoFold(x0, y0, x1, y1) {
var d = []
var k = y0 + 1
while (k < 9 && arr[k][x0] == -1) {
d.push({ x: x0, y: k })
k = k + 1
}
var k = y0 – 1
while (k >= 0 && arr[k][x0] == -1) {
d.push({ x: x0, y: k })
k = k – 1
}
var ff = false
for (var p = 0; p < d.length; p++) {
var temp_x = d[p].x
var temp_y = d[p].y
if (judgeOneFold(temp_x, temp_y, x1, y1)) {
ff = true
twoPoint = { x: temp_x, y: temp_y }
break
}
}
var d = []
var k = x0 + 1
while (k < 16 && arr[y0][k] == -1) {
d.push({ x: k, y: y0 })
k = k + 1
}
var k = x0 – 1
while (k >= 0 && arr[y0][k] == -1) {
d.push({ x: k, y: y0 })
k = k – 1
}
for (var p = 0; p < d.length; p++) {
var temp_x = d[p].x
var temp_y = d[p].y
if (judgeOneFold(temp_x, temp_y, x1, y1)) {
ff = true
twoPoint = { x: temp_x, y: temp_y }
break
}
}
return ff
}
// 横线或竖线
function judgeComm(x0, y0, x1, y1) {
if (x0 == x1) {
var d = y1 – y0
var a = d / Math.abs(d)
var ff = true
var k = y0 + a
while (k != y1) {
if (arr[k][x0] != -1) {
ff = false
break
}
k = k + a
}
return ff
}
if (y0 == y1) {
var d = x1 – x0
var a = d / Math.abs(d)
var ff = true
var k = x0 + a
while (k != x1) {
if (arr[y0][k] != -1) {
ff = false
break
}
k = k + a
}
return ff
}
return false
}
function drawLine(x0, y0, x1, y1) {
ctx.beginPath()
ctx.strokeStyle = ‘#FF9900’
ctx.moveTo(x0 * out_w + out_w / 2, y0 * out_h + out_h / 2)
ctx.lineTo(x1 * out_w + out_w / 2, y1 * out_h + out_h / 2)
ctx.closePath()
ctx.stroke()
}
function LevelTop(i, j) {
if (holdP.y < j) {
var x = holdP.x
var y = holdP.y
holdP.x = i
holdP.y = j
i = x
j = y
}
var k = j
while (k != 0) {
arr[k][i] = arr[k – 1][i]
arr[k – 1][i] = -1
k–
}
var k = holdP.y
while (k != 0) {
arr[k][holdP.x] = arr[k – 1][holdP.x]
arr[k – 1][holdP.x] = -1
k–
}
}
function LevelBottom(i, j) {
if (holdP.y > j) {
var x = holdP.x
var y = holdP.y
holdP.x = i
holdP.y = j
i = x
j = y
}
var k = j
while (k != 8) {
arr[k][i] = arr[k + 1][i]
arr[k + 1][i] = -1
k++
}
var k = holdP.y
while (k != 8) {
arr[k][holdP.x] = arr[k + 1][holdP.x]
arr[k + 1][holdP.x] = -1
k++
}
}
function LevelLeft(i, j) {
if (holdP.x > i) {
var x = holdP.x
var y = holdP.y
holdP.x = i
holdP.y = j
i = x
j = y
}
var k = i
while (k != 15) {
arr[j][k] = arr[j][k + 1]
arr[j][k + 1] = -1
k++
}
var k = holdP.x
while (k != 15) {
arr[holdP.y][k] = arr[holdP.y][k + 1]
arr[holdP.y][k + 1] = -1
k++
}
}
function LevelRight(i, j) {
if (holdP.x < i) {
var x = holdP.x
var y = holdP.y
holdP.x = i
holdP.y = j
i = x
j = y
}
var k = i
while (k != 0) {
arr[j][k] = arr[j][k – 1]
arr[j][k – 1] = -1
k–
}
var k = holdP.x
while (k != 0) {
arr[holdP.y][k] = arr[holdP.y][k – 1]
arr[holdP.y][k – 1] = -1
k–
}
}
// 提示
function tip(turn) {
var hasSame = false
outer: for (var j = 0; j < 9; j++) {
for (var i = 0; i < 16; i++) {
var t = arr[j][i]
if (t != -1) {
for (var j2 = 0; j2 < 9; j2++) {
for (var i2 = 0; i2 < 16; i2++) {
var t2 = arr[j2][i2]
if (i == i2 && j == j2) {
continue
}
if (t2 != -1) {
if (arr[j][i] == arr[j2][i2]) {
if (judge(i, j, i2, j2)) {
hasSame = true
if (turn) {
ctx.drawImage(
img,
1 + out_w,
out_h * t + 1,
in_w,
in_h,
out_w * i + 1,
out_h * j + 1,
in_w,
in_h,
)
ctx.drawImage(
img,
1 + out_w,
out_h * t2 + 1,
in_w,
in_h,
out_w * i2 + 1,
out_h * j2 + 1,
in_w,
in_h,
)
connectLine(i, j, i2, j2)
}
break outer
}
}
}
}
}
}
}
}
return hasSame
}
// 无解时打乱顺序
function tipMethod() {
if (!tip()) {
// 打乱顺序
for (var j = 0; j < 9; j++) {
for (var i = 0; i < 16; i++) {
var x = Math.floor(Math.random() * 9)
var y = Math.floor(Math.random() * 16)
if (
!(x == j && y == i) &&
arr[j][i] != -1 &&
arr[x][y] != -1
) {
var temp = arr[x][y]
arr[x][y] = arr[j][i]
arr[j][i] = temp
}
}
}
ctx.clearRect(0, 0, canvas.width, canvas.height)
drawBall()
tipMethod()
}
}
// 点击“提示”按钮
$(‘#tip’).click(function() {
tipNum++
$(‘#tipNum’).text(‘提示数：’ + tipNum + ‘次’)
tip(true)
})
</script>
</body>
</html>
包括外部连线
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<title></title>
<style>
#wrap {
width: 672px;
height: 432px;
margin: 10px auto;
}
#canvas {
display: block;
margin: 20px auto;
border: 1px solid #b9b9b9;
}
.Mtop {
margin-top: 10px;
}
#tipNum {
margin-left: 20px;
}
</style>
</head>
<body>
<div id=”wrap”>
<div class=”Mtop”>
<span id=”lv”>Lv1</span> <span id=”tipNum”>提示数：0次</span>
</div>
<div class=”Mtop”><button id=”tip”>提示</button></div>
<!– 672 432 –>
<canvas id=”canvas” width=”756″ height=”528″></canvas>
</div>
<script>
var canvas = document.getElementById(‘canvas’)
var ctx = canvas.getContext(‘2d’)
var arr = [] // 二维数组，标记不同图形及空位
var holdP = { x: -1, y: -1 } // 选中的图形位置
var clear = false // 是否清除
var clearTime // 清除的时间
var onePoint // 第一个折点
var twoPoint // 第二个折点
var out_w = 42,
out_h = 48 // 一个格子的宽高
var in_w = 41,
in_h = 47 // 一个格子的宽高（不包括左上边框）
var level = 1 // 等级
var lvCount = 18 // 当前等级的不同类个数
var tipNum = 0 // 提示数
for (var j = 0; j < 11; j++) {
arr[j] = []
for (var i = 0; i < 18; i++) {
arr[j][i] = -1 // 初始化全空
}
}
var img = new Image()
;(img.src =
‘http://cdn.attach.qdfuns.com/notes/pics/201704/10/191012k72zfv1dj9x11a55.jpg’),
(img.onload = function() {
init()
})
function init() {
$(‘#lv’).text(‘Lv’ + level)
switch (level) {
case 1:
lvCount = 18
break
case 2:
lvCount = 24
break
case 3:
lvCount = 24
break
case 4:
lvCount = 24
break
case 5:
lvCount = 24
break
case 6:
lvCount = 24
break
case 7:
lvCount = 24
break
case 8:
lvCount = 36
break
}
for (var j = 1; j < 10; j++) {
for (var i = 1; i < 17; i++) {
if (i % 2 != 0) {
var t = Math.floor(Math.random() * lvCount) // lvCount 种不同图形随机选一个
arr[j][i] = t
arr[j][i + 1] = t
}
}
}
// 打乱顺序
for (var j = 1; j < 10; j++) {
for (var i = 1; i < 17; i++) {
var x = Math.floor(Math.random() * 9 + 1)
var y = Math.floor(Math.random() * 16 + 1)
if (!(x == j && y == i)) {
var temp = arr[x][y]
arr[x][y] = arr[j][i]
arr[j][i] = temp
}
}
}
// for(var j=1;j<10;j++){
// for(var i=1;i<17;i++){
// var t = arr[j][i];
// if(t!=-1){
// ctx.fillStyle = “#fff”;
// ctx.rect(out_w*i,out_h*j,out_w,out_h);
// ctx.fill();
// }
// }
// }
drawBall()
}
// 画连连看图形
function drawBall() {
var ff = true
for (var j = 1; j < 10; j++) {
for (var i = 1; i < 17; i++) {
var t = arr[j][i]
if (t != -1) {
ctx.drawImage(
img,
1,
out_h * t + 1,
in_w,
in_h,
out_w * i + 1,
out_h * j + 1,
in_w,
in_h,
)
ff = false
}
}
}
if (ff) {
level++
init()
alert(‘you win’)
return
}
if (holdP.x != -1) {
var t = arr[holdP.y][holdP.x]
ctx.drawImage(
img,
1 + out_w,
out_h * t + 1,
in_w,
in_h,
out_w * holdP.x + 1,
out_h * holdP.y + 1,
in_w,
in_h,
)
}
}
canvas.onmousemove = function(ev) {
var x = ev.offsetX
var y = ev.offsetY
var i = Math.floor(x / out_w)
var j = Math.floor(y / out_h)
if (j > 10 || i > 17 || i < 0 || j < 0) {
return
}
// if(clear){
// var nowTime = new Date().getTime();
// if(nowTime-clearTime<200){
// return;
// }else{
// clear = false;
// }
// }
if (arr[j][i] == -1) {
return
}
ctx.clearRect(0, 0, canvas.width, canvas.height)
drawBall()
ctx.strokeStyle = ‘#E61A2E’
ctx.strokeRect(i * out_w, j * out_h, 42, 48)
}
canvas.onclick = function(ev) {
var x = ev.offsetX
var y = ev.offsetY
var i = Math.floor(x / out_w)
var j = Math.floor(y / out_h)
var t = arr[j][i]
if (holdP.x == i && holdP.y == j) {
return
}
if (arr[j][i] == -1) {
return
}
if (holdP.x != -1) {
if (arr[j][i] == arr[holdP.y][holdP.x]) {
if (judge(i, j)) {
ctx.drawImage(
img,
1 + out_w,
out_h * arr[j][i] + 1,
in_w,
in_h,
out_w * i + 1,
out_h * j + 1,
in_w,
in_h,
)
connectLine(i, j, holdP.x, holdP.y)
eliminateInit(i, j)
clear = true
clearTime = new Date().getTime()
setTimeout(function() {
clear = false
ctx.clearRect(0, 0, canvas.width, canvas.height)
drawBall()
}, 200)
return
}
}
}
holdP.x = i
holdP.y = j
ctx.drawImage(
img,
1 + out_w,
out_h * t + 1,
in_w,
in_h,
out_w * i + 1,
out_h * j + 1,
in_w,
in_h,
)
}
// 消除后置空
function eliminateInit(i, j) {
arr[j][i] = -1
arr[holdP.y][holdP.x] = -1
switch (level) {
case 1:
break
case 2:
LevelBottom(i, j)
break
case 3:
break
case 4:
LevelBottom(i, j)
break
case 5:
LevelTop(i, j)
break
case 6:
LevelLeft(i, j)
break
case 7:
LevelRight(i, j)
break
}
holdP.x = -1
holdP.y = -1
tipMethod()
}
// 连接线
function connectLine(x0, y0, x1, y1) {
var a = judge(x0, y0, x1, y1)
if (a == 1) {
drawLine(x1, y1, x0, y0)
} else if (a == 2) {
drawLine(x1, y1, onePoint.x, onePoint.y)
drawLine(onePoint.x, onePoint.y, x0, y0)
} else if (a == 3) {
drawLine(x1, y1, twoPoint.x, twoPoint.y)
drawLine(twoPoint.x, twoPoint.y, onePoint.x, onePoint.y)
drawLine(onePoint.x, onePoint.y, x0, y0)
}
}
// 判断
function judge(i, j, _x, _y) {
var x = _x ? _x : holdP.x
var y = _y ? _y : holdP.y
if (judgeComm(x, y, i, j)) {
return 1
}
if (judgeOneFold(x, y, i, j)) {
return 2
}
if (judgeTwoFold(x, y, i, j)) {
return 3
}
return 0
}
// 判断一折
function judgeOneFold(x0, y0, x1, y1) {
var a1 = arr[y0][x1]
var a2 = arr[y1][x0]
if (x0 == x1 || y0 == y1) {
return false
}
if (
a2 == -1 &&
judgeComm(x0, y0, x0, y1) &&
judgeComm(x0, y1, x1, y1)
) {
onePoint = { x: x0, y: y1 }
return true
}
if (
a1 == -1 &&
judgeComm(x0, y0, x1, y0) &&
judgeComm(x1, y0, x1, y1)
) {
onePoint = { x: x1, y: y0 }
return true
}
return false
}
// 判断两折
function judgeTwoFold(x0, y0, x1, y1) {
var d = []
var k = y0 + 1
while (k < 11 && arr[k][x0] == -1) {
d.push({ x: x0, y: k })
k = k + 1
}
var k = y0 – 1
while (k >= 0 && arr[k][x0] == -1) {
d.push({ x: x0, y: k })
k = k – 1
}
var ff = false
for (var p = 0; p < d.length; p++) {
var temp_x = d[p].x
var temp_y = d[p].y
if (judgeOneFold(temp_x, temp_y, x1, y1)) {
ff = true
twoPoint = { x: temp_x, y: temp_y }
break
}
}
var d = []
var k = x0 + 1
while (k < 18 && arr[y0][k] == -1) {
d.push({ x: k, y: y0 })
k = k + 1
}
var k = x0 – 1
while (k >= 0 && arr[y0][k] == -1) {
d.push({ x: k, y: y0 })
k = k – 1
}
for (var p = 0; p < d.length; p++) {
var temp_x = d[p].x
var temp_y = d[p].y
if (judgeOneFold(temp_x, temp_y, x1, y1)) {
ff = true
twoPoint = { x: temp_x, y: temp_y }
break
}
}
return ff
}
// 判断横线或竖线
function judgeComm(x0, y0, x1, y1) {
if (x0 == x1) {
var d = y1 – y0
var a = d / Math.abs(d)
var ff = true
var k = y0 + a
while (k != y1) {
if (arr[k][x0] != -1) {
ff = false
break
}
k = k + a
}
return ff
}
if (y0 == y1) {
var d = x1 – x0
var a = d / Math.abs(d)
var ff = true
var k = x0 + a
while (k != x1) {
if (arr[y0][k] != -1) {
ff = false
break
}
k = k + a
}
return ff
}
return false
}
// 画直线
function drawLine(x0, y0, x1, y1) {
ctx.beginPath()
ctx.strokeStyle = ‘#FF9900’
ctx.moveTo(x0 * out_w + out_w / 2, y0 * out_h + out_h / 2)
ctx.lineTo(x1 * out_w + out_w / 2, y1 * out_h + out_h / 2)
ctx.closePath()
ctx.stroke()
}
function LevelTop(i, j) {
if (holdP.y < j) {
var x = holdP.x
var y = holdP.y
holdP.x = i
holdP.y = j
i = x
j = y
}
var k = j
while (k != 1) {
arr[k][i] = arr[k – 1][i]
arr[k – 1][i] = -1
k–
}
var k = holdP.y
while (k != 1) {
arr[k][holdP.x] = arr[k – 1][holdP.x]
arr[k – 1][holdP.x] = -1
k–
}
}
function LevelBottom(i, j) {
if (holdP.y > j) {
var x = holdP.x
var y = holdP.y
holdP.x = i
holdP.y = j
i = x
j = y
}
var k = j
while (k != 9) {
arr[k][i] = arr[k + 1][i]
arr[k + 1][i] = -1
k++
}
var k = holdP.y
while (k != 9) {
arr[k][holdP.x] = arr[k + 1][holdP.x]
arr[k + 1][holdP.x] = -1
k++
}
}
function LevelLeft(i, j) {
if (holdP.x > i) {
var x = holdP.x
var y = holdP.y
holdP.x = i
holdP.y = j
i = x
j = y
}
var k = i
while (k != 16) {
arr[j][k] = arr[j][k + 1]
arr[j][k + 1] = -1
k++
}
var k = holdP.x
while (k != 16) {
arr[holdP.y][k] = arr[holdP.y][k + 1]
arr[holdP.y][k + 1] = -1
k++
}
}
function LevelRight(i, j) {
if (holdP.x < i) {
var x = holdP.x
var y = holdP.y
holdP.x = i
holdP.y = j
i = x
j = y
}
var k = i
while (k != 1) {
arr[j][k] = arr[j][k – 1]
arr[j][k – 1] = -1
k–
}
var k = holdP.x
while (k != 1) {
arr[holdP.y][k] = arr[holdP.y][k – 1]
arr[holdP.y][k – 1] = -1
k–
}
}
function tip(turn) {
var hasSame = 0
outer: for (var j = 1; j < 10; j++) {
for (var i = 1; i < 17; i++) {
var t = arr[j][i]
if (t != -1) {
for (var j2 = 1; j2 < 10; j2++) {
for (var i2 = 1; i2 < 17; i2++) {
var t2 = arr[j2][i2]
if (i == i2 && j == j2) {
continue
}
if (t2 != -1) {
if (arr[j][i] == arr[j2][i2]) {
if (judge(i, j, i2, j2)) {
hasSame = true
if (turn) {
ctx.drawImage(
img,
1 + out_w,
out_h * t + 1,
in_w,
in_h,
out_w * i + 1,
out_h * j + 1,
in_w,
in_h,
)
ctx.drawImage(
img,
1 + out_w,
out_h * t2 + 1,
in_w,
in_h,
out_w * i2 + 1,
out_h * j2 + 1,
in_w,
in_h,
)
connectLine(i, j, i2, j2)
}
console.log(i, j, i2, j2)
break outer
}
}
}
}
}
}
}
}
return hasSame
}
function tipMethod() {
if (!tip()) {
// 打乱顺序
for (var j = 1; j < 10; j++) {
for (var i = 1; i < 17; i++) {
var x = Math.floor(Math.random() * 9 + 1)
var y = Math.floor(Math.random() * 16 + 1)
if (
!(x == j && y == i) &&
arr[j][i] != -1 &&
arr[x][y] != -1
) {
var temp = arr[x][y]
arr[x][y] = arr[j][i]
arr[j][i] = temp
}
}
}
ctx.clearRect(0, 0, canvas.width, canvas.height)
drawBall()
tipMethod()
}
}
// 点击“提示”按钮
$(‘#tip’).click(function() {
tipNum++
$(‘#tipNum’).text(‘提示数：’ + tipNum + ‘次’)
tip(true)
})
</script>
</body>
</html>
| 前端如何使用开发者工具查问题 |
| 前端开发时如何真机模拟 |
| 前端开发如何调用本地相机 |
» 本文来自：前端开发者 » 《前端开发canvas 连连看》
» 本文链接地址：https://www.rokub.com/6844.html
» 您也可以订阅本站：https://www.rokub.com
近期评论