Помогите! Не могу сделать поворот башни на танке!
 

Хочу сделать игру на js, дошло дело до башни и тут у меня появилась проблема, мне надо сделать так чтобы башня поварачивалась за курсором с заданой скорость, но у меня не получается. :(
Весь инет перешарил, но ничего не нашёл. :(
Пожалуйста помогите:help: , буду очень благодарен.:thanks:
Вот мои коды(Полный код есть в архиве):
js/gameprocces.js

var Timer = {
    Work: null, Implement: 0,
    Update: 10, Time: 0,
    MilliSeconds: 0, Seconds: 0,
    Minutes: 0, Hours: 0, Day: 0}
var Key = [
    [87, "false", 0, "W"],
    [65, "false", 0, "A"],
    [83, "false", 0, "S"],
    [68, "false", 0, "D"]],
    Zoom = 1,
    CanvasGame = document.querySelector("#CanvasGame"),
    GC = CanvasGame.getContext("2d"),
    Display = {
        Center: {
            X: document.documentElement.clientWidth / 2,
            Y: document.documentElement.clientHeight / 2
        }
    },
    Angle = {
        Body: {Rotate: Math.PI, X: null, Y: null, route: null},
        Tower: {Rotate: Math.PI, X: null, Y: null, route: null, two: null},
        Mouse: {Rotate: Math.PI, X: null, Y: null, two: null}
    },
    Position = {
        Mouse: {X: null, Y: null,
            Click: {X: null, Y: null},
            From: {
                Display: {
                    Center: {
                        X: null,
                        Y: null
                    }
                }
            }
        }
    }
CanvasGame.width = document.documentElement.clientWidth;
CanvasGame.height = document.documentElement.clientHeight;
var GameProcess = {
    Work: null, Implement: 0,
    Update: 1
}
var Draw = {
    Work: null, Implement: 0,
    Update: 10
}

Timer.Work = setInterval(function() {
    Timer.Implement++;
    Timer.Time++;
    Timer.MilliSeconds++;
    if (Timer.MilliSeconds == 100) {Timer.Seconds++; Timer.Milliseconds = 0}
    if (Timer.Seconds == 60) {Timer.Minutes++; Timer.Seconds = 0}
    if (Timer.Minutes == 60) {Timer.Hours++; Timer.Minutes = 0}
    if (Timer.Hours == 60) {Timer.Days++; Timer.Hours = 0}
}, Timer.Update)

document.addEventListener('mousemove', function (e) {
    Position.Mouse.X = e.pageX;
    Position.Mouse.Y = e.pageY
}, false)
document.addEventListener('click', function (e) {
    Position.Mouse.Click.X = e.pageX;
    Position.Mouse.Click.Y = e.pageY
}, false)
document.addEventListener('keydown', function (e) {
    for (var I = 0; I < Key.length; I++) {
    if (e.keyCode == Key[I][0]) Key[I][1] = "true"}
}, false)
document.addEventListener('keyup', function (e) {
    for (var I = 0; I < Key.length; I++) {
    if (e.keyCode == Key[I][0]) Key[I][1] = "false"}
}, false)

GameProcess.Work = setInterval(function() {
    Position.Mouse.From.Display.Center.X = Display.Center.X - Position.Mouse.X;
    Position.Mouse.From.Display.Center.Y = Display.Center.Y - Position.Mouse.Y;
	if (Position.Mouse.From.Display.Center.X == 0) (Position.Mouse.From.Display.Center.Y > 0) ? (3 * Math.PI) / 2 : Math.PI / 2;
	Angle.Mouse.Rotate = Math.atan(Position.Mouse.From.Display.Center.Y / Position.Mouse.From.Display.Center.X);
	Angle.Mouse.Rotate += Math.PI/2;
	if (Position.Mouse.From.Display.Center.X < 0) Angle.Mouse.Rotate = Angle.Mouse.Rotate - Math.PI;
	Angle.Mouse.X = Math.sin(Angle.Mouse.Rotate);
	Angle.Mouse.Y = Math.cos(Angle.Mouse.Rotate);
    
	if (Key[1][1] == "true") Angle.Body.Rotate -= Math.PI/1024;
	if (Key[3][1] == "true") Angle.Body.Rotate += Math.PI/1014;
	if (Angle.Body.Rotate > Math.PI) Angle.Body.Rotate = -Angle.Body.Rotate + Math.PI/1024;
	if (Angle.Body.Rotate < -Math.PI) Angle.Body.Rotate = -Angle.Body.Rotate - Math.PI/1024;

	/*if (Angle.Tower.Rotate > Math.PI) Angle.Tower.Rotate = -Angle.Tower.Rotate + 0.03;
	if (Angle.Tower.Rotate < -Math.PI) Angle.Tower.Rotate = -Angle.Tower.Rotate - 0.03;*/
	/*if (Angle.Tower.Rotate != Angle.Mouse.Rotate) {
        if (Angle.Mouse.Rotate < Angle.Tower.Rotate && Angle.Mouse.Rotate > 0 && Angle.Tower.Rotate > 0) {Angle.Tower.Rotate -= 0.01}
        if (Angle.Mouse.Rotate > Angle.Tower.Rotate && Angle.Mouse.Rotate > 0 && Angle.Tower.Rotate > 0) {Angle.Tower.Rotate += 0.01}
        if (Angle.Mouse.Rotate < Angle.Tower.Rotate && Angle.Mouse.Rotate < 0 && Angle.Tower.Rotate < 0) {Angle.Tower.Rotate -= 0.01}
        if (Angle.Mouse.Rotate > Angle.Tower.Rotate && Angle.Mouse.Rotate < 0 && Angle.Tower.Rotate < 0) {Angle.Tower.Rotate += 0.01}

        if (Angle.Mouse.Rotate < Angle.Tower.Rotate && Angle.Mouse.Rotate < 0 && Angle.Tower.Rotate > 0) {Angle.Tower.Rotate += 0.01}
        if (Angle.Mouse.Rotate > Angle.Tower.Rotate && Angle.Mouse.Rotate > 0 && Angle.Tower.Rotate < 0) {Angle.Tower.Rotate -= 0.01}
        if (Angle.Mouse.Rotate < Angle.Tower.Rotate && Angle.Mouse.Rotate > 0 && Angle.Tower.Rotate < 0) {Angle.Tower.Rotate += 0.01}
        if (Angle.Mouse.Rotate > Angle.Tower.Rotate && Angle.Mouse.Rotate < 0 && Angle.Tower.Rotate > 0) {Angle.Tower.Rotate -= 0.01}
    }*/
    /*if (Angle.Tower.Rotate > 0 && Angle.Mouse.Rotate > 0) {Angle.Tower.two = Angle.Tower.Rotate - Angle.Mouse.Rotate}
    //if (Angle.Tower.Rotate < 0 && Angle.Mouse.Rotate < 0) {Angle.Tower.two = Angle.Tower.Rotate - Angle.Mouse.Rotate}
    //if (Angle.Tower.Rotate < 0 && Angle.Mouse.Rotate > 0) {Angle.Tower.two = Math.PI - Angle.Tower.Rotate + Angle.Mouse.Rotate}
    //if (Angle.Tower.Rotate > 0 && Angle.Mouse.Rotate < 0) {Angle.Tower.two = Math.PI - Angle.Tower.Rotate + Angle.Mouse.Rotate}*/
    //Angle.Tower.two = Angle.Tower.Rotate - ((Angle.Mouse.Rotate < 0) ? -Angle.Mouse.Rotate : Angle.Mouse.Rotate);
    //Angle.Tower.two = Angle.Tower.Rotate - Angle.Mouse.Rotate;
    if(Angle.Mouse.Rotate <= Math.PI && Angle.Mouse.Rotate >= 0) {Angle.Mouse.two = Math.abs(Angle.Tower.Rotate) + Math.abs(Angle.Mouse.Rotate)};
    if(Angle.Mouse.Rotate > -Math.PI && Angle.Mouse.Rotate < 0) {Angle.Mouse.two = -Math.abs(Angle.Tower.Rotate) + Math.abs(Angle.Mouse.Rotate)};
    //if(Angle.Mouse.Rotate > 0) {Angle.Mouse.two = Math.abs(Angle.Tower.Rotate) - Math.abs(Angle.Mouse.Rotate)};
    if(Angle.Mouse.two > 0) Angle.Tower.Rotate -= 0.01
    if(Angle.Mouse.two < 0) Angle.Tower.Rotate += 0.01
    //Angle.Mouse.two = Angle.Mouse.Rotate - Angle.Tower.Rotate;
	Angle.Mouse.X = Math.sin(Angle.Mouse.Rotate);
	Angle.Mouse.Y = Math.cos(Angle.Mouse.Rotate);
	Angle.Tower.X = Math.sin(Angle.Tower.Rotate);
	Angle.Tower.Y = Math.cos(Angle.Tower.Rotate);
	Angle.Body.X = Math.sin(Angle.Body.Rotate);
	Angle.Body.Y = Math.cos(Angle.Body.Rotate);
    GameProcess.Implement++;
}, GameProcess.Update)

Draw.Work = setInterval(function() {
    Draw.Implement++;
    GC.clearRect(0, 0, document.documentElement.clientWidth, document.documentElement.clientHeight);

    GC.beginPath();
    GC.arc(Display.Center.X, Display.Center.Y, 1, 0, Math.PI * 2, false);
    GC.stroke();

    GC.beginPath();
    GC.lineTo(Display.Center.X, Display.Center.Y);
    GC.lineTo(Display.Center.X - 100 * Angle.X, Display.Center.Y + 100 * Angle.Y);
    GC.stroke();

    GC.beginPath();
    GC.lineTo(Display.Center.X, Display.Center.Y);
    GC.lineTo(Display.Center.X - 100 * Angle.Body.X, Display.Center.Y + 100 * Angle.Body.Y);
    GC.stroke();

    GC.beginPath();
    GC.lineTo(Display.Center.X, Display.Center.Y);
    GC.lineTo(Display.Center.X - 100 * Angle.Tower.X, Display.Center.Y + 100 * Angle.Tower.Y);
    GC.stroke();

    GC.beginPath();
    GC.lineTo(Display.Center.X, Display.Center.Y);
    GC.lineTo(Display.Center.X - 100 * Angle.Mouse.X, Display.Center.Y + 100 * Angle.Mouse.Y);
    GC.stroke();
    
    GC.beginPath();
    GC.arc(Display.Center.X + 100 * Angle.Tower.X, Display.Center.Y - 100 * Angle.Tower.Y, 1, 0, Math.PI * 2, false);
    GC.stroke();
}, Draw.Update)

var Information = setInterval( function () {
    document.getElementById("Key.Down.WASD[0]").innerHTML = Key[0][1];
    document.getElementById("Key.Down.WASD[1]").innerHTML = Key[1][1];
    document.getElementById("Key.Down.WASD[2]").innerHTML = Key[2][1];
    document.getElementById("Key.Down.WASD[3]").innerHTML = Key[3][1];
    document.getElementById("Angle.Body.Rotate").innerHTML = Angle.Body.Rotate;
    document.getElementById("Angle.Tower.Rotate").innerHTML = Angle.Tower.Rotate;
    document.getElementById("Angle.Mouse.Rotate").innerHTML = Angle.Mouse.Rotate;
    document.getElementById("Angle.Tower.two").innerHTML = Angle.Tower.two;
    document.getElementById("Angle.Mouse.two").innerHTML = Angle.Mouse.two;
}, 30)

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body id="Body">
        <canvas id="CanvasGame"></canvas>
        <div id="Information">
            <p>W: <span id="Key.Down.WASD[0]"></span></p>
            <p>A: <span id="Key.Down.WASD[1]"></span></p>
            <p>S: <span id="Key.Down.WASD[2]"></span></p>
            <p>D: <span id="Key.Down.WASD[3]"></span></p>
            <p>Angle body rotate: <span id="Angle.Body.Rotate"></span></p>
            <p>Angle tower rotate: <span id="Angle.Tower.Rotate"></span></p>
            <p>Angle mouse rotate: <span id="Angle.Mouse.Rotate"></span></p>
            <p>Angle tower two: <span id="Angle.Tower.two"></span></p>
            <p>Angle mouse two: <span id="Angle.Mouse.two"></span></p>
        </div>
        <canvas id="Protection"></canvas>
        <script src="js/moduls.js"></script>
        <script src="js/militaryequipment.js"></script>
        <script src="js/gameprocess.js"></script>
    </body>
</html>

Ответ на Rise:
 

Каждый интервал выполняет свою функцию:
Time.Work - считает время, обновляется за 10 миллисекунд, чтобы точно рассчитать время);
GameProcess.Work - игровой процесс (Физика, подсчёты и т.д), обновляется за 1 миллисекунд, чтобы всё игровые процессы выполнялись быстро;
Draw.Work - рисование моделей, но пока-что поворот башни в разработке Я использую тока контуры, обновляется за 30 миллисекунд, чтобы не повышать нагрузку;
Information - Выводить информацию (Я потом её уберу).
Если можно сделать лучше, говорите (как :)). Спасибо за внимание!

