canvas 拼图

ゝ一世哀愁。 2022-03-07 06:22 179阅读 0赞

# 效果 #

![\--\_068][--_068]

# 代码 #

<!DOCTYPE html>
    <html lang="zh_CN">
    <head>
        <meta charset="UTF-8">
        <title>拼图</title>
        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>
    <canvas id="canvas" width="500" height="500">
    </canvas>
    <script>
        let canvas =document.getElementById("canvas");
        let context =canvas.getContext("2d");
        // 图片初始化
        let img=new Image();
        img.src="http://www.w3school.com.cn/i/eg_tulip.jpg";
        // 创建数组保存拼图
        let matrix = new Array(5);
        let number = 0;
        // 初始化图片数组
        for(let i = 0; i < 5; i++){
            matrix[i] = new Array(6);
            for(let j = 0; j < 6; j++){
                matrix[i][j] = number;
                number++;
            }
        }
        // 绘制线函数
        let drawline = () => {
            context.beginPath();
            for(let i = 0; i < 6; i++){
                context.moveTo(i * 66, 0);
                context.lineTo(i * 66, 250);
                context.moveTo(0, i * 50);
                context.lineTo(400, i * 50)
            }
            context.moveTo(6 * 66, 0);
            context.lineTo(6 * 66, 250);
            context.stroke();
        };
        // 打乱图片函数
        let shuffle = () => {
            // for 遍历生成随机数，把生成的随机数进行随机交换
            let row = 5;
            let col = 6;
            for(let i = 0; i < row; i++){
                for(let j = 0; j < col; j++){
                    // 生成一个在此范围内的随机数和当前数组交换
                    let rRow = Math.floor(Math.random() * 5);
                    let rCol = Math.floor(Math.random() * 6);
                    let tmp;
                    // 和当前交换
                    tmp = matrix[i][j];
                    matrix[i][j] = matrix[rRow][rCol];
                    matrix[rRow][rCol] = tmp;
                }
            }
        };
        // 生成白块
        let withBlock = () => {
            matrix[0][5] = 40;
        };
        // 拼图状态判断
        let checkPic = () => {
            for(let i = 0; i < 5; i++){
                for(let j = 0; j < 6; j++){
                    if(i * 6 + j != matrix[i][j] && i * 6 + j != 5){
                        return 0;
                    }
                }
            }
            return 1;
        }
        // 图片绘制函数
        let drawPic = () => {
            context.clearRect(0, 0, 500,500);
            // 行
            for(let i = 0; i < 5; i++){
                // 列
                for(let j = 0; j < 6; j++){
                    // 进行裁剪 图片大小400 * 250  66 * 50
                    // 获取原图所在的行和列
                    // 获取列
                    let col = Math.floor(matrix[i][j] % 6);
                    // 获取图片的行
                    let row = Math.floor(matrix[i][j] / 6);
                    // 进行绘图
                    context.drawImage(img,col * 66, row * 50, 66, 50, j * 66 , i * 50, 66, 50);
                }
            }
            // 绘制线段函数
            drawline();
            if(checkPic()){
                alert("拼图成功");
                location.reload();
            }
        };
        // 移动函数
        let moveLeft = () => {
            // 左边值进行赋值
            matrix[whiteBlock.row][whiteBlock.col] = matrix[whiteBlock.row][whiteBlock.col + 1];
            // 复原空白块
            whiteBlock.col = whiteBlock.col + 1;
            matrix[whiteBlock.row][whiteBlock.col] = 40;
        };
        let moveUp = () => {
            matrix[whiteBlock.row][whiteBlock.col] = matrix[whiteBlock.row + 1][whiteBlock.col];
            whiteBlock.row = whiteBlock.row + 1;
            matrix[whiteBlock.row][whiteBlock.col] = 40;
        };
        let moveRight = () => {
            matrix[whiteBlock.row][whiteBlock.col] = matrix[whiteBlock.row][whiteBlock.col - 1];
            whiteBlock.col = whiteBlock.col - 1;
            matrix[whiteBlock.row][whiteBlock.col] = 40;
        };
        let movedown = () => {
            matrix[whiteBlock.row][whiteBlock.col] = matrix[whiteBlock.row - 1][whiteBlock.col];
            whiteBlock.row = whiteBlock.row - 1;
            matrix[whiteBlock.row][whiteBlock.col] = 40;
        };
        // 定义一个类，用于保存当前空白图像块
        class WhiteBlock{
            row = 0;
            col = 5;
            constructor(){};
        }
        // 打乱顺序
        shuffle();
        // 生成白块
        withBlock();
        // 绘制图片
        drawPic();
        // 生成白块对象
        let whiteBlock = new WhiteBlock();
        // 触发事件进行拼图
        $("body").keydown((event) => {
            // left
            if(event.keyCode == 37 && whiteBlock.col != 5){
                moveLeft();
            }
            // up
            if(event.keyCode == 38 && whiteBlock.row != 4){
                moveUp();
            }
            // right
            if(event.keyCode == 39 && whiteBlock.col != 0){
                moveRight();
            }
            // down
            if(event.keyCode == 40 && whiteBlock.row != 0){
                movedown();
            }
            drawPic();
        });
    </script>
    </body>
    </html>

![图片描述][922584744-5c5f6afc15b99_articlex]

[--_068]: /images/20220307/ce5b47dcc3f44e8e83df858ab5e17dbe.png
[922584744-5c5f6afc15b99_articlex]: /images/20220307/aa673187fc584612a366ec7484d00df5.png