为什么当我将图像的位置设置为变量时，我的玩家移动系统不起作用？

Question

我正在为我在 HTML5 画布中的多人 .io 游戏制作一个带有 WASD 键的玩家移动系统，当我添加移动系统然后更改 x、y 时）；来自常数的参数，如 100、100)；它显示了，但是当我将它更改为我的变量 PlayerX 和 PlayerY 时，它不再显示在画布上。

注意：我使用 .png 文件作为播放器图像，并使用 node.js 来制作服务器。 我正在使用的即时系统教程：https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard

var canvas = document.querySelector('#canvas');
var ctx = canvas.getContext('2d');

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

console.log(canvas);

function myFunction() {
  document.getElementById('container').style.opacity = "0";
  setTimeout(func2, 650)
}

function func2() {
  document.getElementById('canvas-container').style.display = "block";
}

//event listeners
document.addEventListener('keydown', keyDownHandler, false);
document.addEventListener('keyup', keyUpHandler, false);

//keypresses 
var rightPressed = false;
var leftPressed = false;
var upPressed = false;
var downPressed = false;

//keycode handlers
function keyDownHandler(event) {
  if (event.keyCode == 39) {
    rightPressed = true;
  } else if (event.keyCode == 37) {
    leftPressed = true;
  }
  if (event.keyCode == 40) {
    downPressed = true;
  } else if (event.keyCode == 38) {
    upPressed = true;
  }
}

function keyUpHandler(event) {
  if (event.keyCode == 39) {
    rightPressed = false;
  } else if (event.keyCode == 37) {
    leftPressed = false;
  }
  if (event.keyCode == 40) {
    downPressed = false;
  } else if (event.keyCode == 38) {
    upPressed = false;
  }
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  if (rightPressed) {
    playerX += 5;
  } else if (leftPressed) {
    playerX -= 5;
  }
  if (downPressed) {
    playerY += 5;
  } else if (upPressed) {
    playerY -= 5;
  }
  var image = new Image();
  image.src = 'client/img/pp.png'; // starts to load the image
  image.addEventListener("load", () => {

    ctx.drawImage(image, playerX, playerY, 75, 75); // image has loaded and can be drawn

  }, {
    once: true
  });

  requestAnimationFrame(draw);
}

body {
  margin: 0;
  padding: 0;
  background-image: url(trianglebg.png);
  background-size: 475px;
  background-color: rgb(245, 245, 245);
  overflow: hidden;
}

#container {
  transition: 0.6s;
  width: 100vw;
}

#canvas-container {
  display: none;
}

#canvas {}

@font-face {
  font-family: 'coconbold';
  src: url(Cocon-Bold-Font.otf);
  font-style: normal;
  font-weight: 100;
}

@font-face {
  font-family: 'coconregular';
  src: url(cocon-regular.otf);
  font-style: normal;
  font-weight: 100;
}

@font-face {
  font-family: 'coconlight';
  src: url(cocon-light.ttf);
  font-style: normal;
  font-weight: 100;
}

#outer {
  text-align: center;
  position: absolute;
  margin: 0;
  padding: 0;
  color: black;
  font-size: 7rem;
  font-family: coconbold;
  font-weight: 100;
  transform: translateX(-50%);
  -webkit-text-stroke: 20px black;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#inner {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-align: center;
  position: absolute;
  margin: 0;
  padding: 0;
  font-family: coconbold;
  font-weight: 100;
  transform: translateX(-50%);
  font-size: 7rem;
  background: linear-gradient(45deg, rgb(255, 41, 41) 15%, rgba(255, 121, 4, 1) 27%, rgba(252, 241, 73, 1) 40%, rgba(82, 252, 73, 1) 50%, rgba(73, 197, 252, 1) 60%, rgba(106, 53, 255, 1) 73%, rgba(150, 0, 214, 1) 85%);
  background-size: 200%;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  animation: anim 4s linear infinite alternate;
}

@keyframes anim {
  from {
    background-position: 0%;
  }
  to {
    background-position: 100%;
  }
}

#nickname {
  box-align: center;
  position: absolute;
  border-radius: 90px;
  top: 40%;
  left: 50%;
  margin: 0;
  padding: 3px 10px 0 9px;
  transform: translateX(-50%);
  width: 30%;
  height: 8%;
  outline: none;
  font-size: 50px;
  font-weight: 1px;
  border-color: lightgrey;
  background-color: rgb(247, 247, 247);
  border-width: 1px;
  font-family: coconbold;
  border-style: solid;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  caret-color: grey;
  animation-name: float-up-3;
  animation-duration: 2s;
}

input::placeholder {
  color: transparent;
}

#spawnif {
  box-align: center;
  position: absolute;
  border-radius: 90px;
  top: 36%;
  left: 50%;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  font-size: 20px;
  font-family: coconbold;
  color: black;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-text-stroke: 6px black;
  animation-name: float-up-2;
  animation-duration: 2s;
}

