移動一個球的箭頭鍵按在JavaScript中

Question

我正在尝试JavaScript的第一次......我想使一个球移动按箭头键

但球没有上下移动... 只是左右移动....

我有一些疑问

1. 如何使球在按上、右键时对角线移动。
2. 我试过使用加速，但如何让球在没有按键的情况下平稳地停止？
3. 如何使球在画布中自由漫游(通过按键)......现在它只是在一个方向上移动，但我想使球根据按键自由移动。

  canwid=1000;
canhigh=600;
sidexl=0;
hxl=0;
canvas = document.getElementById("game");
ctx = canvas.getContext("2d");

gameover=false;
x=canwid/2;
y=canhigh/2;

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

    function keyDownHandler(e) {
        if(e.key == "Right" || e.key == "ArrowRight") {
            rightPressed = true;
            if (sidexl<2) {
                sidexl+=0.02;
            }
        }
        else if(e.key == "Left" || e.key == "ArrowLeft") {
            leftPressed = true;
            if (sidexl>-2) {
                sidexl-=0.02;
            }
        }
        else if(e.key == "Up" || e.key == "ArrowUp") {
            upPressed = true;
            if (hxl>-2) {
                hxl+=0.02;
            }
        }
        else if(e.key == "Down" || e.key == "ArrowDown") {
            downPressed = true;
            if (hxl>-2) {
                hxl-=0.02;
            }
        }
    }
    function keyUpHandler(e) {
    if(e.key == "Right" || e.key == "ArrowRight") {
        rightPressed = false;
    }
    else if(e.key == "Left" || e.key == "ArrowLeft") {
        leftPressed = false;
    }    
    else if(e.key == "Up" || e.key == "ArrowUp") {
        upPressed = false;
    }    
    else if(e.key == "Down" || e.key == "ArrowDown") {
        downPressed = false;
    }
}

function draw()
{
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.beginPath();
    ctx.arc(x, y, 10, 0, Math.PI*2, false);
    ctx.fillStyle = "red";
    ctx.fill();
    ctx.closePath();
}
function input()
{

}
function logic()
{
    if (rightPressed) {
        x += sidexl;    
    }
    else if (leftPressed) 
    {
        x += sidexl;    
    }   
    else if (upPressed) 
    {
        y += hxl;   
    }   
    else if (downPressed) 
    {
        y += hxl;   
    }
    else
    {
        x += sidexl;
        y += hxl;
        if (sidexl>0) {
            sidexl-=0.02;
        }
        else {
            sidexl+=0.02;
        }
        if (hxl>0) {
            hxl-=0.02;
        }
        else {
            hxl+=0.02;
        }
    }
}
function play()
{
    draw();
    input();
    logic();
}

setInterval(play, 5);

Answer 1

如何使球移动对角线时，向上和向右键被按下，我试过使用加速度，但如何使球顺利停止时，没有键被按下如何使球自由漫游在画布（通过使键按）......现在它只是在一个方向上移动，但我想使球移动自由根据键按。

你可以通过存储x,y的加速度和按键的状态来实现。

以下是工作实例

const canvas = document.getElementById("game");
const context = canvas.getContext("2d");

canvas.width = window.innerWidth / 2;
canvas.height = window.innerHeight / 2;

let gameover = false;
let x = canvas.width / 2;
let y = canvas.height / 2;
let dx = 0;
let dy = 0;

const state = {
  "ArrowRight": false,
  "ArrowLeft": false,
  "ArrowUp": false,
  "ArrowDown": false
}

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

function determineDirection() {
  const {
    ArrowRight,
    ArrowLeft,
    ArrowUp,
    ArrowDown
  } = state
  if (ArrowRight && ArrowUp) {
    return {
      dx: .25,
      dy: -.25
    };
  }
  if (ArrowRight && ArrowDown) {
    return {
      dx: .25,
      dy: .25
    };
  }
  if (ArrowLeft && ArrowUp) {
    return {
      dx: -.25,
      dy: -.25
    };
  }
  if (ArrowLeft && ArrowDown) {
    return {
      dx: -.25,
      dy: .25
    };
  }
  if (ArrowLeft) {
    return {
      dx: -.25,
      dy: 0
    }
  }
  if (ArrowRight) {
    return {
      dx: .25,
      dy: 0
    }
  }
  if (ArrowUp) {
    return {
      dx: 0,
      dy: -.25
    }
  }
  if (ArrowDown) {
    return {
      dx: 0,
      dy: .25
    }
  }
  return {
    dx: 0,
    dy: 0
  }
}

function keyDownHandler({
  key
}) {
  state[key] = true;
}

function keyUpHandler({
  key
}) {
  state[key] = false;
}

function draw() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.beginPath();
  context.arc(x, y, 10, 0, Math.PI * 2, false);
  context.fillStyle = "red";
  context.fill();
  context.closePath();
}

function logic() {
  const direction = determineDirection();

  if (direction.dx) {
    dx = dx + direction.dx
  }

  if (direction.dy) {
    dy = dy + direction.dy
  }

  x = x + dx;
  y = y + dy;
;
  if (dx > 0) {
    dx -= 0.02;
  }
  if (dx < 0) {
    dx += 0.02;
  }
  if (dy > 0) {
    dy -= 0.02;
  }
  if (dy < 0) {
    dy += 0.02;
  }

}

function play() {
  draw();
  logic();
}

setInterval(play, 50);

<canvas id="game"></canvas>