Home/ Questions/Q 8887023
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T21:42:13+00:00

I am writing a simple page with JQuery and HTML5 canvas tags where I

  • 0

I am writing a simple page with JQuery and HTML5 canvas tags where I move a shape on the canvas by pressing ‘w’ for up, ‘s’ for down, ‘a’ for left, and ‘d’ for right. I have it all working, but I would like the shape to start moving at a constant speed upon striking a key. Right now there is some kind of hold period and then the movement starts. How can I get the movement to occur immediately?

Here is the important part of my code:

<script src="jquery.js"></script>
<script src="JQuery.print.js"></script>    
<body>
<canvas id="myCanvas" width="500" height="200" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<br><br>
start navigating<input type="text" id = "enter"/>
<div id = "soul2">
coords should pop up here
</div>
<div id = "soul3">
key should pop up here
</div>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//keypress movements
var xtriggered = 0;
var keys = {};
var north = -10;
var east = 10;
var flipednorth = 0;

$(document).ready(function(e){
  $("input").keydown(function(){
    keys[event.which] = true;
    if (event.which == 13) {
         event.preventDefault();
      }
    //press w for north
    if (event.which == 87) {
         north++;
         flipednorth--;
      }
    //press s for south
    if (event.which == 83) {
         north--;
         flipednorth++;
      }
    //press d for east
     if (event.which == 68) {
         east++;
      }
    //press a for west
    if (event.which == 65) {
         east--;
      }
     var  msg = 'x: ' + flipednorth*5 + ' y: ' + east*5;
     ctx.beginPath();
     ctx.arc(east*6,flipednorth*6,40,0,2*Math.PI);
     ctx.stroke();
     $('#soul2').html(msg);
    $('#soul3').html(event.which );
     $("input").css("background-color","#FFFFCC");
  });

  $("input").keyup(function(){
    delete keys[event.which];
    $("input").css("background-color","#D6D6FF");
  });
});

</script>

please let me know if I shouldn’t be posting code this lengthy.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    What you’re missing is a “game loop”.

    Instead of reacting directly to key down or up in deciding whether and when to move your shape around the canvas, you need to use the key events to keep track of which keys are down at any given moment, and then check the key state from a setTimeout()-based loop running independent of the key events.

    You’ve started to do that with your keys variable keeping track of whether a given key is down at any moment:

    // in keydown
keys[event.which] = true;
// in keyup
delete keys[event.which];

    …except that event is not defined – you need to make it a parameter of the event handler, and also none of your code ever actually checks the values in keys.

    Here’s a simplified version of what I’m talking about:

    $(document).ready(function(e){
  var keys = {};

  $("input").keydown(function(event){
    keys[event.which] = true;
  }).keyup(function(event){
    delete keys[event.which];
  });

  function gameLoop() {
    // w for north
    if (keys[87]) {
       north++;
       flipednorth--;
    }
    //press s for south
    if (keys[83]) {
       north--;
       flipednorth++;
    }
    // etc. for other keys

    // code to move objects and repaint canvas goes here

    setTimeout(gameLoop, 20);
  }
  gameLoop();
});

    Demo: http://jsfiddle.net/ktHdD/1/

    The gameLoop() function will run ever 20 milliseconds or so (you can vary this as needed, but that’s fast enough for reasonably smooth animation). Each time it runs it checks if any keys are down and if so adjusts the relevant position variables and repaints. If you have other objects that move around automatically (e.g., in a game there might be bad guys) you’d update them in the gameLoop() function too.

    • 0