Javascript: перемещение объекта на холсте (пытается освоить объектно-ориентированное программирование) - PullRequest
Новая
       17

Javascript: перемещение объекта на холсте (пытается освоить объектно-ориентированное программирование)

0 голосов
/ 25 февраля 2019

Итак, я хочу сделать простую игру Snake, но я уже застрял в движущейся части.

Это код, который работает, если я нажимаю кнопку onclick = "snake.show ()"и когда я нажимаю кнопку, прямоугольник перемещается.(snake.show () также находится в теле загрузки) 

    var width = 800;
    var height = 400;
    var x = width/2;
    var y = height/2;

    class Snake{
        show(){
            var c = document.getElementById("canvas");
            var ctx = c.getContext("2d");
            ctx.rect(x, y, 20, 5);
            ctx.fill();
            x++;
        }
        //update(){}
    }

    let snake = new Snake();

, но вместо этого я хочу сделать что-то вроде этого: 

    var width = 800;
    var height = 400;
    var x = width/2;
    var y = height/2;

    class Snake{
        show(){
            var c = document.getElementById("canvas");
            var ctx = c.getContext("2d");
            ctx.rect(x, y, 20, 5);
            ctx.fill();
        }
        update(){
            x++;
        }
    }

И вызвать функцию update ()если мне нужно переместить прямоугольник, но это не работает.Извините за мой плохой английский, спасибо за советы и за помощь!

1 Ответ

0 голосов
/ 25 февраля 2019
  1. Объявление холста и контекста как глобальных переменных (только один раз).
  2. Классу нужен метод конструктора.
  3. Я обновляю и снова показываю змею при нажатии клавишистрелка вправо.

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

const c = document.querySelector("canvas");
const ctx = c.getContext("2d");

const width = (c.width = 800);
const height = (c.height = 400);

class Snake {
  constructor() {
    this.x = width / 2;
    this.y = height / 2;
  }
  show() {
    ctx.beginPath();
    ctx.rect(this.x, this.y, 20, 5);
    ctx.fill();
  }
  update() {
    this.x+=20;
  }
}

let snake = new Snake();
snake.show();

window.addEventListener("keydown", e => {
  
  if (e.keyCode == 39) {
    ctx.clearRect(0,0,width,height);
    snake.update();
    snake.show();
  }
});
canvas{border:1px solid}
<canvas id="canvas"></canvas>
...