Я работаю над игрой в тетрис и сейчас пытаюсь поставить боксы друг на друга. Как я уже говорил, это игра Tetris, поэтому мне нужно деактивировать фигуру после ее завершения, поэтому я помещаю атрибуты каждой фигуры в массив, а затем в начале функции down () перебираю массив comp, сравниваю текущие атрибуты. к атрибутам мертвых фигур в массиве, если нет совпадения, форма перемещается вниз. в противном случае форма деактивируется. Это работает, однако вторая фигура перекрывает первую фигуру на 50 пикселей, но остальные выстраиваются идеально.

var svgNS = "http://www.w3.org/2000/svg"; var countO = 1; var comp = [{ id: 0, yPos: "650px" }]; function createShape1() { var newEndB = 650; //used to set boundaries bottom var elem = document.getElementById("container"); var outer = document.createElementNS(svgNS, "svg"); countO  ; elem.append(outer); outer.id = "outer"   countO; outer.style.background = "grey"; outer.style.height = "100px"; outer.style.width = "150px"; outer.style.left = "150px"; outer.style.top = "0px"; outer.style.position = "absolute"; outer.style.transform = "rotate(0deg)" var t = setInterval(down, 1000); // calls down() function every second var xPos = parseInt(outer.style.left); var yPos = parseInt(outer.style.top); var w = parseInt(outer.style.width); var h = parseInt(outer.style.height); var ymath = yPos   h; function down() { // moves shape down by 50px for (let shape of comp) { var shapeX = parseInt(shape.xPos); var shapeW = parseInt(shape.width); var shapeY = parseInt(shape.yPos); var shapeH = parseInt(shape.h); if (ymath === shapeY) { clearInterval(t); comp.push({ id: countO, xPos: outer.style.left, w: outer.style.width, yPos: outer.style.top, h: outer.style.height }) randShape(); } } if (ymath {amp}lt; 650) { yPos  = 50; ymath = yPos   h; outer.style.top = yPos   'px'; } } }; var shapes = [createShape1]; function randShape() { shapes[0](); }; window.addEventListener("click", startGame, { once: true }) function startGame() { randShape() } 
 .grid { background-image: repeating-linear-gradient(0deg, transparent, transparent 49px, #88F 49px, #88F 50px), repeating-linear-gradient(-90deg, transparent, transparent 49px, #88F 49px, #88F 50px); background-size: 50px 50px; top: 0px; height: 651px; position: absolute; width: 501px; } 
 {amp}lt;!DOCTYPE html{amp}gt; {amp}lt;head{amp}gt; {amp}lt;meta charset="UTF-8"{amp}gt; {amp}lt;meta name="viewport" content="width=device-width, initial-scale=1.0"{amp}gt; {amp}lt;title{amp}gt;Tetris(test){amp}lt;/title{amp}gt; {amp}lt;link rel="stylesheet" href="styleSheets/main.css"{amp}gt; {amp}lt;script src="js/jquery.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="js/main.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;div id="container" style="height: 650px; width: 500px; background: black; position: relative"{amp}gt; {amp}lt;div class="grid"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 

Пожалуйста, запустите мой фрагмент кода и подождите, пока вторая фигура не остановится, и посмотрите, как она перекрывает первую фигуру, но с фигурами 3 и 4 этого больше не происходит.