07.05.2017, 18:10
|
|
Новичок на форуме
|
|
Регистрация: 07.05.2017
Сообщений: 8
|
|
|
Помогите! Не могу сделать поворот башни на танке!
Хочу сделать игру на 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>
|
|
07.05.2017, 20:17
|
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
|
Sasha05082002, что-то интервалов много, игровой цикл должен быть один.
|
|
08.05.2017, 14:31
|
|
Новичок на форуме
|
|
Регистрация: 07.05.2017
Сообщений: 8
|
|
|
Ответ на Rise:
Сообщение от Rise
|
|
Sasha05082002, что-то интервалов много, игровой цикл должен быть один.
|
Каждый интервал выполняет свою функцию:
Time.Work - считает время, обновляется за 10 миллисекунд, чтобы точно рассчитать время);
GameProcess.Work - игровой процесс (Физика, подсчёты и т.д), обновляется за 1 миллисекунд, чтобы всё игровые процессы выполнялись быстро;
Draw.Work - рисование моделей, но пока-что поворот башни в разработке Я использую тока контуры, обновляется за 30 миллисекунд, чтобы не повышать нагрузку;
Information - Выводить информацию (Я потом её уберу).
Если можно сделать лучше, говорите (как  ). Спасибо за внимание! |
|
08.05.2017, 22:56
|
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
|
Сообщение от Sasha05082002
|
|
чтобы башня поварачивалась за курсором с заданой скорость, но у меня не получается
|
Не понимаю, в примере и поворот и скорость есть. |
|
09.05.2017, 07:14
|
|
Новичок на форуме
|
|
Регистрация: 07.05.2017
Сообщений: 8
|
|
|
Ответ на Rise:
|
Сообщение от 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! ^-^
Последний раз редактировалось Sasha05082002, 09.05.2017 в 10:50.
|
|
09.05.2017, 12:13
|
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
|
Сообщение от Sasha05082002
|
|
есть линия которая должна следовать за линией которая следует за курсором, но она не так работает
|
Так она и так следует, ты расскажи как тебе надо чтобы было. |
|
10.05.2017, 03:33
|
|
Новичок на форуме
|
|
Регистрация: 07.05.2017
Сообщений: 8
|
|
|
Ответ на Rise:
|
Сообщение от Rise
|
|
Так она и так следует, ты расскажи как тебе надо чтобы было.
|
На вложенном снимке показано как примерно это должно выглядит. Линя 1 (Корпус) - Поворачивается при помощи клавиш A (Влево) и D (Вправо). Линия 2 - следует за курсором. Линия 3 (Башня) -она должна следовать за линией 2 с заданой скоростью, на примере как в World of tanks (Но она не так следует - скачайте архив с игрой, запустите игру (index.html) и вы увидите, что не так).
Спасибо за внимание, Rise! ^-^ |
|
16.05.2017, 08:48
|
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
Sasha05082002, так?
<style>
canvas { outline: 1px solid gray; }
canvas:hover { outline-color: red; }
</style>
<canvas width="400" height="200" tabindex="1"></canvas>
<script>
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
context.fillText('Touch Me', canvas.width / 2, canvas.height / 2);
var requestID;
var Mouse = {
x: 0,
y: 0,
angle: 0,
follow: 0,
info: function() {
context.fillText('Mouse: angle ' + this.angle + ' x ' + this.x + ' y ' + this.y + ' follow ' + this.follow, 5, 10);
}
};
var Tower = {
x: canvas.width / 2,
y: canvas.height / 2,
angle: 0,
width: 60,
height: 40,
degree: Math.PI / 180,
left: function() {
var angle = this.angle - this.degree;
this.angle = (angle < 0) ? angle + 2 * Math.PI : angle;
},
right: function() {
var angle = this.angle + this.degree;
this.angle = (angle < 2 * Math.PI) ? angle : angle - 2 * Math.PI;
},
step: function() {
if (Mouse.follow) {
var angle = Math.atan2(Mouse.y - this.y, Mouse.x - this.x);
Mouse.angle = (angle < 0) ? angle + 2 * Math.PI : angle;
if (Mouse.angle < this.angle) {
angle = this.angle - Mouse.angle;
(angle < Math.PI) ? this.left() : this.right();
} else {
angle = Mouse.angle - this.angle;
(angle < Math.PI) ? this.right() : this.left();
}
if (angle - this.degree < 0) Mouse.follow = 0;
}
},
draw: function() {
var x1, y1, x2, y2;
context.save();
context.translate(this.x, this.y);
context.rotate(this.angle);
context.translate(-this.x, -this.y);
x1 = this.x - this.width / 2;
y1 = this.y - this.height / 2;
x2 = x1 + this.width;
y2 = y1 + this.height;
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y1);
context.lineTo(x2 + 10, this.y);
context.lineTo(x2, y2);
context.lineTo(x1, y2);
context.fill();
context.restore();
},
info: function() {
context.fillText('Tower: angle ' + this.angle, 5, 20);
}
};
canvas.addEventListener('mouseenter', function(e) {
this.focus();
requestID = requestAnimationFrame(function tick() {
context.clearRect(0, 0, canvas.width, canvas.height);
Tower.step();
Tower.draw();
Tower.info();
Mouse.info();
requestID = requestAnimationFrame(tick);
});
});
canvas.addEventListener('mouseleave', function(e) {
cancelAnimationFrame(requestID);
});
canvas.addEventListener('mousemove', function(e) {
Mouse.follow = 1;
Mouse.x = e.offsetX;
Mouse.y = e.offsetY;
});
</script>
Последний раз редактировалось Rise, 22.05.2017 в 22:57.
|
|
20.05.2017, 15:05
|
|
Новичок на форуме
|
|
Регистрация: 07.05.2017
Сообщений: 8
|
|
|
Ответ на Rise:
Да, но есть 1 недочёт (Должен быт какой нибудь процесс который поможет выбрать куда поворачиваться башне, то есть если мышка будет больше повёрнута право то башня начнёт поворачиваться вправо, если лева то влево. Я думаю вы его заметили. Если есть возможность, то исправьте его пожалуйста. Спасибо! ^-^
|
|
20.05.2017, 16:02
|
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
|
Sasha05082002, не понимаю, у меня танк смотрит вправо по оси X, поэтому влево будет сверху, а вправо будет снизу.
|
|
|
|
