• Thursday , 19 October 2017

JavaScript Canvas Tutorial – Move a sprite/character on screen using the keyboard

Code Canyon



In this video I teach you how to create a basic square and simply move it by using your arrow keys.

Visit my new site for Tutorials and random stuff I blog about
http://calebprenger.com

Original source

3d Ocean

Related Posts

24 Comments

  1. Creative Natural
    August 10, 2017 at 19:08

    Thanks a lot! This is the most easiest way I have ever seen in tutorials for moving shapes!

  2. Harshdeep Singh
    August 10, 2017 at 19:08

    hey how to restrict the rectangle we just made within the canvas boundaries???

  3. radouanito benmoudatter
    August 10, 2017 at 19:08

    can u put tutorial how to make triagle moving and boucing please

  4. radouanito benmoudatter
    August 10, 2017 at 19:08

    just tell me why dont you use getElementbyId please

  5. Dat Nguyen
    August 10, 2017 at 19:08

    It Works! Thanks!!

  6. akash badnale
    August 10, 2017 at 19:08

    i have written below code but the rectangle is not moving

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>MyGame</title>

    <!– styling the canvas –>
    <style>
    #myCanvas{ background: white; display: block; outline: 1px solid black }
    </style>

    </head>
    <body>

    <!– creating the canvas –>
    <canvas id="myCanvas" width="540" height="480"></canvas>

    <!– your script goes here in script tag –>
    <script>

    var canvas = document.querySelector('#myCanvas');
    var context = canvas.getContext('2d');

    var xPos = 50;
    var yPos = 50;
    var width = 20;
    var height = 20;

    context.rect(xPos,yPos,width,height);
    context.stroke();

    function move(e)
    {
    alert(e.keyCode);
    if(e.keyCode==37){ xPos = xPos-20; }
    else if(e.keyCode==38){ yPos = yPos-20; }
    else if(e.keyCode==39){ xPos = xPos+20; }
    else if(e.keyCode==40){ yPos = yPos+20; }

    context.rect(xPos,yPos,width,height);
    context.stroke();

    }

    document.onKeydown=move;
    </script>
    </body>
    </html>

  7. Ibrahim Unwala
    August 10, 2017 at 19:08

    how to refresh frames like 60frames per sec

  8. sean123654
    August 10, 2017 at 19:08

    <!doctype html>
    <html>
    <meta charset="utf-8">
    <title>Canvas</title>
    <style>
    #canvas{
    outline:1px solid #000;
    }
    </style>
    </head>
    <body>

    <canvas id="canvas" height="400" width="600"></canvas>

    <script>

    var canvas = document.querySelector('#canvas');
    var context = canvas.getContext('2d');

    var xPos = 0;
    var yPos = 0;

    context.rect(xPos, yPos, 50 , 50);
    context.stroke();

    function move(e){

    alert(e.keyCode);

    if(e.keyCode==39){
    xPos+=5;
    }
    if(e.keyCode==37) {
    xPos-=5;
    }
    if (e.keyCode == 38) {
    yPos-=5;
    }
    if (e.keyCode == 40){
    yPos+=5;
    }

    canvas.width=canvas.width;
    context.rect(xPos, yPos, 50 , 50);
    context.stroke();

    }

    document.onkeydown = move;
    </script>
    </body>
    </html>

  9. Jack Giles
    August 10, 2017 at 19:08

    I don't know if you can help me. I already have a sprite I would like to use but I don't know how to move it around… I'm very new to coding, this is my first project and first real experience with code. With my pre-existing sprite, which part of the code would I need to use exactly? Thank you again.

  10. Jack Giles
    August 10, 2017 at 19:08

    What program/software is this? Thank you in advance 🙂

  11. Dids
    August 10, 2017 at 19:08

    I cant move my sprite to the left :/ noticed in the tutorial you didnt test that, thanks in advance for any help

  12. Vain Glory
    August 10, 2017 at 19:08

    Great tutorial, now if only the text were smaller…

  13. kaden
    August 10, 2017 at 19:08

    HALP

    <!doctype html>
    <html>
    <meta charset="utf-8">
    <title>Jump2</title>
    <style>
    #canvas{
    outline: 1px solid black;
    }
    </style>
    </head>
    <body>

    <canvas id="canvas" height="400" width="600"></canvas>

    <script>

    var canvas = document.querySelector('#canvas')
    var context = canvas.getContext('2d')

    var xPos = 0;
    var yPos = 0;

    context.rect(xPos, yPos, 50, 50);
    context.stroke();

    function move(e){

    if(e.keyCode==65){
    xPos-=5;
    }
    if(e.keyCode==68){
    xPos+=5;
    }
    if(e.keyCode==87){
    yPos-=5;
    }
    if(e.keyCode==83){
    yPos+=5;
    }
    }

    document.onkeydown = move;

    </script>
    </body>
    </html>

  14. Nadav Kaempfer
    August 10, 2017 at 19:08

    Thanks man, your video was very helpful

  15. Super Planeta
    August 10, 2017 at 19:08

    Thanks for the video.

  16. Julian Verschuren
    August 10, 2017 at 19:08

    haha marvelous! This is precisely what i needed for my school asignment. thanks a million!

  17. CRAFTED PROJECTS124
    August 10, 2017 at 19:08

    Its pretty weird how you didnt move up or left, but great video, learned alot

  18. Dr. Andromestrein
    August 10, 2017 at 19:08

    Alerts work, but it isn't move 🙁

  19. PopR
    August 10, 2017 at 19:08

    can you use .getElementById

  20. randy franklin
    August 10, 2017 at 19:08

    awesome i;m still learning java script…could you send me your url sir.. thank you!!

  21. ohhhgggeeezzz
    August 10, 2017 at 19:08

    hummm…. I followed what you have but my result didn't turned out the same way. The square seems like it draw on top of the old one so as I move right key the square redraw its self on top of the old one. So instead of appearing the object is moving its a streak of square extending… how to fix this? thanks

  22. Cyprien Castel
    August 10, 2017 at 19:08

    +Caleb Prenger  Thank you so much for this video it helped me a lot ! However, I'm a beginner in Javascript and i wonder two things : Can you explain me the utility of the "e" in "move(e)" ?  And the second one : why do you wright " canvas. width … context.stroke()" at the end of the function ? Thank's a lot !

  23. LOGiCAL
    August 10, 2017 at 19:08

    works! thanks!

  24. Marco Pierre Fernandez Burgos
    August 10, 2017 at 19:08

    The tutorial was great, thank you very much. By the way I would like to know if there is a way to add detection to that rectangle, I am on a project and my rectangle needs to detect whether or not there is a collision on the top. 

Leave A Comment

You must be logged in to post a comment.