Question

我正在尝试在HTML5中组合一个简单的“游戏”。但是我不能让对角线运动起作用。只有在完全同时按下两个按钮时，“对角线移动”才有效。即使这样它也会移动一次。这是代码：

    // Getting canvas, and canvas context
    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");
    //Keymap, later passed as method parameter
    var map = [false,false,false,false];
    // Top, Right, Bottom, Left


    // Function for resetting keymap
    var resetMap = function() {
       for(i=0;i<map.length;i++) {
           map[i] = false;
       };
    };


    //Function for clearing the screen before drawing
    var clrScrn = function() {
        ctx.clearRect(0,0,500,500);  
    };

    // The player character
    var character = function() {
        this.x = 50;
        this.y = 50;
        this.h = 50;
        this.w = 50;
    };

        // Draw method of the character class
        character.prototype.draw = function() {
          ctx.fillRect(this.x,this.y,this.h,this.w);  
        };

        // The move method of the character class
        character.prototype.move = function(map) {


            if(map[0] === true) {
                if(map[1] == true) {
                    this.x+=5;
                    this.y-=5;
                    console.log("Pressed at the same time");
                }
                else {
                    this.y-=5;
                }
            }

            else if(map[1] === true) {
                this.x+=5;
            }              
            else if(map[2] === true) {
                this.y+=5;
            }              
            else if(map[3] === true) {
                this.x-=5;
            }
        };


    //Making a new character
    var player = new character();
        player.draw();


   // Drawing everything on screen
   var render = function() {

       clrScrn(); 
       player.move(map);
       player.draw();
       resetMap();

       requestAnimFrame(render);
   };

    //Calling  the render function
   render();

    //Binding event listener to window,checking key down, likely the source of the problem
    window.addEventListener("keydown",function(e){


        if(e.keyCode == 38 && e.keyCode == 39) {
            map[0] = true;
            map[1] = true;
        }

        else if(e.keyCode == 38) {
            map[0] = true;
         }
        if(e.keyCode == 39) {
            map[1] = true;
         }
        if(e.keyCode == 40) {
            map[2] = true;
         }
        if(e.keyCode == 37) {
            map[3] = true;
         }

         console.log(e.keyCode);

    },false);


    //Binding event listener to key up
    window.addEventListener("keyup",function(e){
        resetMap();
    },false);

Answer 1

在渲染功能中：

   player.move(map); // you move the player
   player.draw();    // you draw the player
   resetMap();       // you forget all pressed keys

resetMap()是您需要再次按键才能再移动一步的原因。

请注意，长按键时，由于键盘重复，水平和垂直动作可能会意外失效。但是你不应该依赖游戏的重复重复。您应该检测按键并单独键入各个按键，以确定是否按下按键。

Answer 2

试着看： JavaScript multiple keys pressed at once

然后稍微重新处理你的if / else逻辑。

帆布对角线运动

2 个答案: