Question

问题

我发现很难理解这一点，我试图仅使用鼠标沿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>

整个＆＃34;函数init（）＆＃34;部分是我刚刚尝试过但我认为无论如何我都会包含这个，我知道我在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!");
        }

仅在X轴上在画布上移动图像

1 个答案: