How can to make a snowman move?

1

I am on the last few pages on JavaScript for kids book and I seem to be stuck on the snow man challenge. The challenge is to make a snowman appear if I call out drawSnowman(50,50) The snow man should appear at the x coordinate 50 and the y coordinate 50. Here is what I came close too. Here is what I have so far. I tried to build a constructer that would come close to what I have done before but can’t seem to find a proper solution that fits. In a nut shell. How do I make the snowman move all at once without having to modify ctx.arc each time to build a new circle.
\\

Canvas 
<body>
<canvas id = "canvas" width ="200" height ="200"></canvas>
    <script>
   var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
        //ctx.strokeStyle = "Green";
        
 var Circle = function (x,y){
     this.x = x;
     this.y = y;
 };
             

            var circle = function(x,y,radius) {
              ctx.lineWidth = 4;
              ctx.beginPath();
                ctx.arc(x,y,radius,0,Math.PI * 2, false);
                ctx.stroke();
            };
        
        
          
        ctx.lineWidth = 4;
        ctx.strokeStyle = "Black";
        circle(100,100,20,false);
        circle(100,150, 30);
        circle(105,97, 1, true);
        circle(95,97,1,true);
        //Buttons for snow
        circle(99,135,1,true);
         circle(99,148,1,true);
         circle(99,164,1,true);
        
        var drawSnowman= function (circle){
         circle.css({
             position:"absolute",
             left:circle,x,
             top:circle.y
         });
        }
        var boom = new circle(20,20);
        circle(boom);
         

    </script>
    <h1> Hello World!, my name is Sonny!</h1>
</body>
\\\
2

The code is inconsistent and incomplete - there is no circle function defined - there is a draw method that is never called - there is no mention of a drawSnowman function

Also put all code making DOM calls inside a DOMContentLoaded eventhandler like this

document.addEventListener("DOMContentLoaded", function() {
// your code here
})
3

Okay I know for a fact that the code above does draw a snowman. How do I move this snow man to let say position (50,50). I have to call the function circle several times to make the snowman. Is there a way ti can make all the circle calls one entity to move it as a whole?

4

Yes there is, basicly you need to put your drawing functions in a function and pass in an x and y position.

var drawSnowman=function (x,y){
Circle(x,y+10,10);
//ect...
}

So the position passed in is where you want the center of your snowman to be on the canvas. You then draw your snowman relative to that position. So if your snowman is made up of 3 circles, you would do something like this:
circle (x,y-10,10);
Circle(x,y,10);
Circle(x,y+10,10);
That would enable you to draw the snowman anywhere you want on the canvas by just setting the x and y.
If any of that is unclear just let me know and I will try to help further.

5

Fuck Yeah!!! Thank you so much. you are very thankful!

1 Like