javascript - 仅在 X 轴上在 Canvas 上移动图像

Question

问题

我发现很难理解这个问题，我尝试仅使用鼠标沿 X 轴移动图像。我发现甚至移动图像都很难，而且我看过的许多教程并没有真正帮助我。我想说的是:

正如您在上面美丽的图片中看到的，我只想让图像在页面底部左右移动。

代码和问题

这是我的第一次尝试，当我尝试此操作时， Canvas 上加载的所有图像不再出现，这让我很难理解为什么它不起作用。

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

整个“function init()”部分是我刚刚尝试过的，但我想无论如何我都会包含它，我知道我在playerImage中加载了两次。

Answer 1

您两次使用相同的变量名称 (playerImage)，因此您的图像将被覆盖。您将它用于图像并存储位置。将存储 x 和 y 的playerImage 更改为playerPosition 或类似的内容。在鼠标事件上更新该变量，然后根据该变量的值渲染图像。

最终，您将必须使用 setTimeout 或 requestAnimationFrame 查看游戏循环。因此，这在那个阶段将变得至关重要。是的，您也不应该加载玩家图像两次。在开始时执行所有这些操作，并且仅在所有资源成功加载后才开始游戏。

例如...

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