效果
代码
<!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 拼图》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
产品经理修炼之道
费杰 / 机械工业出版社华章公司 / 2012-7-30 / 59.00元
本书由资深产品经理、中国最大的产品经理沙龙Pmcaff创始人费杰亲自执笔，微软、腾讯、百度、新浪、搜狐、奇虎、阿里云、Evernote等国内外20余家大型互联网企业资深产品经理和技术专家联袂推荐。用系统化的方法论和丰富的实战案例解读了优秀产品经理所必须修炼的产品规划能力、产品设计能力、产品执行能力，以及思考、分析和解决问题的能力和方法，旨在为互联网产品经理打造核心竞争力提供实践指导。 全书一......一起来看看 《产品经理修炼之道》 这本书的介绍吧!
HTML 压缩/解压工具
在线压缩/解压 HTML 代码
Base64 编码/解码
Base64 编码/解码