Javascript I'；我想用箭头键让一个蓝色方块在画布上移动？

DX和DY是蓝色正方形的位置。我试图实现的是，当使用箭头键时，我移动蓝色正方形的位置

const WIDTH = 640;
const HEIGHT = 480;
const PLAYER_SIZE = 20;
const REPAINT_DELAY = 50;
const EASY_DELAY = 1750;
const MODERATE_DELAY = 1000;
const HARD_DELAY = 750;
const MAX_BLOCKS = 100;


var context;
var DX;
var DY;

var rightKey=false；
var leftKey=false；
var-upKey=false；
var downKey=false；
window.onload=init；
函数init（）
{
canvas=document.getElementById（“myCanvas”）；
context=canvas.getContext（“2d”）；
context.fillStyle=“#0000FF”；
DX=宽度/2-播放器大小/2；
DY=高度/2-球员尺寸/2；
setInterval（'draw（）'，25）
}
函数clearCanvas（）
{
clearRect（0,0，宽度，高度）；
}
函数绘图（）
{
clearCanvas（）；
如果（右键）DX+=5；
如果（左键）DX-=5，则为else；
如果（向上键）DY-=5；
否则，如果（向下键）DY+=5；
如果（DX=宽度）DX=宽度-DY；
如果（DY=高度）DY=高度-DX；
fillRect（DX，DY，PLAYER\u SIZE，PLAYER\u SIZE）；
}
函数onKeyDown（evt）{
如果（evt.keyCode==39）rightKey=true；
如果（evt.keyCode==37）leftKey=true，则为else；
如果（evt.keyCode==38）upKey=true；
如果（evt.keyCode==40）downKey=true，则为else；
}
功能onKeyUp（evt）{
如果（evt.keyCode==39）rightKey=false；
如果（evt.keyCode==37）leftKey=false，则为else；
如果（evt.keyCode==38）upKey=false；
如果（evt.keyCode==40）downKey=false，则为else；
}

我想最后我缺少了两行调用前面两个函数的代码？这就是我感到困惑的地方

---

这就是我目前所拥有的，目前还不适合我。任何帮助都将不胜感激

代码中的错误如下：

var rightKey = false;
var leftKey = false;
var upKey = false;
var downKey = false;


window.onload = init;

function init()
{
  canvas = document.getElementById("myCanvas");
  context = canvas.getContext("2d");
  context.fillStyle = "#0000FF";
  DX = WIDTH / 2 - PLAYER_SIZE / 2;
  DY = HEIGHT / 2 - PLAYER_SIZE / 2;
  setInterval('draw()', 25)
}

function clearCanvas()
{
  context.clearRect(0,0,WIDTH,HEIGHT);  
}

function draw()
{
  clearCanvas();
  if (rightKey) DX += 5;
  else if (leftKey) DX -= 5;
  if (upKey) DY -= 5;
  else if (downKey) DY += 5;
  if (DX <= 0) DX = 0;
  if ((DX + DY) >= WIDTH) DX = WIDTH - DY;
  if (DY <= 0) DY = 0;
  if ((DY + DX) >= HEIGHT) DY = HEIGHT - DX;
  context.fillRect(DX, DY, PLAYER_SIZE, PLAYER_SIZE);
 }

 function onKeyDown(evt) {
   if (evt.keyCode == 39) rightKey = true;
   else if (evt.keyCode == 37) leftKey = true;
   if (evt.keyCode == 38) upKey = true;
   else if (evt.keyCode == 40) downKey = true;
 }

function onKeyUp(evt) {
 if (evt.keyCode == 39) rightKey = false;
 else if (evt.keyCode == 37) leftKey = false;
 if (evt.keyCode == 38) upKey = false;
 else if (evt.keyCode == 40) downKey = false;
}

应该是什么时候

setInterval('draw()', 25)

setInterval的第一个参数应该是function，现在它是一个字符串

这是我的简单建议 更新了基于类的移动对象演示：

另外，请参见为什么requestAnimationFrame（）比setTimeout（）或setInterval（）更好：

对于按键操作，我建议您创建一个对象，该对象保存所有键的布尔值，然后在不同对象（例如player）的更新函数上，您只需检查是否按下了所需的键

您不需要再使用keyCode，请参见此处：

我希望这对你有帮助

下面是我在画布上移动播放器对象的完整代码。它可以帮助您思考代码的结构：

setInterval(draw, 25)

世界上最好的游戏
2人移动
基于类的播放器对象和键盘控件

使用箭头键和WASD键移动球

