效果
代码
<!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 拼图》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
TCP/IP详解 卷3：TCP事务协议、HTTP、NNTP和UNIX域协议
胡谷雨、吴礼发、W.Richard Stevens / 胡谷雨 / 机械工业出版社 / 2000-9 / 35.00元
《CP.IP详解(卷3):CP事务协议.HP.P和UIX域协议》是“TCP/IP详解系列”的延续。主要内容包括：TCP事务协议，即T/TCP，这是对TCP的扩展，使客户-服务器事务更快、更高效和更可靠；TCP/IP应用，主要是HTTP和NNTP；UNIX域协议，这些协议提供了进程之间通信的一种手段。当客户与服务器进程在同一台主机上时，UNIX域协议通常要比TCP/IP快一倍。《CP.IP详解(卷3......一起来看看 《TCP/IP详解 卷3：TCP事务协议、HTTP、NNTP和UNIX域协议》 这本书的介绍吧!
