0

私は現在 Javascript を学習しようとしており、次のチュートリアルを実行しています ( http://www.sitepoint.com/creating-a-simple-windows-8-game-with-javascript-input-and-sound/ ) しかし、実行しました乗り越えられない問題に。

キャンバス要素を作成し、マウス クリックで動作するようにキャンバスに 3 つのリスナーをアタッチしました。

canvas.addEventListener("MSPointerUp", endAim, false);
canvas.addEventListener("MSPointerMove", adjustAim, false);
canvas.addEventListener("MSPointerDown", beginAim, false);

しかし、PointerUp、Down、または Move で関数が呼び出されることはありません。以下は問題の機能です。また、デバッグするためだけに「console.log」を実行したことにも注意してください..それらのどれもコンソールに記録されていないため、イベントがトリガーされていないと考えています..

function beginAim(event){
   console.log("Aim ahoy");
   if (playerTurn == 1) {
      if (!isAiming) {
         aimStart = new createjs.Point(event.x, event.y);
         isAiming = true;
      }
   }
}

function adjustAim(event){
   console.log("adjustAim event called");
   if (isAiming) {
      var aimCurrent = new createjs.Point(event.x, event.y);
      aimVector = calculateAim(aimStart, aimCurrent);
      //ToDo: write text / show aim arror
      console.log("Aiming... " + aimVector.x + "/" + aimVector.y);
   }
}

function endAim(event){
   if (isAiming) {
      console.log("endAim Function called");
      isAiming = false;
      var aimCurrent = new createjs.Point(event.x, event.y);
      aimVector = calculateAim(aimStart, aimCurrent);
      playerFire = true;
   }
}

function calculateAim(start, end){
   var aim = new createjs.Point(
      (end.x - start.x) / 80,
      (end.y - start.y) / 80);
   aim.x = Math.min(MAX_SHOT_POWER, aim.x);
   aim.x = Math.max(0, aim.x);
   aim.y = Math.max(-MAX_SHOT_POWER, aim.y);
   aim.y = Math.min(0, aim.y);
   return aim;
}

これが単純な問題になることはわかっていました.. MSPointerUp /Down / Move はすべて Windows8 用であり、これがトリガーされなかった理由です。

同じ結果を得るために、mousedown、mouseup、およびmousemoveに切り替えました。

4

1 に答える 1

1

body または canvas に追加して、タッチ イベントを JavaScript にルーティングします。

body, canvas {
        -ms-user-select: none;
        touch-action: none;
}

次に、MSGesture オブジェクトを作成し、そのターゲットをキャンバスに設定し、pointerdown リスナーも作成する必要があります。

var gesture = new MSGesture();
gesture.target = canvas;
canvas.addEventListener("pointerdown", beginAim, false)

beginAim で、pointerdown のハンドラーを追加し、次のようにジェスチャに追加します。

if (event.type == "pointerdown") {
       gesture.addPointer(e.pointerId);
       return
}
于 2013-12-02T22:37:43.050 に答える