D4mations.com

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



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

d4mer

, , , , , , , , , , ,

24 responses to “JavaScript Canvas Tutorial – Move a sprite/character on screen using the keyboard”

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

  8. <!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. 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.

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

  21. 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. +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 !

Leave a Reply