- 16, May 2024
- #1
Я делаю браузерную игру, в которой вы плаваете на кораблях.
Вы смотрите сверху, как в GTA 1 и 2. Поэтому, когда вы двигаетесь в определенном направлении, появляется анимация, которая перемещает корабль примерно на 50 пикселей в его направлении.
Эта анимация длится 5 секунд.
Чтобы загрузить данные сетки, у меня есть таймер, который обновляет данные каждую секунду, но именно здесь эти два конфликтуют.
Через секунду анимация прерывается таймером, загружающим данные сетки. Я пробовал это, но это не останавливает таймер:
Вы смотрите сверху, как в GTA 1 и 2. Поэтому, когда вы двигаетесь в определенном направлении, появляется анимация, которая перемещает корабль примерно на 50 пикселей в его направлении.
Эта анимация длится 5 секунд.
Чтобы загрузить данные сетки, у меня есть таймер, который обновляет данные каждую секунду, но именно здесь эти два конфликтуют.
Через секунду анимация прерывается таймером, загружающим данные сетки. Я пробовал это, но это не останавливает таймер:
<script>
function myMoveUp() {
var elem = document.getElementById("myAnimationUp");
var pos = 0;
var id = setInterval(frame, 50);
Clock.pause();
function frame() {
if (pos == 105) {
clearInterval(id);
Clock.resume();
} else {
pos++;
elem.style.bottom = pos + 'px';
}
}
MoveShip();
}
</script>
<script>
// the timer we want to stop for a few seconds
var Clock = {
totalSeconds: 0,
start: function () {
var self = this;
this.interval = setInterval(function () {
self.totalSeconds += 1;
$("#hour").text(Math.floor(self.totalSeconds / 3600));
$("#min").text(Math.floor(self.totalSeconds / 60 % 60));
$("#sec").text(parseInt(self.totalSeconds % 60));
$('#ShowGridData').load('data/griddata.php');
}, 1000);
},
pause: function () {
clearInterval(this.interval);
delete this.interval;
},
resume: function () {
if (!this.interval) this.start();
}
};
Clock.start();
$('#pauseButton').click(function () { Clock.pause(); });
$('#resumeButton').click(function () { Clock.resume(); });
</script>
Код (разметка):