canvas 拼图

laxexue

2019-06-30

效果

canvas 拼图

代码

<!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>

canvas 拼图