почему не меняется скорость мяча с клавиатуры

Question

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Keyboard input</title>
</head>
<body>
    <canvas id='canvas' width="400" height="400"></canvas>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script>
        'use strict';
       let canvas = document.getElementById('canvas');
       let ctx = canvas.getContext('2d');

       let width = canvas.width;
       let height = canvas.height;

       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.stroce();
           }
       };

       let Ball = function() {
        this.x = width / 2;
        this.y = height / 2;
        this.xSpeed = 1;
        this.ySpeed = 0;
        this.speed = 5;
        this.size = 10;
       };

       Ball.prototype.move = function() {
        this.x += this.xSpeed;
        this.y += this.ySpeed;
        if (this.x < 0 || this.x > width) {
            this.xSpeed = -this.xSpeed; 
        }
        if (this.y < 0 || this.y > height) {
            this.ySpeed = -this.ySpeed;
        }
       };

       Ball.prototype.draw = function() {
        circle(this.x, this.y, this.size, true);
       };

       Ball.prototype.setDirection = function(direction) {
        if (direction === 'up') {
            this.xSpeed = 0;
            this.ySpeed = this.speed * -1;
        } else if (direction === 'down') {
            this.xSpeed = 0;
            this.ySpeed = this.speed;
        } else if (direction === 'left') {
            this.xSpeed = -1 * this.speed;
            this.ySpeed = 0;
        } else if (direction === 'right') {
            this.xSpeed = this.speed;
            this.ySpeed = 0;
        } else if (direction === 'stop') {
            this.xSpeed = 0;
            this.ySpeed = 0;
        } else if (direction === "быстрее") {
            this.speed++;
        } else if (direction === "медленнее") {
            if (this.speed > 0) {
            this.speed--;
            }
        } else if (direction === "меньше") {
            if (this.size > 0) {
            this.size--;
            }
        } else if (direction === "больше") {
            this.size++;
        }
       };

       Ball.prototype.setSpeed = function(newspeed) {
           if (newspeed !== undefined) {
               this.speed = newspeed;
           }
       };

       let ball = new Ball();

       let keyActions = {
           32: 'stop',
           37: 'left',
           38: 'up',
           39: 'right',
           40: 'down',
           88: "быстрее",
           90: "медленнее",
           67: "меньше",
           86: "больше"
       };

       let speeds = {
            49: 1,
            50: 2,
            51: 3,
            52: 4,
            53: 5,
            54: 6,
            55: 7,
            56: 8,
            57: 9
       };

       $('body').keydown(function(event) {
        let speed = speeds[event.keyCode];
        ball.setSpeed(speed);
        let direction = keyActions[event.keyCode];
        ball.setDirection(direction);
       });

       setInterval(function(){
        ctx.clearRect(0, 0, width, height);
        ball.draw();
        ball.move();
        ctx.strokeRect(0, 0, width, height);

       }, 30);

    </script>
</body>
</html>

Answer 1

У Вас ошибка в алгоритмах расчета скорости. Правильный код:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Keyboard input</title>
</head>
<body>
    <canvas id='canvas' width="400" height="400"></canvas>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script>
        'use strict';
       let canvas = document.getElementById('canvas');
       let ctx = canvas.getContext('2d');

       let width = canvas.width;
       let height = canvas.height;

       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.stroce();
           }
       };

       let Ball = function() {
        this.x = width / 2;
        this.y = height / 2;
        this.xSpeed = 1;
        this.ySpeed = 0;
        this.speed = 5;
        this.size = 10;
       };

       Ball.prototype.move = function() {
        this.x += this.xSpeed*this.speed;
        this.y += this.ySpeed*this.speed;
        if (this.x < 0 || this.x > width) {
            this.xSpeed = -this.xSpeed; 
        }
        if (this.y < 0 || this.y > height) {
            this.ySpeed = -this.ySpeed;
        }
       };

       Ball.prototype.draw = function() {
        circle(this.x, this.y, this.size, true);
       };

       Ball.prototype.setDirection = function(direction) {
        if (direction === 'up') {
            this.xSpeed = 0;
            this.ySpeed = -1;
        } 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;
        } else if (direction === "быстрее") {
            this.speed++;
        } else if (direction === "медленнее") {
            if (this.speed > 0) {
            this.speed--;
            }
        } else if (direction === "меньше") {
            if (this.size > 0) {
            this.size--;
            }
        } else if (direction === "больше") {
            this.size++;
        }
       };

       Ball.prototype.setSpeed = function(newspeed) {
           if (newspeed !== undefined) {
               this.speed = newspeed;
           }
       };

       let ball = new Ball();

       let keyActions = {
           32: 'stop',
           37: 'left',
           38: 'up',
           39: 'right',
           40: 'down',
           88: "быстрее",
           90: "медленнее",
           67: "меньше",
           86: "больше"
       };

       let speeds = {
            49: 1,
            50: 2,
            51: 3,
            52: 4,
            53: 5,
            54: 6,
            55: 7,
            56: 8,
            57: 9
       };

       $('body').keydown(function(event) {
        let speed = speeds[event.keyCode];
        ball.setSpeed(speed);
        let direction = keyActions[event.keyCode];
        ball.setDirection(direction);
       });

       setInterval(function(){
        ctx.clearRect(0, 0, width, height);
        ball.draw();
        ball.move();
        ctx.strokeRect(0, 0, width, height);

       }, 30);

    </script>
</body>
</html>

БЛОГ НА HUSL

почему не меняется скорость мяча с клавиатуры

Ответы (1 шт):