Ghostdragon777 Ответов: 1

Я пытаюсь создать движущийся символ, и мой код не работает?

В Html и Javascript я пытаюсь заставить символ двигаться с помощью клавиш wasd. Я перепробовал все, что мог, и не могу заставить это работать. Можете ли вы сказать мне, как это сделать? Кроме того, вы можете быть довольно конкретны... Я вроде как Новичок. Вот код.


<!DOCTYPE html>
<canvas id="ctx" height="800" width="1500" style="border:1px solid #000000;"></canvas>
<script>

 var ctx = document.getElementById("ctx").getContext("2d");

  var player = {
    x: 750,
    y: 400,
    pressW: false,
    pressS: false,
    pressA: false,
    pressD: false,
  };

  ctx.fillStyle = "blue";
  ctx.rect(player.x, player.y, 50,50);

  document.onkeydown = function(event){
    if (event.keyCode == 87) //w
      player.pressW = true;
    else if (event.keycode == 83) //s
      player.pressS = true;
    else if (event.keyCode == 65) //a
      player.pressA = true;
    else if (event.keycode == 68) //d
      player.pressD = true;
  }

  document.onkeyup = function(event){
    if (event.keyCode == 87) //w
      player.pressW = false;
    else if (event.keycode == 83) //s
      player.pressS = false;
    else if (event.keyCode == 65) //a
      player.pressA = false;
    else if (event.keycode == 68) //d
      player.pressD = false;
  }

  function updatePlayerPosition(){
    if (player.pressW == true)
      player.y -= 10;
    if (player.pressS == true)
      player.y += 10;
    if (player.pressA == true)
      player.x -= 10;
    if (player.pressD == true)
      player.x += 10;
  }

  function drawPlayer(){
    ctx.fillStyle = "blue";
    ctx.fillRect(player.x, player.y, 50,50);
  }

  function Update(){
    ctx.clearRect(0,0,1500,800)
    updatePlayerPosition();
    drawPlayer();
  }

setInterval(Update, 100);

</script>
<style>

  canvas {
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

</style>


Что я уже пробовал:

Я перепробовал все, что мог, и не могу заставить это работать

Patrice T

Никаких репостов, пожалуйста.

1 Ответов

Рейтинг:
12

Parveen Siwach

Привет,

Единственная проблема с вашим кодом-это чувствительность к регистру.

document.onkeydown = function(event){
    if (event.keyCode == 87) //w
      player.pressW = true;
    else if (event.keyCode == 83) //s
      player.pressS = true;
    else if (event.keyCode == 65) //a
      player.pressA = true;
    else if (event.keyCode == 68) //d
      player.pressD = true;
  }
 
  document.onkeyup = function(event){
    if (event.keyCode == 87) //w
      player.pressW = false;
    else if (event.keyCode == 83) //s
      player.pressS = false;
    else if (event.keyCode == 65) //a
      player.pressA = false;
    else if (event.keyCode == 68) //d
      player.pressD = false;
  }


Попробуйте следующий код, чтобы решить вашу проблему:


<!DOCTYPE html>
<canvas id="ctx" height="800" width="1500" style="border:1px solid #000000;"></canvas>
<script>
 
 var ctx = document.getElementById("ctx").getContext("2d");
 
  var player = {
    x: 750,
    y: 400,
    pressW: false,
    pressS: false,
    pressA: false,
    pressD: false,
  };
 
  ctx.fillStyle = "blue";
  ctx.rect(player.x, player.y, 50,50);
 
  document.onkeydown = function(event){
    if (event.keyCode == 87) //w
      player.pressW = true;
    else if (event.keyCode == 83) //s
      player.pressS = true;
    else if (event.keyCode == 65) //a
      player.pressA = true;
    else if (event.keyCode == 68) //d
      player.pressD = true;
  }
 
  document.onkeyup = function(event){
    if (event.keyCode == 87) //w
      player.pressW = false;
    else if (event.keyCode == 83) //s
      player.pressS = false;
    else if (event.keyCode == 65) //a
      player.pressA = false;
    else if (event.keyCode == 68) //d
      player.pressD = false;
  }
 
  function updatePlayerPosition(){
    if (player.pressW == true)
      player.y -= 10;
    if (player.pressS == true)
      player.y += 10;
    if (player.pressA == true)
      player.x -= 10;
    if (player.pressD == true)
      player.x += 10;
  }
 
  function drawPlayer(){
    ctx.fillStyle = "blue";
    ctx.fillRect(player.x, player.y, 50,50);
  }
 
  function Update(){
    ctx.clearRect(0,0,1500,800)
    updatePlayerPosition();
    drawPlayer();
  }
 
setInterval(Update, 100);
 
</script>
<style>
 
  canvas {
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
 
</style>


Спасибо,