效果
代码
<!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 拼图》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Algorithm Design
Jon Kleinberg、Éva Tardos / Addison-Wesley / 2005-3-26 / USD 144.20
Algorithm Design introduces algorithms by looking at the real-world problems that motivate them. The book teaches students a range of design and analysis techniques for problems that arise in compu......一起来看看 《Algorithm Design》 这本书的介绍吧!
