canvas 拼圖

時間 2019-12-21
標籤 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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。