Блог

Главная - Вопросы по программированию - Вращение и перемещение объекта (следуйте за мышью) — Javascript

Вращение и перемещение объекта (следуйте за мышью) — Javascript

#javascript

#javascript

Вопрос:

все!

Я хочу создать небольшой танк, который будет следовать за мышью и поворачивать свою пушку в направлении мыши.

Я заключил сделку, следуя за мышью, но я никак не могу повернуть пистолет в сторону мыши. Мой код:

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

// browser window size
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;

//set canvas size
canvas.width = windowWidth;
canvas.height = windowHeight;

var mouseX = 0;
var mouseY = 0;
var baseAngle = 1;

class Cannon {
    constructor(x,y, angle, size, speed){
        this.x = x;
        this.y = y;
        this.angle = angle;
        this.size = size;
        this.speed = speed;
    }

    draw() {
        // bullet
        ctx.setTransform(1, 0, 0, 1, this.x, this.y - (this.size/2));
        ctx.translate(this.x, this.y);
        ctx.rotate(baseAngle);
        
        ctx.beginPath();
        ctx.rect(this.x, this.y - (this.size/2), this.size*2, this.size);
        ctx.fillStyle = 'rgb(192,192,192)';
        ctx.fill();
        ctx.lineWidth = 3;
        ctx.strokeStyle = 'rgba(128,128,128)';
        ctx.stroke();
        ctx.closePath();

        //body
        
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
        ctx.fillStyle = 'rgb(0,96,255)';
        ctx.fill();
        ctx.lineWidth = 3;
        ctx.strokeStyle = 'rgba(128,128,128)';
        ctx.stroke();
        ctx.closePath();
    }

    update() {
        // mooving
        var dx = (mouseX - this.x)*.125;
        var dy = (mouseY - this.y)*.125;

        var dist = Math.sqrt(dx*dx   dy*dy);

        if(dist > this.speed){
            dx *= this.speed / dist;
            dy *= this.speed / dist;    
        }

        this.x  = dx;
        this.y  = dy;

        // rootating

        baseAngle = Math.atan2(mouseY - this.y, mouseX - this.x);
    }
}

const newCannon = new Cannon(80,60, 1, 20, 7);
onmousemove = function(e){
    mouseX = e.clientX;
    mouseY = e.clientY;
}


function gameUpdate() {
    ctx.setTransform(1, 0, 0, 1, 0, 0); // reset transform
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    newCannon.draw();
    newCannon.update();
    requestAnimationFrame(gameUpdate);
}
gameUpdate();  
 <!DOCTYPE html>
<html>
<head>
    <title>CRUSH DEMO</title>
</head>
<body>


<canvas id="canvas"></canvas>

</body>
</html>

Пушка должна быть повернута в направлении мыши (сам круг не должен вращаться).

помогите мне, пожалуйста, исправить код!

Комментарии:

1. похоже, вам нужно определить угол между мышью и пушкой, а затем повернуть пушку на основе этого. Проверьте math.stackexchange.com/questions/317874 /…

2. один из ответов в вашей ссылке используется в моем коде (atan)