Я пытаюсь заставить синий квадрат перемещаться по холсту с помощью клавиш со стрелками? - PullRequest
Новая
       7

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

0 голосов
/ 25 апреля 2018 
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;

DX и DY - позиция синего квадрата.Что я пытаюсь сделать, так это то, что при использовании клавиш со стрелками я перемещаю Положение синего квадрата. 

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;
}

Я думаю, что здесь в конце мне не хватает двухСтроки кода, что-то вроде вызова двух предыдущих функций?Вот где я запутался.

Это то, что у меня так далеко, что сейчас у меня не работает.Любая помощь будет оценена!

1 Ответ

0 голосов
/ 26 апреля 2018

Ошибка в вашем коде такова: 

setInterval('draw()', 25)

, когда оно должно быть 

setInterval(draw, 25)

Первый аргумент setInterval должен быть функцией, теперь это строка.

Вот моя простая Обновленная демонстрация с движущимися объектами на основе классов: https://jsfiddle.net/mulperi/oh7n3Lx9/

Также, посмотрите, почему requestAnimationFrame () лучше, чем setTimeout () или setInterval (): ПочемуrequestAnimationFrame лучше, чем setInterval или setTimeout

Для нажатий клавиш я предлагаю создать объект, который содержит логические значения для всех клавиш, а затем, например, для функций обновления различных объектов, таких как player, просто проверитьесли нажимаются нужные клавиши.

И вам больше не нужно использовать код клавиши, см. здесь: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

Надеюсь, это поможет вам!

Вот полный код моего подхода к перемещению объектов игрока по холсту.Это может помочь вам подумать о структуре вашего кода: 

<!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>
...