Question

我正在学习如何通过JavaScript使用画布制作游戏，并且设置了箭头键以在画布上移动块。我想添加一个修饰符，在按住Shift键的同时，该块的移动速度快两倍，并且当按下Shift键时，我的功能无法正常工作。

任何建议/帮助将不胜感激！

              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.");
        }
    }

Answer 1

调用该方法后，您要将myGamePiece.speed重置为10。
在if语句结束后将函数调用移至。

Answer 2

以下是我为在屏幕上移动div编写的一些代码的摘录。但是原理是相同的，请注意，我们有一个step变量，如果event.shiftKey为true，我们将对其进行调整。完整的代码可以在这里查看/分叉：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;
}

按住Shift键时使用按键事件修改速度的JS Canvas游戏

2 个答案: