CODEWITHSUNDEEP
javascripthtmlcanvas
RushFan2112
RushFan2112

Reputation: 325

Moving image on canvas on the X axis only

The Problem

I am finding it rather difficult to get my head around this, I am attempting to move an image using the mouse along the X axis only. I am finding it hard to even move the image at all and the many tutorials I have looked at arnt really helping me. Here is what I am trying to say:

enter image description here

As you can see by my beautiful image above I only want to image to move left and right at the bottom of the page.

The Code and the Question

Here is my first attempt, when I try this all the images loaded on the canvas no longer appear making it very hard for me to understand why it isnt working. 

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

The whole "function init()" part is what I have just tried but I thought I would include this anyway, I understand that I am loading in the playerImage twice.

Upvotes: 0

Views: 832

Answers (1)

ManoDestra
ManoDestra

Reputation: 6503

You're using the same variable name twice (playerImage), so your image is being overwritten. You're using it for the image and also to store the position. Change the playerImage that's storing x and y to be playerPosition or something like that. Update that variable on your mouse event and then render the image according to that variable's values.

Ultimately, you're going to have to look at a game loop using setTimeout or requestAnimationFrame. So, this will become crucial at that stage. And yes, you shouldn't be loading the player image twice either. Do all of that at the start and only start your game when all your assets have successfully loaded.

For instance...

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

Upvotes: 1

Related Questions