共计 2725 个字符，预计需要花费 7 分钟才能阅读完成。
效果
代码
<!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>
