找回密码
当前位置：前端开发者 > HTML > 正文

前端开发canvas 连连看

2018-11-28 分类：HTML 阅读(724) 评论(0)
前端开发如何实现后台调用
如何提高前端开发
做前端开发时后端如何解决

html 代码

<!DOCTYPE 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>
        <script src=”https://libs.baidu.com/jquery/1.9.1/jquery.min.js”></script>
    </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>
        <script src=”https://libs.baidu.com/jquery/1.9.1/jquery.min.js”></script>
    </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>
前端如何使用开发者工具查问题
前端开发时如何真机模拟
前端开发如何调用本地相机
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论