Ответ на Rise:
 

Есть, но они неправильно работает. Есть линия которая поворачивается за курсором, есть линия которая показывает направление танка и есть линия которая должна следовать за линией которая следует за курсором, но она не так работает. :(
Я просто не знаю как её сделать.
Вот это часть отвечает за поворот башни (Часть закомментирована так как они неправильно работают, да и впрочем всё остальное, а труды стирать неохото :)):

092
if (Angle.Tower.Rotate < -Math.PI) Angle.Tower.Rotate = -Angle.Tower.Rotate - 0.03;*/
093
/*if (Angle.Tower.Rotate != Angle.Mouse.Rotate) {
094
if (Angle.Mouse.Rotate < Angle.Tower.Rotate && Angle.Mouse.Rotate > 0 && Angle.Tower.Rotate > 0) {Angle.Tower.Rotate -= 0.01}
095
if (Angle.Mouse.Rotate > Angle.Tower.Rotate && Angle.Mouse.Rotate > 0 && Angle.Tower.Rotate > 0) {Angle.Tower.Rotate += 0.01}
096
if (Angle.Mouse.Rotate < Angle.Tower.Rotate && Angle.Mouse.Rotate < 0 && Angle.Tower.Rotate < 0) {Angle.Tower.Rotate -= 0.01}
097
if (Angle.Mouse.Rotate > Angle.Tower.Rotate && Angle.Mouse.Rotate < 0 && Angle.Tower.Rotate < 0) {Angle.Tower.Rotate += 0.01}
098

099
if (Angle.Mouse.Rotate < Angle.Tower.Rotate && Angle.Mouse.Rotate < 0 && Angle.Tower.Rotate > 0) {Angle.Tower.Rotate += 0.01}
100
if (Angle.Mouse.Rotate > Angle.Tower.Rotate && Angle.Mouse.Rotate > 0 && Angle.Tower.Rotate < 0) {Angle.Tower.Rotate -= 0.01}
101
if (Angle.Mouse.Rotate < Angle.Tower.Rotate && Angle.Mouse.Rotate > 0 && Angle.Tower.Rotate < 0) {Angle.Tower.Rotate += 0.01}
102
if (Angle.Mouse.Rotate > Angle.Tower.Rotate && Angle.Mouse.Rotate < 0 && Angle.Tower.Rotate > 0) {Angle.Tower.Rotate -= 0.01}
103
}*/
104
/*if (Angle.Tower.Rotate > 0 && Angle.Mouse.Rotate > 0) {Angle.Tower.two = Angle.Tower.Rotate - Angle.Mouse.Rotate}
105
//if (Angle.Tower.Rotate < 0 && Angle.Mouse.Rotate < 0) {Angle.Tower.two = Angle.Tower.Rotate - Angle.Mouse.Rotate}
106
//if (Angle.Tower.Rotate < 0 && Angle.Mouse.Rotate > 0) {Angle.Tower.two = Math.PI - Angle.Tower.Rotate + Angle.Mouse.Rotate}
107
//if (Angle.Tower.Rotate > 0 && Angle.Mouse.Rotate < 0) {Angle.Tower.two = Math.PI - Angle.Tower.Rotate + Angle.Mouse.Rotate}*/
108
//Angle.Tower.two = Angle.Tower.Rotate - ((Angle.Mouse.Rotate < 0) ? -Angle.Mouse.Rotate : Angle.Mouse.Rotate);
109
//Angle.Tower.two = Angle.Tower.Rotate - Angle.Mouse.Rotate;
110
if(Angle.Mouse.Rotate <= Math.PI && Angle.Mouse.Rotate >= 0) {Angle.Mouse.two = Math.abs(Angle.Tower.Rotate) + Math.abs(Angle.Mouse.Rotate)};
111
if(Angle.Mouse.Rotate > -Math.PI && Angle.Mouse.Rotate < 0) {Angle.Mouse.two = -Math.abs(Angle.Tower.Rotate) + Math.abs(Angle.Mouse.Rotate)};
112
//if(Angle.Mouse.Rotate > 0) {Angle.Mouse.two = Math.abs(Angle.Tower.Rotate) - Math.abs(Angle.Mouse.Rotate)};
113
if(Angle.Mouse.two > 0) Angle.Tower.Rotate -= 0.01
114
if(Angle.Mouse.two < 0) Angle.Tower.Rotate += 0.01
115
//Angle.Mouse.two = Angle.Mouse.Rotate - Angle.Tower.Rotate;
Спасибо за внимание, Rise! ^-^

