キャンバス：移動はX軸でのみ可能ですか？

Question

私は、彼らが制御されている画像を移動するユーザーを有効にしているが、現時点では、ユーザーが配置することができ、あなたが離れてから移動する必要があるか、あなたに向かってくる弾丸をかわすゲームを作成しています問題

キャンバスのどこにでも画像を表示できます。

質問

は、どのように私は、ユーザーがキャンバスの指定された部分に沿ってのみ、X軸に沿って移動できるようにすることができますか？例えば：ここで

が私のゲームで、「進行ワーキング」：ユーザーは、船の制御である

することは、彼らが唯一例えば、左または右のように移動することができるはずです。

コード

<script> 
    var game = create_game(); 
    game.init(); 

    //music 
    var snd = new Audio("menu.mp3"); 
    snd.play(); 
     document.getElementById('mute').addEventListener('click', function (evt) { 
     if (snd.muted) { 
      snd.muted = false 
      evt.target.innerHTML = 'mute' 
     } 
     else { 
      snd.muted = true 
      evt.target.innerHTML = 'unmute' 
     } 
    }) 

    function create_game() { 
     debugger; 
     var level = 1; 
     var projectiles_per_level = 1; 
     var min_speed_per_level = 1; 
     var max_speed_per_level = 2; 
     var last_projectile_time = 0; 
     var next_projectile_time = 0; 
     var width = 600; 
     var height = 500; 
     var delay = 1000; 
     var item_width = 30; 
     var item_height = 30; 
     var total_projectiles = 0; 
     var projectile_img = new Image(); 
     var projectile_w = 30; 
     var projectile_h = 30; 
     var player_img = new Image(); 
     var c, ctx; 

     var projectiles = []; 
     var player = { 
      x: 200, 
      y: 400, 
      score: 0 
     }; 

     function init() { 
      projectile_img.src = "apple.png"; 
      player_img.src = "basket.png"; 

      level = 1; 
      total_projectiles = 0; 
      projectiles = []; 

      c = document.getElementById("c"); 
      ctx = c.getContext("2d"); 
      ctx.fillStyle = "#ff6600"; 
      ctx.fillRect(0, 0, 500, 600); 

      c.addEventListener("mousemove", function (e) { 
       //moving over the canvas. 
       var bounding_box = c.getBoundingClientRect(); 
       player.x = (e.clientX - bounding_box.left) * (c.width/bounding_box.width) - player_img.width/2; 
       player.y = (e.clientY - bounding_box.top) * (c.height/bounding_box.height) - player_img.height/2; 
      }, false); 

      setupProjectiles(); 
      requestAnimationFrame(tick); 
     } 

     function setupProjectiles() { 
      var max_projectiles = level * projectiles_per_level; 
      while (projectiles.length < max_projectiles) { 
       initProjectile(projectiles.length); 
      } 
     } 

     function initProjectile(index) { 
      var max_speed = max_speed_per_level * level; 
      var min_speed = min_speed_per_level * level; 
      projectiles[index] = { 
       x: Math.round(Math.random() * (width - 2 * projectile_w)) + projectile_w, 
       y: -projectile_h, 
       v: Math.round(Math.random() * (max_speed - min_speed)) + min_speed, 
       delay: Date.now() + Math.random() * delay 
      } 
      total_projectiles++; 
     } 

     function collision(projectile) { 
      if (projectile.y + projectile_img.height < player.y + 74) { 
       return false; 
      } 
      if (projectile.y > player.y + 74) { 
       return false; 
      } 
      if (projectile.x + projectile_img.width < player.x + 177) { 
       return false; 
      } 
      if (projectile.x > player.x + 177) { 
       return false; 
      } 

      return true; 
     } 

     function maybeIncreaseDifficulty() { 
      level = Math.max(1, Math.ceil(player.score/10)); 
      setupProjectiles(); 
     } 

     function tick() { 
      var i; 
      var projectile; 
      var dateNow = Date.now(); 
      c.width = c.width; 
      for (i = 0; i < projectiles.length; i++) { 
       projectile = projectiles[i]; 
       if (dateNow > projectile.delay) { 
        projectile.y += projectile.v; 
        if (collision(projectile)) { 
         initProjectile(i); 
         player.score++; 
        } else if (projectile.y > height) { 
         initProjectile(i); 
        } else { 
         ctx.drawImage(projectile_img, projectile.x, projectile.y); 
        } 
       } 
      } 
      ctx.font = "bold 24px sans-serif"; 
      ctx.fillStyle = "#ff6600"; 
      ctx.fillText(player.score, c.width - 50, 50); 
      ctx.fillText("Level: " + level, 20, 50); 

      ctx.drawImage(player_img, player.x, player.y); 
      maybeIncreaseDifficulty(); 
      requestAnimationFrame(tick); 
     } 

     return { 
      init: init 
     }; 
    }   

</script> 

JSFiddle（壊れた）

https://jsfiddle.net/3oc4jsf6/10/

Answer 1

あなたの船は、マウスの動きに結び付けられている場合は、あなたが唯一のあなたは、単にその.yプロパティを変更することを避けることができ、X軸全体に動きを可能にしたいですあなたのmousemoveリスナーで。

この行を削除します。

player.y = (e.clientY - bounding_box.top) * (c.height/bounding_box.height) - player_img.height/2;