Javascript 如何使用拖放移动画布？_Javascript_Html

Javascript 如何使用拖放移动画布？

javascript html

Javascript 如何使用拖放移动画布？,javascript,html,Javascript,Html,--html-- 滑动拼图容易的硬的 ---JavaScript <!doctype html> <html> <head> </head> <body> <div id="title"> <h2>Sliding Puzzle</h2> </div> <div id="slider"> <form> <la

--html--


滑动拼图
容易的
硬的

---JavaScript

<!doctype html>
<html>
<head>
</head>


<body>
  <div id="title">
    <h2>Sliding Puzzle</h2>
  </div>
  <div id="slider">
    <form>
      <label>Easy</label>
      <input type="range" id="scale" value="4" min="3" max="5" step="1">
      <label>Hard</label>
    </form>
    <br>
  </div>


  <div id="main" class="main">
    <canvas id="puzzle" width="480px" height="480px"></canvas>
  </div>
  <script src="sliding.js"></script>
</body>
</html>

var context=document.getElementById（'puzzle'）.getContext（'2d'）；
var img=新图像（）；
img.src='img1.jpg'；
img.addEventListener（'load'，drawTiles，false）；
var boardSize=document.getElementById（'puzzle'）。宽度；
var tileCount=document.getElementById（'scale'）。值；
var tileSize=板尺寸/tileCount；
var clickLoc=新对象；
点击LOC.x=0；
点击位置y=0；
var emptyLoc=新对象；
emptyLoc.x=0；
y=0；
var=false；
var boardParts=新对象；
立根板（）；
document.getElementById（'scale'）。onchange=function（）{
tileCount=this.value；
tileSize=板尺寸/tileCount；
立根板（）；
drawTiles（）；
};
document.getElementById（'puzzle'）.onmousemove=function（e）{
单击loc.x=数学楼层（（e.pageX-this.offsetLeft）/tileSize）；
单击loc.y=数学地板（（e.pageY-this.offsetTop）/tileSize）；
};
document.getElementById（'puzzle'）。onclick=function（）{
if（距离（点击位置x、点击位置y、空位置x、空位置y）=1）{
幻灯片（清空、点击锁定）；
drawTiles（）；
}
如果（已解决）{
setTimeout（函数（）{alert（“你解决了！”）；}，500）；
}
};
函数setBoard（）{
boardParts=新阵列（tileCount）；
对于（变量i=0；i


这可以正常工作，但我不习惯使用拖放来移动拼图项目（本例适用于单击事件。（onmousemove，onclick）我如何重写这些函数来处理拖放（仅限于JavaScript和html）你不能使用jquery吗？如果有一个受支持且经过良好测试的库来执行此操作，那么在纯javascript中进行拖放是浪费时间的。请选择“否”，我不能仅使用jquary.js。如果你知道如何使用js进行拖放，请帮助我。
var context = document.getElementById('puzzle').getContext('2d');

var img = new Image();
img.src = 'img1.jpg';
img.addEventListener('load', drawTiles, false);

var boardSize = document.getElementById('puzzle').width;
var tileCount = document.getElementById('scale').value;

var tileSize = boardSize / tileCount;

var clickLoc = new Object;
clickLoc.x = 0;
clickLoc.y = 0;

var emptyLoc = new Object;
emptyLoc.x = 0;
emptyLoc.y = 0;

var solved = false;

var boardParts = new Object;
setBoard();

document.getElementById('scale').onchange = function() {
  tileCount = this.value;
  tileSize = boardSize / tileCount;
  setBoard();
  drawTiles();
};

document.getElementById('puzzle').onmousemove = function(e) {
  clickLoc.x = Math.floor((e.pageX - this.offsetLeft) / tileSize);
  clickLoc.y = Math.floor((e.pageY - this.offsetTop) / tileSize);
};

document.getElementById('puzzle').onclick = function() {
  if (distance(clickLoc.x, clickLoc.y, emptyLoc.x, emptyLoc.y) == 1) {
    slideTile(emptyLoc, clickLoc);
    drawTiles();
  }
  if (solved) {
    setTimeout(function() {alert("You solved it!");}, 500);
  }
};

function setBoard() {
  boardParts = new Array(tileCount);
  for (var i = 0; i < tileCount; ++i) {
    boardParts[i] = new Array(tileCount);
    for (var j = 0; j < tileCount; ++j) {
      boardParts[i][j] = new Object;
      boardParts[i][j].x = (tileCount - 1) - i;
      boardParts[i][j].y = (tileCount - 1) - j;
    }
  }
  emptyLoc.x = boardParts[tileCount - 1][tileCount - 1].x;
  emptyLoc.y = boardParts[tileCount - 1][tileCount - 1].y;
  solved = false;
}

function drawTiles() {
  context.clearRect ( 0 , 0 , boardSize , boardSize );
  for (var i = 0; i < tileCount; ++i) {
    for (var j = 0; j < tileCount; ++j) {
      var x = boardParts[i][j].x;
      var y = boardParts[i][j].y;
      if(i != emptyLoc.x || j != emptyLoc.y || solved == true) {
        context.drawImage(img, x * tileSize, y * tileSize, tileSize, tileSize,
            i * tileSize, j * tileSize, tileSize, tileSize);
      }
    }
  }
}

function distance(x1, y1, x2, y2) {
  return Math.abs(x1 - x2) + Math.abs(y1 - y2);
}

function slideTile(toLoc, fromLoc) {
  if (!solved) {
    boardParts[toLoc.x][toLoc.y].x = boardParts[fromLoc.x][fromLoc.y].x;
    boardParts[toLoc.x][toLoc.y].y = boardParts[fromLoc.x][fromLoc.y].y;
    boardParts[fromLoc.x][fromLoc.y].x = tileCount - 1;
    boardParts[fromLoc.x][fromLoc.y].y = tileCount - 1;
    toLoc.x = fromLoc.x;
    toLoc.y = fromLoc.y;
    checkSolved();
  }
}

function checkSolved() {
  var flag = true;
  for (var i = 0; i < tileCount; ++i) {
    for (var j = 0; j < tileCount; ++j) {
      if (boardParts[i][j].x != i || boardParts[i][j].y != j) {
        flag = false;
      }
    }
  }
  solved = flag;
}