#spawnifin {
  box-align: center;
  position: absolute;
  border-radius: 90px;
  top: 36%;
  left: 50%;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  font-size: 20px;
  font-family: coconbold;
  color: rgb(245, 244, 244);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  animation-name: float-up-2;
  animation-duration: 2s;
}

#playbtnin {
  box-align: center;
  position: absolute;
  border-radius: 90px;
  width: 215px;
  height: 50px;
  top: 50%;
  left: 50%;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  font-size: 35px;
  font-family: coconbold;
  color: white;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border-color: transparent;
  border-style: solid;
  border-width: 3px;
  outline: none;
  animation-name: float-up-1;
  animation-duration: 2s;
}

#playbtnot {
  box-align: center;
  position: absolute;
  border-radius: 90px;
  width: 215px;
  height: 50px;
  top: 50%;
  left: 50%;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  font-size: 35px;
  font-family: coconbold;
  color: white;
  background-color: rgb(180, 179, 255);
  border-color: rgb(110, 107, 255);
  background-size: 500px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-style: solid;
  border-width: 3px;
  outline: none;
  animation-name: float-up-1;
  animation-duration: 2s;
  -webkit-text-stroke: 6px black;
}

#playbtn:hover {
  background-color: rgb(161, 171, 255);
  border-color: rgb(103, 101, 255);
}

.ctr {
  position: absolute;
  top: 15%;
  left: 50%;
  animation-name: float-in;
  animation-duration: 2s;
}

@keyframes float-in {
  from {
    top: -50%;
  }
  to {
    top: 15%;
  }
}

@keyframes float-up-1 {
  from {
    top: 150%;
  }
  to {
    top: 50%;
  }
}

@keyframes float-up-2 {
  from {
    top: 140%;
  }
  to {
    top: 36%;
  }
}

@keyframes float-up-3 {
  from {
    top: 150%;
  }
  to {
    top: 40%;
  }
}

#changeot {
  box-align: center;
  position: absolute;
  border-radius: 90px;
  top: 10px;
  left: 7%;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  font-size: 33px;
  font-family: coconbold;
  color: black;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-text-stroke: 5px black;
}

#changein {
  box-align: center;
  position: absolute;
  border-radius: 90px;
  top: 10px;
  left: 7%;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  font-size: 33px;
  font-family: coconbold;
  color: rgb(245, 244, 244);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#lastupin {
  box-align: center;
  position: absolute;
  border-radius: 90px;
  top: 48px;
  left: 9.5%;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  font-size: 18px;
  font-family: coconregular;
  color: rgb(245, 244, 244);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#lastupot {
  box-align: center;
  position: absolute;
  border-radius: 90px;
  top: 48px;
  left: 9.5%;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  font-size: 18px;
  font-family: coconregular;
  color: black;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-text-stroke: 5px black;
}

#toppin {
  box-align: center;
  position: absolute;
  border-radius: 90px;
  top: 90px;
  left: 13%;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  font-size: 13px;
  font-family: coconregular;
  color: rgb(245, 244, 244);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#toppot {
  box-align: center;
  position: absolute;
  border-radius: 90px;
  top: 90px;
  left: 13%;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  font-size: 13px;
  font-family: coconregular;
  color: black;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-text-stroke: 4px black;
}

#midpin {
  box-align: center;
  position: absolute;
  font-size: 13px;
  border-radius: 90px;
  top: 150px;
  left: 9.5%;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  font-family: coconregular;
  color: rgb(245, 244, 244);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#midpot {
  box-align: center;
  position: absolute;
  font-size: 13px;
  border-radius: 130px;
  top: 150px;
  left: 9.5%;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  font-family: coconregular;
  color: black;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-text-stroke: 4px black;
}

#versionnumin {
  box-align: center;
  position: absolute;
  border-radius: 90px;
  top: 635px;
  left: 11.25%;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  font-size: 24px;
  font-family: coconregular;
  color: rgb(245, 244, 244);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#versionnumot {
  box-align: center;
  position: absolute;
  border-radius: 90px;
  top: 635px;
  left: 11.25%;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  font-size: 24px;
  font-family: coconregular;
  color: black;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-text-stroke: 5px black;
}

#rbtn {
  box-align: center;
  position: absolute;
  border-radius: 10px;
  width: 50px;
  height: 50px;
  top: 600px;
  left: 1150px;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  font-size: 35px;
  font-family: coconbold;
  color: white;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: rgb(253, 135, 106);
  border-color: rgb(255, 31, 2);
  border-style: solid;
  border-width: 3px;
  outline: none;
}

#dbtn {
  box-align: center;
  position: absolute;
  border-radius: 10px;
  width: 50px;
  height: 50px;
  top: 600px;
  left: 1210px;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  font-size: 35px;
  font-family: coconbold;
  color: white;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: rgb(189, 204, 255);
  border-color: rgb(109, 112, 255);
  border-style: solid;
  border-width: 3px;
  outline: none;
}

#ibtn {
  box-align: center;
  position: absolute;
  border-radius: 10px;
  width: 50px;
  height: 50px;
  top: 600px;
  left: 1270px;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  font-size: 35px;
  font-family: coconbold;
  color: white;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: rgb(165, 117, 255);
  border-color: rgb(120, 2, 255);
  border-style: solid;
  border-width: 3px;
  outline: none;
}

