如何在同一html页面上添加多个画布

我。现在我需要在同一个页面中添加更多的谜题，我如何使用这个javascript实现这一点。请任何人指导我如何处理这个代码来制作多个拼图，我有javascript的基本技能，我正在尝试为新的拼图添加另一个变量它不起作用

const谜题难度=2；
常量拼图悬停颜色='009900'；
var_期；
var_画布；
var_img；
var_碎片；
var_；宽度；
var_；高度；
Varu片宽；
var_高度；
var_电流片；
var_电流滴管；
var_小鼠；
函数init（）{
_img=新图像（）；
_img.addEventListener（'load'，onImage，false）；
_img.src=”http://lorempixel.com/output/animals-q-g-640-480-3.jpg";
}
函数onImage（e）{
_拼图宽度=数学地板（\u img.width/拼图\u难度）
_拼图高度=数学地板（高度/拼图难度）
_拼图宽度=_拼图宽度*拼图难度；
_拼图高度=_拼图高度*拼图难度；
setCanvas（）；
initPuzzle（）；
}
函数setCanvas（）{
_canvas=document.getElementById（'puzzle'）；
_stage=_canvas.getContext（'2d'）；
_canvas.width=_-width；
_canvas.height=\u高度；
_canvas.style.border=“1px纯黑”；
}
函数initPuzzle（）{
_件数=[]；
_鼠标={
x:0,，
y:0
};
_currentPiece=null；
_currentDropPiece=null；
_stage.drawImage（_img，0，0，_拼图宽度，_拼图高度，0，0，_拼图宽度，_拼图高度）；
createTitle（“点击开始拼图”）；
构建件（）；
}
函数createTitle（msg）{
_stage.fillStyle=“#000000”；
_阶段。全局alpha=.4；
_舞台填充（100，拼图高度-40，拼图宽度-200,40）；
_stage.fillStyle=“#FFFFFF”；
_stage.globalAlpha=1；
_stage.textAlign=“中心”；
_stage.textb基线=“中间”；
_stage.font=“20px Arial”；
_stage.fillText（msg，拼图宽度/2，拼图高度-20）；
}
函数构建块（）{
var i；
var片；
var-xPos=0；
var-yPos=0；
对于（i=0；i=\u宽度）{
xPos=0；
yPos+=\u件高度；
}
}
document.onmousedown=shufflePuzzle；
}
函数shufflePuzzle（）{
_件数=洗牌耳环（_件）；
_阶段.clearRect（0，0，_拼图宽度，_拼图高度）；
var i；
var片；
var-xPos=0；
var-yPos=0；
对于（i=0；i<\u件长度；i++）{
件=_件[i]；
piece.xPos=xPos；
piece.yPos=yPos；
_stage.drawImage（_img，piece.sx，piece.sy，_pieceWidth，_pieceHeight，xPos，yPos，_pieceWidth，_pieceHeight）；
_阶段性strokeRect（XPO、YPO、片宽、片高）；
xPos+=\u片宽；
如果（xPos>=\u宽度）{
xPos=0；
yPos+=\u件高度；
}
}
document.onmousedown=onPuzzleClick；
}
功能点击（e）{
如果（e.layerX | e.layerX==0）{
_mouse.x=e.layerX-_canvas.offsetLeft；
_mouse.y=e.layerY-_canvas.offsetTop；
}else if（e.offsetX | | e.offsetX==0）{
_mouse.x=e.offsetX-_canvas.offsetLeft；
_mouse.y=e.offsetY-_canvas.offsetop；
}
_currentPiece=checkPieceClicked（）；
如果（_currentPiece！=null）{
_stage.clearRect（_currentPiece.xPos、_currentPiece.yPos、_pieceWidth、_pieceHeight）；
_stage.save（）；
_stage.globalAlpha=.9；
_stage.drawImage（_img，_currentPiece.sx，_currentPiece.sy，_pieceWidth，_pieceHeight，_mouse.x-（_pieceWidth/2），_mouse.y-（_pieceHeight/2），_pieceWidth，_pieceHeight）；
_stage.restore（）；
document.onmousemove=updatePuzzle；
document.onmouseup=piecedroped；
}
}
函数checkPieceClicked（）{
var i；
var片；
对于（i=0；i<\u件长度；i++）{
件=_件[i]；
如果（_mouse.x（piece.xPos+_pieceWidth）| | u mouse.y（piece.yPos+_pieceHeight））{
//未击中的碎片
}否则{
返回件；
}
}
返回null；
}
函数updatePuzzle（e）{
_currentDropPiece=null；
如果（e.layerX | e.layerX==0）{
_mouse.x=e.layerX-_canvas.offsetLeft；
_mouse.y=e.layerY-_canvas.offsetTop；
}else if（e.offsetX | | e.offsetX==0）{
_mouse.x=e.offsetX-_canvas.offsetLeft；
_mouse.y=e.offsetY-_canvas.offsetop；
}
_阶段.clearRect（0，0，_拼图宽度，_拼图高度）；
var i；
var片；
对于（i=0；i<\u件长度；i++）{
件=_件[i]；
如果（件==\u当前件）{
继续；
}
_stage.drawImage（_img，piece.sx，piece.sy，_pieceWidth，_pieceHeight，piece.xPos，piece.yPos，_pieceWidth，_pieceHeight）；
_stage.strokeRect（piece.xPos，piece.yPos，_pieceWidth，_pieceHeight）；
如果（_currentDropPiece==null）{
如果（_mouse.x（piece.xPos+_pieceWidth）| | u mouse.y（piece.yPos+_pieceHeight））{
//还没有结束
}否则{
_currentDropPiece=件；
_stage.save（）；
_阶段。全局alpha=.4；
_stage.fillStyle=拼图\悬停\色调；
_stage.fillRect（_currentDropPiece.xPos、_currentDropPiece.yPos、_pieceWidth、_pieceHeight）；
_stage.restore（）；
}
}
}
_stage.save（）；
_阶段。全局alpha=.6；
_stage.drawImage（_img，_currentPiece.sx，_currentPiece.sy，_pieceWidth，_pieceHeight，_mouse.x-（_pieceWidth/2），_mouse.y-（_pieceHeight/2），_pieceWidth，_pieceHeight）；
_stage.restore（）；
_stage.strokeRect（_mouse.x-（_pieceWidth/2），_mouse.y-（_pieceHeight/2），_pieceWidth，_pieceHeight）；
}
函数（e）{
document.onmousemove=null；
document.onmouseup=null；
如果（_currentDropPiece！=null）{
var tmp={
xPos:_currentPiece.xPos，
yPos:_currentPiece.yPos
};
_currentPiece.xPos=\u currentDropPiece.xPos；
_currentPiece.yPos=_currentDropPiece.yPos；
_currentDropPiece.xPos=tmp.xPos；
_currentDropPiece.yPos=tmp.yPos；
}
resetpuzzandcheckwin（）；
}
乐趣