JS Canvas game using keypress event to modify speed when holding shift button

Question

I am learning how to make a game with the canvas via JavaScript, and I have the arrow keys set to move a block on the canvas. I want to add a modifier in which while holding shift, the block moves twice as fast, and I cannot get my function to work properly when the shift key is pressed.

Any suggestions/help would be much appreciated!

              var myGameArea = {
              canvas : document.createElement("canvas"),
              start : function() {
              this.canvas.width = 540;
              this.canvas.height = 330;
              this.context = this.canvas.getContext("2d");




      document.body.appendChild(this.canvas,document.body.childNodes[0]);
          this.canvas.setAttribute("id", "myCanvas");
          this.canvas.hidden = true;


    this.interval = setInterval(updateGameArea, 1000/FPS);
    window.addEventListener('keydown', function (e) {
        myGameArea.keys = (myGameArea.keys || []);
        myGameArea.keys[e.keyCode] = (e.type == "keydown");
    })
    window.addEventListener('keyup', function (e) {
        myGameArea.keys[e.keyCode] = (e.type == "keydown");            
    })
}, 
clear : function(){
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
      }
 }

function component(width, height, color, x, y) {
this.gamearea = myGameArea;
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;    
this.x = x;
this.y = y;    
this.update = function() {
    ctx = myGameArea.context;
    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.newPos = function() {
    this.x += this.speedX;
    this.y += this.speedY;        
}
}

function updateGameArea() {
myGameArea.clear();
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;





if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.speedX = -10; }
if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.speedX = 10; }
if (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speedY = -10; }
if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speedY = 10; }


if (myGameArea.keys && myGameArea.keys[65]) {myGamePiece.speedX = -10; }
if (myGameArea.keys && myGameArea.keys[68]) {myGamePiece.speedX = 10; }
if (myGameArea.keys && myGameArea.keys[87]) {myGamePiece.speedY = -10; }
if (myGameArea.keys && myGameArea.keys[83]) {myGamePiece.speedY = 10; }

    //What do I need to do to get the following function to execute? (NOTE 
   //THIS WAS MOVED TO AFTER IF STATEMENTS PER COMMENT BELOW, THIS DID NOT 
    /////FIX the ISSUE)
GetShiftState(e);

myGamePiece.newPos();    
myGamePiece.update();
}


//Below is the get shift key function I cannot get to work. 
//What I am trying to do is increase the speed of the gamepiece moving 
//when holding shift + the directional arrow

    function GetShiftState (e) {
            if (e.shiftKey) {
    switch(e.which) {
        case 37:
            console.log("shift + left arrow");
          myGamePiece.speedX = -20; 
            break;
        case 38:
            console.log("shift + up arrow");
    myGamePiece.speedY = -20; 
            break;
        case 39:
            console.log("shift + right arrow");
    myGamePiece.speedX = 20;
            break;
        case 40:
            console.log("shift + down arrow");
    myGamePiece.speedY = 20;
            break;
        default:
            break;
       }
   }
        else {
            console.log("Shift key is up.");
        }
    }

Add event listener for keydown and up. Declare a variable for speed and onKeyDown (shift) set speed to 20. Then in your move code use + and - based on direction. — Bibberty, Jan 22 '19 at 00:42
Thanks for the reply! I am a bit confused on how to accomplish your suggestion (pardon my lack of knowledge as I am in the early stages of teaching myself Javascript). When you say in my move code use + and - based on direction, are you essentially saying the way my move code is currently? Or how would that look (feel free to use an unrelated example, just trying to gain understanding and any help is very much appreciated). — Joel Lark, Jan 24 '19 at 00:31
Your `speed` should be a variable. e.g. 10. the `shift` key can change it to 20 on `keydown`. Now you need a `move` variable that will toggle speed positive or negative based on desired direction. — Bibberty, Jan 24 '19 at 00:36
or have a multiplier variable that is normally 1. onkeydown for shift set it to 2. — Bibberty, Jan 24 '19 at 00:37

score 0 · Answer 1 · answered Jan 21 '19 at 23:43

0

You are resetting the myGamePiece.speed to 10 after you call the method.
Move the function call to after the end of the if statements.

answered Jan 21 '19 at 23:43

I tried that, I am still getting an error no matter where I put the GetShiftState(e); function. I always get an uncaught referenceError stating: e is not defined. I have a feeling I am not using the event listeners properly. I am just not sure how (or where) I need to define e (e for events) for this function to work properly – Joel Lark Jan 22 '19 at 00:26
Your key listener is disjointed from the receiver. Each listener should evaluate the state of the shift key and call the appropriate function with speed. – Jan 22 '19 at 00:41

score 0 · Answer 2 · answered Jan 24 '19 at 00:58

Below is a snippet from some code I wrote for moving a div around the screen. The principle is the same though, note we have a step variable and we adjust it if the event.shiftKey is true. Complete code can be viewed / forked here: https://repl.it/@PaulThomas1/MoveDivAroundTheScreen

var step = 10;

if (event.shiftKey) step = step * 2;

switch (key) {
  case "ArrowUp":
    event.preventDefault();
    box.style.top = (top - step) + "px";
    break;
  case "ArrowDown":
    event.preventDefault();
    box.style.top = (top + step) + "px";
    break;
  case "ArrowLeft":
    box.style.left = (left - step) + "px";
    break;
  case "ArrowRight":
    box.style.left = (left + step) + "px";
    break;
}

JS Canvas game using keypress event to modify speed when holding shift button

2 Answers2