#tbtn {
  box-align: center;
  position: absolute;
  border-radius: 10px;
  width: 50px;
  height: 50px;
  top: 600px;
  left: 1330px;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  font-size: 35px;
  font-family: coconbold;
  color: white;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: rgb(148, 207, 255);
  border-color: rgb(0, 110, 255);
  border-style: solid;
  border-width: 3px;
  outline: none;
}

#cinfoin {
  box-align: center;
  position: absolute;
  border-radius: 90px;
  top: 12px;
  right: -6%;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  font-size: 25px;
  font-family: coconregular;
  color: rgb(245, 244, 244);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#cinfoot {
  box-align: center;
  position: absolute;
  border-radius: 90px;
  top: 12px;
  right: -6%;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  font-size: 25px;
  font-family: coconregular;
  color: black;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-text-stroke: 5px black;
}

#mgbtnot {
  box-align: center;
  position: absolute;
  border-radius: 25px;
  width: 150px;
  height: 40px;
  top: 7px;
  left: 1095px;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  font-size: 19px;
  font-family: coconbold;
  color: white;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: rgb(159, 255, 151);
  border-color: rgb(61, 167, 57);
  border-style: solid;
  border-width: 3px;
  outline: none;
  -webkit-text-stroke: 4px black;
}

#mgbtnin {
  box-align: center;
  position: absolute;
  border-radius: 25px;
  width: 150px;
  height: 40px;
  top: 7px;
  left: 1095px;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  font-size: 19px;
  font-family: coconbold;
  color: white;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border-color: transparent;
  border-style: solid;
  border-width: 3px;
  outline: none;
}

<!DOCTYPE html>
<html lang='en'>

<head>
  <title>rainboz.io</title>
  <link rel="stylesheet" href='client/styles/main.css' type="text/css">
  <div id="canvas-container">
    <!-- Canvas container outside of container div -->
    <canvas id='canvas'></canvas>

  </div>
  <script src='client/js/script.js'></script>
  <script src='https://cdn.socket.io/socket.io-1.4.5.js'></script>
</head>

<body>
  <!--title-->
  <div id="container">
    <!--changelog-->
    <h2 id='changeot'>Changelog</h2>
    <h2 id="changein">Changelog</h2>

    <!--last upadated-->
    <h2 id='lastupot'>Last Updated: June 22, 2020</h2>
    <h2 id="lastupin">Last Updated: June 22, 2020</h2>

    <!--upadates-->
    <p id='toppot'>
      - I just created this changelog,<br/> this is where chages will go whenever I make them but <br/> I dont have any yet.

    </p>
    <p id='toppin'>
      - I just created this changelog,<br/> this is where chages will go whenever I make them but <br/> I dont have any yet.

    </p>

    <!--updates 2-->

    <p id='midpot'>
      - I barely even know how to code at all,<br/> so I'm kinda just winging it for now <br/> I'll just look up how to do stuff as I go.

    </p>

    <p id='midpin'>
      - I barely even know how to code at all,<br/> so I'm kinda just winging it for now <br/> I'll just look up how to do stuff as I go.
    </p>

    <h2 id="versionnumot">Version Number: 01.03.02</h2>
    <h2 id='versionnumin'>Version Number: 01.03.02</h2>

    <h2 id='cinfoot'>Contact | About</h2>
    <h2 id='cinfoin'>Contact | About</h2>

    <!--nickname and play button-->

    <div class='ctr'>
      <h1 id='outer'>rainboz.io</h1>
      <h1 id='inner'>rainboz.io</h1>
    </div>


    <div>

      <label id='spawnif'>this is the story of...</label>
      <label id='spawnifin'>this is the story of...</label>
      <input type='text' spellcheck='false' maxlength="20" autocomplete="off" id='nickname' placeholder="Nickname">
      <button id='playbtnot' onclick="myFunction()">Play</button>
      <button id='playbtnin' onclick="myFunction()">Play</button>

    </div>

    <form>
      <button id='rbtn'></button>
      <button id='dbtn'></button>
      <button id='ibtn'></button>
      <button id='tbtn'></button>
    </form>

    <button id='mgbtnot'>More Games</button>
    <button id='mgbtnin'>More Games</button>


  </div>

</body>

</html>

Answer 1

你还没有设置播放器的起始位置。

变量尚未启动，因此您将5 添加到undefined。结果是NaN。运行下一个 sn -p 看看会发生什么

undefinedVar();
definedVar();

function undefinedVar() {
    var playerX;  // playerX === undefined
    console.log(playerX + " + 5 = " + (playerX + 5))
}

function definedVar() {
    var playerX = 0;
    console.log(playerX + " + 5 = " + (playerX + 5))
}

添加你设置画布大小的播放器的起始位置；

/* Your code */
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

/* new code */
var playerX = innerWidth / 2
var playerY = innerHeight / 2

也不要在draw 函数中加载图像。在绘图函数之外加载一次。