image not following mouse on canvas

Question

I am having trouble creating game on html canvas. The premise of the game is you have to catch the balloons before they hit the ground. I am having problems with the background of the canvas and the basket is not moving with the mouse.

The background should be black and the basket should be following the mouse curser.

https://jsfiddle.net/pgkL09j7/8/

Here is a screenshot of the results look like

<html>
<head>
<title>Sean Coyne</title>

<link rel="stylesheet" type="text/css" href="home.css">
<link rel="icon" type="image/x-icon" href="favicon.ico" />

</head>
<body onload="start_game()">

<body>


<section>
<article>
<div id="logo"><img src="LogoComic.png" id="Logo"></div><br></br>

<div id="canvas">
    <canvas id="c" style="border:5px solid orange" height="500" width="500"></canvas>

    <p id="p1"></p>

    <script>

        var balloon_x=100;
        var balloon_y=0;
        var basket_x=100;
        var basket_y=100;
        var points=0;

        //Background colour of canvas
        var c = document.getElementById("c");
        var ctx = c.getContext("2d");
        ctx.fillStyle = "#000";
        ctx.fillRect(0,0,500,500);

        //Here is the event listener
        mycanv.addEventListener("mousemove",seenmotion, false);

        function seenmotion(e) {

        //This is the code for the mouse 
        //moving over the canvas.
        var bounding_box=c.getBoundingClientRect();
                basket_x=(e.clientX-bounding_box.left) *
                                     (c.width/bounding_box.width);  
                basket_y=(e.clientY-bounding_box.top) *
                        (c.height/bounding_box.height); 
        }

        function start_game() {
             setInterval(game_loop, 50);
        }


        function game_loop() {
            // The code above is called every 50ms and is a 
            // frame-redraw-game-animation loop.

            c.width = c.width;

            // Below is the code that draws the objects
            draw_balloon(balloon_x,balloon_y);
            draw_basket(basket_x,basket_y); 

            // Below is the code that updates the balloons location
            balloon_x++;
                if (balloon_x>c.width) {
                    balloon_x=0;
            }

            //Here is the collision detection code
            if (collision(balloon_x, balloon_y, basket_x, basket_y)) {
                    points -= 0.5;
                }


            //Here is the code for the point system
            points+=1;

            // and let's stick it in the top right. 
                var integerpoints=Math.floor(points); // make it into an integer
            ctx.font="bold 24px sans-serif ";
                ctx.fillText(integerpoints, c.width-50, 50);         
        }



        context.clearRect ( 0 , 0 , 500, 500 );

        function collision(basket_x, basket_y, ball_x, ball_y) {
            if(balloon_y + 85 < basket_y) {
                return false;
            }
            if (balloon_y > basket_y + 91) {
                return false;
            }
            if (balloon_x + 80 < basket_x) {
                return false;
            }
            if (balloon_x > basket_x + 80) {
                return false;
            }

            return true;  
        }

        // Code to stop the game when we're finished playing
        function stop_game() {

        }

        //Code for the ball
        function draw_balloon(x,y) {
            var balloon_img=new Image();
            balloon_img.src="balloon.png";
            ctx.drawImage(balloon_img,x,y);

        }

        //Code for the basket
        function draw_basket(x,y) {
            var basket_img=new Image();
            basket_img.src="basket.png";
            ctx.drawImage(basket_img,x,y);

        }

    </script>   
</div>

</article>
</section>





</body>

</html>

try something like this http://stackoverflow.com/questions/17130395/canvas-html5-real-mouse-position ? — Dhiraj, Apr 25 '15 at 14:50

score 0 · Accepted Answer · answered Apr 25 '15 at 15:08

You have to change the variable for the mouselistener. So instead of

mycanv.addEventListener("mousemove",seenmotion, false);

you have to write this

c.addEventListener("mousemove",seenmotion, false);

This move the basket with the mouse, but the image isn't still right. You have to subtract half of width and height of the image from the x and y coordinate. To fix your background you have to modify your CSS. the article and the section tag have both full width/height und an own background. This shouldn't be to hard to fix, just change the background of #c to black.

#c {
    background-color: black;
}

Here's the jsfiddle: https://jsfiddle.net/pgkL09j7/10/

Visit http://www.w3schools.com/ for more information about CSS and JS. Also the code can be more easier and structured.

image not following mouse on canvas

1 Answers1