Хочу сделать игру на js, дошло дело до башни и тут у меня появилась проблема, мне надо сделать так чтобы башня поварачивалась за курсором с заданой скорость, но у меня не получается.
Весь инет перешарил, но ничего не нашёл.
Пожалуйста помогите
, буду очень благодарен.
Вот мои коды(Полный код есть в архиве):
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>