Изменить скорость движения мяча с клавиатуры

227

06 августа 2021, 13:40

Я создал обработчик нажатий клавиш, который передаёт инфу о нажатии keydown в переменную speed со значением в соответствии нажатия клавиш. Значения определяются объектом speeds. Дальше создал в конструкторе Ball новое свойство speed, хранящее скорость мяча, и использовал его в методе setDirection, через аргумент. Добавил аргументу значение по умолчанию так как мяч пропадал. Судя по всему он не передаёт скорость в метод setDirection. Надо чтобы скорость менялась в зависимости от нажатия клавиш

let canv = document.getElementById('canv'), 
  ctx = canv.getContext('2d'), 
  width = canv.width, 
  height = canv.height; 
let circle = (x, y, radius, fillCircle) => { 
  ctx.beginPath(); 
  ctx.arc(x, y, radius, 0, Math.PI * 2, false); 
  if (fillCircle) { 
    ctx.fill(); 
  } else { 
    ctx.stroke(); 
  } 
}; 
let Ball = function() { 
  this.x = width / 2; 
  this.y = height / 2; 
  this.xSpeed = 5; 
  this.ySpeed = 0; 
  this.speed = 5; // свойство скорости, которое должно изменяться в 
  //зависимости от нажатия, установил начальную, но она не меняется. 
}; 
Ball.prototype.move = function() { 
  this.x += this.xSpeed; 
  this.y += this.ySpeed; 
  if (this.x < 10) { 
    this.xSpeed = 5 
  } else if (this.x > width - 10) { 
    this.xSpeed = -5 
  } else if (this.y < 10) { 
    this.ySpeed = 5 
  } else if (this.y > height - 10) { 
    this.ySpeed = -5 
  } 
}; 
Ball.prototype.draw = function() { 
  circle(this.x, this.y, 10, true); 
}; 
Ball.prototype.setDirection = function(direction, speed = 5) { 
  if (direction === "down") { 
    this.ySpeed = speed; 
    this.xSpeed = 0 
  } else if (direction === "up") { 
    this.ySpeed = -speed; 
    this.xSpeed = 0 
  } else if (direction === "right") { 
    this.xSpeed = speed; 
    this.ySpeed = 0 
  } else if (direction === "left") { 
    this.xSpeed = -speed; 
    this.ySpeed = 0 
  } else if (direction === "stop") { 
    this.ySpeed = 0; 
    this.xSpeed = 0 
  } 
}; 
let ball = new Ball; 
let keyAction = { 
  32: "stop", 
  37: "left", 
  38: "up", 
  39: "right", 
  40: "down", 
}; 
$('body').keydown((event) => { 
  var direction = keyAction[event.keyCode]; 
  ball.setDirection(direction); 
}); 
let speeds = { 
  49: 1, 
  50: 2, 
  51: 3, 
  52: 4, 
  53: 5, 
  54: 6, 
  55: 7, 
  56: 8, 
  57: 9 
}; 
$('body').keydown((event) => { // а это сам обработчик  
  var speed = speeds[event.keyCode]; 
  ball.setDirection(null, speed); 
}); 
 
 
setInterval(() => { 
  ctx.clearRect(0, 0, width, height); 
  ball.draw(); 
  ball.move(); 
  ctx.strokeRect(0, 0, width, height); 
}, 30);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
<canvas id="canv" width="300" height="300"></canvas>

Answer 1

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ball game</title>
</head>
<body>
  <canvas class="" id="canvas" width="400" height="400"></canvas>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');
    let width = canvas.width;
    let height = canvas.height;
    let speeds = {
      96: 0,
      97: 1,
      98: 2,
      99: 3,
      100: 4,
      101: 5,
      102: 6,
      103: 7,
      104: 8,
      105: 9
    }
    let circle = function (x, y, radius, fillCircle) {
      ctx.beginPath();
      ctx.arc(x, y, radius, 0, Math.PI*2, false);
      if (fillCircle) {
        ctx.fill();
      } else {
        ctx.stroke();
      };
    };
    let Ball = function () {
      this.x = width / 2;
      this.y = height / 2;
      this.speed = 0;
      this.xSpeed = 1;
      this.ySpeed = 0;
    };
    Ball.prototype.move = function () {
      this.x += this.xSpeed*this.speed;
      this.y += this.ySpeed*this.speed;
      if (this.x < 10 || this.x > width-10) {
        this.xSpeed = -this.xSpeed;
      };
      if (this.y < 10 || this.y > height-10) {
        this.ySpeed = -this.ySpeed;
      }
      // console.log('MoveX ' + this.xSpeed);
    };
    Ball.prototype.draw = function () {
      circle(this.x, this.y, 10, true);
    }
    Ball.prototype.setDirection = function (direction) {
      if (direction === 'up' ) {
        this.xSpeed = 0;
        this.ySpeed = -1;
        console.log(this.speed);
      } else if (direction === 'down' ) {
        this.xSpeed = 0;
        this.ySpeed = 1;
      } else if (direction === 'left' ) {
        this.xSpeed = -1;
        this.ySpeed = 0;
      } else if ( direction === 'right' ) {
        this.xSpeed = 1;
        this.ySpeed = 0;
      } else if (direction === 'stop' ) {
        this.xSpeed = 0;
        this.ySpeed = 0;
      }
      console.log('Direction ' + this.xSpeed)
    };
    Ball.prototype.setSpeed = function (newSpeed) {
      if (newSpeed !== undefined) {
        this.speed = newSpeed;
        console.log(this.speed)
      }
    }
    let ball = new Ball();
    let keyActions = {
      32: 'stop',
      37: 'left',
      38: 'up',
      39: 'right',
      40: 'down',
    };
    $('body').keydown(function (event) {
        let direction = keyActions[event.keyCode];
        let speed = speeds[event.keyCode];
        ball.setDirection(direction);
        ball.setSpeed(speed);
    });
    setInterval(function () {
      ctx.clearRect(0, 0, width, height);
      ball.draw();
      ball.move();
      ctx.strokeRect(0, 0, width, height);
    }, 30);

Answer 2

$('body').keydown(function (event) {
        if( event.keyCode === 32 ||
        event.keyCode === 37 ||
        event.keyCode === 38 || 
        event.keyCode === 39 ||
        event.keyCode === 40) {
            let direction = keyActions[event.keyCode];
            ball.setDirection(direction);
        } else {
            speed = speeds[event.keyCode];
        }
})

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как написать скрипт , который реагирует на изменение значения?

Мне нужно написать скрипт, который реагирует на изменение значения input#font-size-slider (событие input) и обновляет инлайн-стиль span#text обновляя его...

272

c++

Умеет ли tuple работать в цикле

Необходимо пройти по всему кортежу и выводить результат каждого проходаВ итоге работы программы на экран должны быть выведены все элементы...

364

c++

Ошибка C4700 VS 2019

Ошибка Severity Code Description Project File Line Suppression State Error C4700 uninitialized local variable 'tmp_double_vector' used isdt Isodatacpp 186

149

c++

Существует ли в C++ макрос с именем класса?

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

164