拼图游戏

大作业一：

 拼图游戏 

下载地址：https://download.youkuaiyun.com/download/huang0903/10787351

要求：

       在页面上加载一个图片，将其分成3x3的小块在屏幕上显示在随机的位置。用户可以用鼠标拖动每一块的位置。当用户把所有的小块都放置到正确的位置时，游戏结束。 
加分项：

       可以在拖动拼图时有吸附的效果。可以利用CSS添加适当的动画效果。 

 

效果如图：☛☛☛☛☛☛

部分js代码：

function clip (id, arr) { // 切图
  var el = 'pic'
  var context = document.getElementsByClassName(el)[id - 1].children[0].children[0].getContext('2d')
  var img = new Image()
  document.getElementsByClassName(el)[id - 1].children[0].id = 'canv' + arr.id
  img.src = './img/img1.jpg'
  img.onload = function () {
    if (id === 0) {
      context.drawImage(img, 0, 0)
    } else {
      context.drawImage(img, arr.x, arr.y, 450, 450, 0, 0, 450, 450)
    }
  }
}