auf Leinwand auf der X-Achse nur

Question

Bewegtbild Das Problem

Ich finde es ziemlich schwierig, dies zu umgehen, meinen Kopf zu bekommen, ich versuche nur, ein Bild mit der Maus entlang der X-Achse zu bewegen. Ich finde es schwierig, das Bild überhaupt zu verschieben und die vielen Tutorials, die ich mir angeschaut habe, helfen mir wirklich. Hier ist, was ich bin versucht zu sagen:

Wie Sie mein schönes Bild sehen oben ich nur Bild wollen nach links zu bewegen und rechts am unteren Rand der Seite.

Der Kodex und die Frage

Hier ist mein erster Versuch, wenn ich versuche, diese alle auf der Leinwand nicht geladenen Bilder länger erscheint es sehr schwer macht für mich zu verstehen, warum es funktioniert nicht war.

<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> 

Die ganze „Funktion init()“ Teil ist das, was ich gerade versucht, aber ich dachte, dass ich das sowieso umfassen würde, ich verstehe, dass ich in der playerImage zweimal bin Laden.

Answer 1

Sie verwenden denselben Variablennamen zweimal (playerImage), sodass Ihr Bild überschrieben wird. Sie verwenden es für das Bild und speichern die Position. Ändere das playerImage, das x und y speichert, als playerPosition oder ähnliches. Aktualisieren Sie diese Variable in Ihrem Mausereignis, und rendern Sie das Bild dann entsprechend den Werten dieser Variablen.

Letztlich müssen Sie eine Spielschleife mit setTimeout oder requestAnimationFrame betrachten. Also wird dies in dieser Phase entscheidend werden. Und ja, du solltest das Spielerbild auch nicht zweimal laden. Mach das alles am Anfang und starte dein Spiel erst, wenn alle deine Assets erfolgreich geladen wurden.

Zum Beispiel ...

 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!"); 
     }