Ответ на Rise:
 

На вложенном снимке показано как примерно это должно выглядит. Линя 1 (Корпус) - Поворачивается при помощи клавиш A (Влево) и D (Вправо). Линия 2 - следует за курсором. Линия 3 (Башня) -она должна следовать за линией 2 с заданой скоростью, на примере как в World of tanks (Но она не так следует - скачайте архив с игрой, запустите игру (index.html) и вы увидите, что не так).
Спасибо за внимание, Rise! ^-^

Ответ на Rise:
 

Да, но есть 1 недочёт (Должен быт какой нибудь процесс который поможет выбрать куда поворачиваться башне, то есть если мышка будет больше повёрнута право то башня начнёт поворачиваться вправо, если лева то влево. Я думаю вы его заметили. Если есть возможность, то исправьте его пожалуйста. Спасибо! ^-^

Ответ на Rise:
 

Я извиняюсь, Я неправильно написал. :) Я думаю по этой картинке всё должно быть понятно.

Благодарности Risе'у
 

Сппппппппппааааасссиииббо оо огромное Rise!!!!:thanks: Я думаю что тема закрыта, осталось тока подробнее разобрать ваш код, и вопрос как тему закрыть то? :)

Rise,
:victory:

Очень круто! :) Тока бот врезался в стенку и остановился.