は、私はそれがかなり難しい。この周りに私の頭を取得するために探していますのみ

Question

問題

X軸上のキャンバスに画像を移動、私はX軸に沿ってマウスを使用して画像を移動しようとしています。私はイメージを動かすことさえ難しく、多くのチュートリアルでは本当に私を助けてくれました。ここで私が言うしようとしているものです：

私はページの下部に左右に移動する画像にしたいの上にあなたが私の美しい画像で見ることができるように。

コードと質問

ここで私はキャンバスの上にロードされ、このすべての画像をしようとすると、もはやそれは働いてイマイチなぜ私が理解するのは非常に難しいそれを作る表示されない私の最初の試みは、あります。

<script type="text/javascript"> 

    //Referencing the canvas 
    var canvas = document.getElementById("myCanvas"); 
    var context = canvas.getContext("2d"); 
    var width = canvas.getAttribute('width'); 
    var height = canvas.getAttribute('height'); 

    //Images 
    var bggameImage = new Image(); 
    var playerImage = new Image(); 
    var enemyImage = new Image(); 
    var projectileImage = new Image(); 
    var livesImage = new Image(); 

    //Canvas dimensions 
    var width = 480; 
    var height = 320; 

    //Loading in the backgroundImage 
    bggameImage.src = "Images/bggameImage.png"; 
    bggameImage.onload = function(){ 
     context.drawImage(bggameImage, 0, 0); 
    } 

    //Loading in the playerImage 
    playerImage.src = "Images/playerImage.png"; 
    playerImage.onload = function(){ 
     context.drawImage(playerImage, 165, 240); 
    } 

    //Loading in the projectileImage 
    projectileImage.src = "Images/projectileImage.png"; 
    projectileImage.onload = function(){ 
     context.drawImage(projectileImage, 65, 240); 
    } 

    var playerImage = { 
      x:176, 
      y:74, 
    } 

    function init() { 

     playerImage.src = "Images/playerImage.png"; 

     //Moving player 
     myCanvas.addEventListener("mousemove", function (e) { 
      var bounding_box = myCanvas.getBoundingClientRect(); 
      playerImage = (e.clientX - bounding_box.left) * (myCanvas.width/bounding_box.width) - playerImage.width/2; 
      playerImage = (e.clientY - bounding_box.top) * (myCanvas.height/bounding_box.height) - playerImage.height/2; 
     }  
    ) 
</script> 

全体の「関数init（）は」一部は私が二回playerImageにロードしていますことを理解し、私は試してみましたが、私は、私はとにかくこれを含めるだろうと思ったものです。

Answer 1

同じ変数名を2回（playerImage）使用しているため、画像が上書きされています。あなたは画像のためにそれを使用しており、またその位置を保存しています。 xとyを格納しているplayerImageをplayerPositionなどに変更します。その変数をマウスイベントで更新し、その変数の値に従って画像をレンダリングします。

最終的には、setTimeoutまたはrequestAnimationFrameを使用してゲームループを調べる必要があります。したがって、これはその段階で重要になります。そして、はい、プレーヤーの画像を2度読み込んではいけません。開始時にそのすべてを行い、すべての資産が正常にロードされたらゲームを開始するだけです。例えば

...

 var playerImage; 
     var alienImage; 
     var bulletImage; 
     var assetCount = 0; 

     function loadAssets() { 
      playerImage = new Image(); 
      playerImage.onload = checkAssetsLoaded; 
      playerImage.src = "assets/images/Brush01.png"; 

      alienImage = new Image(); 
      alienImage.onload = checkAssetsLoaded; 
      alienImage.src = "assets/images/Brush02.png"; 

      bulletImage = new Image(); 
      bulletImage.onload = checkAssetsLoaded; 
      bulletImage.src = "assets/images/Brush03.png"; 
     } 

     function checkAssetsLoaded(event) { 
      assetCount++; 
      console.log("An asset has loaded!: " + assetCount); 
      if (assetCount == 3) { 
       startGame(); 
      } 
     } 

     function startGame() { 
      // Start your game initialization logic here. 
      console.log("Game starting!"); 
     }