Animation in JavaScript/jQuery with arrays

110
January 01, 2020, at 2:00 PM

I'm trying to display an animation for every object in an array. I have some difficulties to "connect" all codes and scripts. It should display an animation for every object in every array, if a button is clicked (there should be one separate button for every array in the end). In total, it should display the animation 301 times (for every array). The animations should "walk" from right to left across the screen, one after another and and in rows of 2, 3, 4, 5, 6 or 7. There should be one animation/number "left over" for every array (it walks across the screen alone), except the array/number series for number 7 (because 301 % 7 = 0):I think, I have to add something like a "for...in-loop", so that it does "something" for every object in every array, but I don't know what to do. I'm really sorry, if it's a little bit chaotic. Here's my html:

<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="image"></div>
<p>
<button id="zweierreihe" onclick="movementLeft()">Zweierreihe</button>
</p>
<script src="sprite_animation.js"></script>
</body>
</html>

And my css:

#image {
position: absolute;
height: 50px;
width: 50px;
top: 50px;
right: 0;
background: url("https://i.ibb.co/6nj7FVW/cat-fighter-sprite2.png");
}

My animation, which should "walk" over the screen (this one is not perfect, though):

var animationInterval;
var spriteSheet = document.getElementById("image"); 
var widthOfSpriteSheet = 500;
var widthOfEachSprite = 50;
function stopAnimation() {
  clearInterval(animationInterval);
}
function startAnimation() {
  var position = widthOfEachSprite;
  const speed = 90; 
  const diff = widthOfEachSprite;
  animationInterval = setInterval(() => {
    spriteSheet.style.backgroundPosition = `-${position}px 0px`;
    if (position < widthOfSpriteSheet) {
      position = position + diff;
    } else {
      position = widthOfEachSprite;
    }
  }, speed);
}
startAnimation();
function movementLeft() {
var left = $("#image").offset().left;
$("#image").css({left:left}).animate({"left":"0px"}, 30000);
}

And that's the calculation-script:

var seven = 0;
var six;
var five;
var four;
var three;
var two;
while (six != 1 || five != 1|| four != 1|| three != 1|| two != 1)
{seven += 7;
six = seven % 6;
five = seven % 5;
four = seven % 4;
three = seven % 3;
two = seven % 2;}
var sieben = [[]];
var sechs = [[]];
var fuenf = [[]];
var vier = [[]];
var drei = [[]];
var zwei = [[]];
cnt = 1;
while (cnt <= seven) {
  sieben[sieben.length - 1].push(cnt);
  sechs[sechs.length - 1].push(cnt);
  fuenf[fuenf.length - 1].push(cnt);
  vier[vier.length - 1].push(cnt);
  drei[drei.length - 1].push(cnt);
  zwei[zwei.length - 1].push(cnt);
  if (!(cnt % 7) && (cnt < seven)) sieben.push([]);
  if (!(cnt % 6) && (cnt < seven)) sechs.push([]);
  if (!(cnt % 5) && (cnt < seven)) fuenf.push([]);
  if (!(cnt % 4) && (cnt < seven)) vier.push([]);
  if (!(cnt % 3) && (cnt < seven)) drei.push([]);
  if (!(cnt % 2) && (cnt < seven)) zwei.push([]);
  cnt++;
} 
console.log(sieben);
console.log(sechs);
console.log(fuenf);
console.log(vier);
console.log(drei);
console.log(zwei);
READ ALSO
Adding Link to Quill editor causes text after link to overflow

Adding Link to Quill editor causes text after link to overflow

Adding a link using the add link tool from the tooloptions allows me to add a link but after saving the data from the editor and refreshing the page the text after the link overflows the texteditor

98
How to center elements on the last row in CSS Grid?

How to center elements on the last row in CSS Grid?

I am using CSS grid to layout some items like this

77
Gatsby 1 Class Component

Gatsby 1 Class Component

I'm trying to understand the logic of this component called AppMounted in a layout (Gatsby 1)

98
Responsive Menu with Semantic UI React

Responsive Menu with Semantic UI React

With Semantic UI React I'm having trouble in creating a responsive navigation menu

121