html5 canvas 拼图游戏代码
时间: 2023-07-09 20:48:19 浏览: 86
好的,以下是一个简单的HTML5 Canvas拼图游戏的示例代码,希望能帮到您:
```html
<!DOCTYPE html>
<html>
<head>
<title>拼图游戏</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script>
// 初始化拼图
var pieces = [];
var gridSize = 3;
var pieceSize = 100;
for (var i = 0; i < gridSize; i++) {
for (var j = 0; j < gridSize; j++) {
var piece = {
x: j * pieceSize,
y: i * pieceSize,
width: pieceSize,
height: pieceSize,
imageX: j * pieceSize,
imageY: i * pieceSize,
imageWidth: pieceSize,
imageHeight: pieceSize
};
pieces.push(piece);
}
}
// 打乱拼图
pieces.sort(function() { return 0.5 - Math.random(); });
// 绘制拼图
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var image = new Image();
image.src = "image.jpg";
image.onload = function() {
for (var i = 0; i < pieces.length; i++) {
var piece = pieces[i];
context.drawImage(image, piece.imageX, piece.imageY, piece.imageWidth, piece.imageHeight,
piece.x, piece.y, piece.width, piece.height);
}
};
// 拖动拼图
var selectedPiece = null;
var mouse = {
x: 0,
y: 0
};
canvas.addEventListener("mousedown", function(event) {
mouse.x = event.pageX - canvas.offsetLeft;
mouse.y = event.pageY - canvas.offsetTop;
for (var i = 0; i < pieces.length; i++) {
var piece = pieces[i];
if (piece.x < mouse.x && mouse.x < piece.x + piece.width &&
piece.y < mouse.y && mouse.y < piece.y + piece.height) {
selectedPiece = piece;
break;
}
}
});
canvas.addEventListener("mousemove", function(event) {
if (selectedPiece !== null) {
mouse.x = event.pageX - canvas.offsetLeft;
mouse.y = event.pageY - canvas.offsetTop;
selectedPiece.x = mouse.x - selectedPiece.width / 2;
selectedPiece.y = mouse.y - selectedPiece.height / 2;
context.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < pieces.length; i++) {
var piece = pieces[i];
context.drawImage(image, piece.imageX, piece.imageY, piece.imageWidth, piece.imageHeight,
piece.x, piece.y, piece.width, piece.height);
}
}
});
canvas.addEventListener("mouseup", function(event) {
if (selectedPiece !== null) {
// 将拼图放回原位置
selectedPiece.x = Math.floor(selectedPiece.x / pieceSize) * pieceSize;
selectedPiece.y = Math.floor(selectedPiece.y / pieceSize) * pieceSize;
selectedPiece = null;
}
});
</script>
</body>
</html>
```
请注意,这只是一个简单的示例代码,您可以根据自己的需求进行修改和扩展。