const c=document.getElementById（“画布”）；
const ctx=c.getContext（“2d”）；
让设置={
宽度：100，
身高：100，
速度：1
};
c、 宽度=设置。宽度；
c、 高度=设置。高度；
/*
为每个按键保留布尔值的对象
*/
让按键={}；
函数listenKeyboard（）{
文件。添加的文件列表（“键控”，键控）；
文件。添加的文件列表（“键控”，键控）；
};
常数keyUp=e=>{
按键[e.键]=假；
};
const keyDown=e=>{
//console.log（e.key）
按键[e.键]=真；
};
职业选手{
构造函数（x、y、颜色、左、右、上、下、半径）{
这个.x=x；
这个。y=y；
这个颜色=颜色；
this.left=左；
这个。右=右；
this.up=up；
this.down=向下；
这个半径=半径；
}
画（）{
ctx.fillStyle=this.color；
ctx.beginPath（）；
ctx.arc（this.x，this.y，this.radius，0，Math.PI*2，false）；
ctx.closePath（）；
ctx.fill（）；
}
更新（）{
if（按[this.left]键）{
此.x-=settings.speed；
}
if（按[this.right]键）{
此.x+=settings.speed；
}
if（按[this.up]键）{
此.y-=设置.speed；
}
if（按[this.down]键）{
此.y+=settings.speed；
}
//屏幕边界
如果（this.x<0+this.radius）this.x=0+this.radius；
如果（this.y<0+this.radius）this.y=0+this.radius；
如果（this.x>settings.width-this.radius）this.x=settings.width-this.radius；
如果（this.y>settings.height-this.radius）this.y=settings.width-this.radius；
}
}
/*
创建播放器对象
*/
让p1=新玩家（25，25，“红色”，“箭头左”，“箭头右”，“箭头向上”，“箭头向下”，10）；
让p2=新玩家（75，75，“黑色”，“a”，“d”，“w”，“s”，5）；
函数绘图（）{
clearRect（0，0，settings.width，settings.height）；
p1.draw（）；
p2.draw（）；
};
函数更新（）{
draw（）；
listenKeyboard（）；
p1.update（）；
p2.update（）；
requestAnimationFrame（更新）；
};
requestAnimationFrame（更新）；

嘿，我的答案对你有什么帮助吗？你不确定你是否试图通过使用箭头键在画布上移动一个蓝色方块？在我的答案中添加了新信息，请查看并接受，你满意吗。代码中的错误在setInterval第一个参数中。请接受或评论好吗？@seignix1155您已在此处登录，但没有回复我的评论或回答？如果你不接受答案，你为什么要问？

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>World's BEstest Game</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body>
    <h1 style="font-family: Comic Sans MS; color: hotpink; text-shadow: 2px 2px 2px pink">2 Player Movement</h1>
    <p>Class based player objects and keyboard controls</p>
    <p>Use the arrow and WASD keys to move your balls</p>
    <canvas id="canvas" style="border:1px solid black; border-radius: 5px;">

    </canvas>
    <script>
      const c = document.getElementById("canvas");
      const ctx = c.getContext("2d");

      let settings = {
        width: 100,
        height: 100,
        speed: 1
      };

      c.width = settings.width;
      c.height = settings.height;

      /*
        Object holding boolean values for every keypress
      */
      let keyPresses = {};

      function listenKeyboard() {
        document.addEventListener("keyup", keyUp);
        document.addEventListener("keydown", keyDown);
      };

      const keyUp = e => {
        keyPresses[e.key] = false;
      };

      const keyDown = e => {
        // console.log(e.key)
        keyPresses[e.key] = true;
      };



      class Player {

        constructor(x, y, color, left, right, up, down, radius) {
          this.x = x;
          this.y = y;
          this.color = color;
          this.left = left;
          this.right = right;
          this.up = up;
          this.down = down;
          this.radius = radius;
        }

        draw() {
          ctx.fillStyle = this.color;
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
          ctx.closePath();
          ctx.fill();
        }

        update() {
          if (keyPresses[this.left]) {
            this.x -= settings.speed;
          }
          if (keyPresses[this.right]) {
            this.x += settings.speed;
          }
          if (keyPresses[this.up]) {
            this.y -= settings.speed;
          }
          if (keyPresses[this.down]) {
            this.y += settings.speed;
          }

                    // Screen bounds
          if (this.x < 0 + this.radius) this.x = 0 + this.radius;
          if (this.y < 0 + this.radius) this.y = 0 + this.radius;
          if (this.x > settings.width - this.radius) this.x = settings.width - this.radius;
          if (this.y > settings.height - this.radius) this.y = settings.width - this.radius;
        }

      }

      /*
          Creating the player objects
      */
      let p1 = new Player(25, 25, "red", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", 10);
      let p2 = new Player(75, 75, "black", "a", "d", "w", "s", 5);

      function draw() {
        ctx.clearRect(0, 0, settings.width, settings.height);
        p1.draw();
        p2.draw();
      };

      function update() {
        draw();
        listenKeyboard();
        p1.update();
        p2.update();
        requestAnimationFrame(update);
      };

      requestAnimationFrame(update);

    </script>
  </body>

</html>