1

上からタイルを選択し、そのタイルを下のキャンバス領域に「スタンプ」できる「タイルスタンパー」アプリケーションを作成しようとしました。基本的に、これはHTML5ゲームのマップエディターと考えることができます。

選択とスタンプを除いてすべてが機能しています：http：//www.exeneva.com/html5/tileStamper

JSエラーコンソールには、イベントリスナーが正しくないと表示されますが、それらが有効であると100％確信しています。

// Event listeners
theCanvas.addEventListener("mousemove", onMouseMove, false);   
theCanvas.addEventListener("click", onMouseClick, false);

これが私のマウスの動きとマウスクリック処理コードです：

function onMouseMove(e) {
  // Accounts for the canvas not being at the top left of screen
  mouseX = e.clientX - theCanvas.offsetLeft;
  mouseY = e.clientY - theCanvas.offsetTop;
}

function onMouseClick(e) {
  console.log("click: " + mouseX + "," + mouseY);
  if (mouseY < 128) {
    // Find tile to highlight
    var totalRows = 7; // 8 total rows, but relative zero means we use 7
    var col = Math.floor(mouseX / tileLength);
    var row = Math.floor(mouseY / tileLength);
    var tileId = (row * totalRows) + (col + row);
    highlightTile(tileId, col * tileLength, row * tileLength);
  } else {
    // stamp the selected tile
    var col = Math.floor(mouseX / tileLength);
    var row = Math.floor(mouseY / tileLength);
    context.putImageData(imageData, col * tileLength, row * tileLength);
  }
}

タイルの強調表示コードは次のとおりです。

function highlightTile(tileId, x, y) {
  // redraw tilesheet and highlight selected tile
  context.fillStyle = "#aaaaaa";
  context.fillRect(0, 0, 256, 128);
  drawTileSheet();

  imageData = context.getImageData(x, y, 32, 32);
  // set alpha to 128
  for (j = 3; j < imageData.data.length; j += 4) {
    imageData.data[j] = 128;
  }

  // draw red line around selected tile
  var startX = Math.floor(tileId % 8) * 32;
  var startY = Math.floor(tileId / 8) * 32;
  context.strokeStyle = "red";
  context.strokeRect(startX, startY, 32, 32);
}

誰かがこれが機能しない理由を理解するのを手伝ってもらえますか？

4

2 に答える 2

3

この行によると：

var theCanvas = $("#canvasOne");

theCanvasjquery ラッパーであり、純粋な DOM 要素ではありません。そのため、addEventListenerメソッドはありません。次のように試すことができます：

theCanvas[0].addEventListener("mousemove", onMouseMove, false);   
theCanvas[0].addEventListener("click", onMouseClick, false);
于 2012-06-10T19:02:21.990 に答える
1

代わりにこれを行います：

theCanvas.click(onMouseClick);
theCanvas.mousemove(onMouseMove);

エンジニアの回答によると、jQuery を使用しています。

PS: あなたはまだ戦車プロジェクトに取り組んでいますか? 良い。

于 2012-06-10T19:04:47.170 に答える