效果
代码
<!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) => {// leftif(event.keyCode == 37 && whiteBlock.col != 5){moveLeft();}// upif(event.keyCode == 38 && whiteBlock.row != 4){moveUp();}// rightif(event.keyCode == 39 && whiteBlock.col != 0){moveRight();}// downif(event.keyCode == 40 && whiteBlock.row != 0){movedown();}drawPic();});
</script>
</body>
</html>
