<body style="background: gray; margin: 10px; padding: 0;">
Animation only width and height block e.g. 50 x 50 and jump what 50 unit.
<pre>
[(==)| ]
[ |(==)]
</pre>
<div id="container" style="position: relative; background: lightblue; height: 50px; width: 100px; background: transparent;">
<div id="tank" style="background: green; position: absolute; width: 50px; height: 50px; left: 0px; top: 0px;"></div>
<div id="no_visible" style="background: grey; width: 50px; height: 50px; z-index: 34; position: absolute; left: 100px;"></div>
</div>
<div id="container2" style="position: relative; background: lightblue; height: 50px; width: 110px;">
<div id="tank2" style="background: lightgreen; position: absolute; width: 50px; height: 50px; left: 0px; top: 0px;"></div>
</div>
class Animation_Movement_Tank {
constructor(width, height, direction, tank) {
this.width = width;
this.height = height;
this.direction = direction;
this.tank = tank;
this.flag = -1;
this.i = 0;
}
animate_frames(offset, arg1) {
//document.getElementById('no_visible').style.visibility = "visible";
let promise1;
switch (this.direction) {
case 0: {
this.i = 0; //this.width - 1;
promise1 = (new Promise(resolve => {
//i = 0;
let clear_interval = setInterval(() => {
this.tank.style.left = 0 + this.i + "px";
//arg1 == '+' ? this.i++ : this.i--;
this.i--;
document.getElementById('no_visible').style.background = "green";
document.getElementById('no_visible').style.visibility = "hidden";
//document.getElementById('no_visible').style.display = "none";
//d//ocument.getElementById('no_visible').style.background = 'green';
console.log(this.i, this.width, offset);
if(offset[1] == false && this.i <= -50 - 1 || offset[1] == true && this.i <= -50 - 1 - offset[0] + 1) { // +1
this.flag = 0;
resolve([1, this.i]);
clearInterval(clear_interval);
}
}, 50);
}));
break;
}
case 1: {
//let i = 0;
this.i = 0;
promise1 = (new Promise(resolve => {
//i = 0;
let clear_interval = setInterval(() => {
this.tank.style.left = 0 + this.i + "px";
//arg1 == '+' ? this.i++ : this.i--;
this.i++;
document.getElementById('no_visible').style.background = "green";
document.getElementById('no_visible').style.visibility = "hidden";
//document.getElementById('no_visible').style.display = "none";
//d//ocument.getElementById('no_visible').style.background = 'green';
console.log(this.i, this.width, offset);
if(offset[1] == false && this.i >= this.width + 1 || offset[1] == true && this.i >= this.width + 1 - offset[0] - 1) { // +1
this.flag = 0;
resolve([1, this.i]);
clearInterval(clear_interval);
}
}, 50);
}));
break;
}
case 2: {
let i = this.height - 1;
var clear_interval = setInterval(function() {
this.tank.style.top = offset + i + "px";
i--;
if(i <= 0) {
this.flag = 0;
clearInterval(clear_interval);
}
}, 50);
break;
}
case 3: {
let i = 0;
var clear_interval = setInterval(() => {
this.tank.style.top = offset + i + "px";
i++;
if(i >= this.height - 1) {
this.flag = 0;
clearInterval(clear_interval);
}
}, 50);
break;
}
}
//return this.promise1.then((val) => {
//return this.promise1;
//});
return promise1;
}
}
const animation_tank_left = new Animation_Movement_Tank(50, 50, 0, document.getElementById('tank'));
const animation_tank_right = new Animation_Movement_Tank(50, 50, 1, document.getElementById('tank'));
const animation_tank_top = new Animation_Movement_Tank(50, 50, 2, document.getElementById('tank'));
const animation_tank_down = new Animation_Movement_Tank(50, 50, 3, document.getElementById('tank'));
//const test_animation = new Animation_Movement_Tank(50, 50, 1, document.getElementById('tank2'));
let i = 0;
let coll = -10; // 5
let offset = 5;
const signs = ["-", "+"];
let j = 0;
const directions_arr = [[1, 3], [0, 2]]; // 2 and 1
let all = 0;
let ii = 0;
let factor_coefficient = 1;
function direction(arg, a, b) {
if(arg == 0 && a > b) {
return true;
} else if(arg == 1 && a < b) {
return true;
}
return false;
}
function recursion1(info, info2) {
if(info[1] == true) {
console.log(22);
info2 = directions_arr[j][0];
j++;
info[1] = false;
ii = 0;
}
//for(let j=0;j<signs.length;j++) {
console.log([animation_tank_left, animation_tank_right][info2].animate_frames(info).then(function(value) {
//for(let i=0;i<1;i++) {
//console.log( document.getElementById('container').style.marginLeft);
//document.getElementById('container').style.marginLeft = offset + coll + "px";
all++;
if(info2 == 0) {
i--;
ii--;
factor_coefficient = -1;
} else if(info2 == 1) {
i++;
ii++;
factor_coefficient = 1;
}
coll = i;
//coll *= -1;
console.log(all, ii);
//offset = (50*i);
console.log(info2, i, 4);
if(value[0] == 1 && all < 7) {
//document.getElementById('tank').style.background = 'grey';
//document.getElementById('no_visible').style.visibility = 'hidden';
document.getElementById('no_visible').style.left = (50*factor_coefficient) + "px";
document.getElementById('container').style.marginLeft = ((50*i)+coll*1) + "px"; // 5 value[1]
//document.getElementById('tank').style.background = 'pink';
//console.log(i);
//coll *= -1;
document.getElementById('no_visible').style.visibility = "visible"; // <--
document.getElementById('no_visible').style.background = "grey"; // <--
//document.getElementById('no_visible').style.display = 'block'; // <--
//offset = 0;
//value[0] = -1;
//document.getElementById('no_visible').style.visibility = "hidden";
recursion1([coll*1, j < directions_arr.length && ii == directions_arr[j][1] - 1 ? true : false], info2);
}
//}
}));
//}
}
// run maybe in the same time, tank2 later usually
recursion1([0, false], 1);
let x = 0;
/*
var cleared = setInterval(() => {
document.getElementById('tank2').style.left = x + 'px';
x++;
if(x >= 200) {
clearInterval(cleared);
}
}, 50);
*/
</script>
</body>
Myślę, że będziesz wiedział jak dokończyć. Skorygowanie pikseli i miganie, gdy kwadrat (czołg) przejedzie 50. piksel. case 2 i 3 powinieneś analogicznie napisać do case 0 i 1.