1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132
| const blk_pitn = { block1: [[0, 1], [0, 0], [-1, 0], [-1, -1]], block2: [[0, 1], [0, 0], [-1, 0], [0, -1]], block3: [[-1, 1], [0, 0], [-1, 0], [-1, -1]], block4: [[0, 1], [0, 0], [-1, 0], [-1, -1]], block5: [[-1, 1], [0, 0], [-1, 0], [0, -1]], block6: [[0, -1], [0, 0], [-1, 0], [1, -1]], block7: [[-1, -1], [0, 0], [-1, 0], [1, 0]], block8: [[-1, 1], [0, 0], [-1, 0], [-1, -1]], block9: [[0, -1], [0, 0], [-1, 0], [1, 0]], block10: [[-1, 1], [0, 0], [-1, 0], [1, 0]], block11: [[2, 0], [0, 0], [-1, 0], [1, 0]], block12: [[0, 1], [0, 0], [-1, 0], [0, -1]], block13: [[0, 1], [0, 0], [-1, 0], [-1, -1]], block14: [[1, 1], [0, 0], [-1, 0], [1, 0]], block15: [[1, -1], [0, 0], [-1, 0], [1, 0]], block16: [[-1, -1], [0, 0], [-1, 0], [1, 0]], block17: [[0, 1], [0, 0], [-1, 0], [0, -1]], block18: [[0, 1], [0, 0], [-1, 0], [-1, -1]], block19: [[0, -1], [0, 0], [-1, 0], [1, 0]], block20: [[1, -1], [0, 0], [-1, 0], [1, 0]], block21: [[0, 1], [0, 0], [-1, 0], [-1, -1]], block22: [[1, 1], [0, 0], [-1, 0], [1, 0]], block23: [[0, 2], [0, 0], [0, -1], [0, 1]] }, offset_pitn = { block1: [5, 3], block2: [5, 1], block3: [3, 4], block4: [3, 2], block5: [3, -1], block6: [2, 5], block7: [2, 1], block8: [1, -1], block9: [1, -3], block10: [1, 2], block11: [0, 3], block12: [0, 0], block13: [-1, -4], block14: [0, -2], block15: [-2, 4], block16: [-2, 2], block17: [-2, 0], block18: [-3, -2], block19: [-4, 0], block20: [-3, 5], block21: [-5, 3], block22: [-4, 1], block23: [-6, 1] };
let blocks = document.getElementsByClassName("block"), block = blocks[0], love = document.getElementsByClassName("love")[0], timer = null, index = 0, clone_block;
block.style.top = "50%"; block.style.left = "50%"; block.style.margin = "-20px 0 0 -20px";
const block_left = parseFloat(window.getComputedStyle(block, null).left.slice(0, -2)), block_top = parseFloat(window.getComputedStyle(block, null).top.slice(0, -2));
function Next() { if (++index >= 24) { clearInterval(timer);
Rise(); return; }
block.style.visibility = "visible";
block.style.left = block_left + 40 * offset_pitn["block" + index][0] + "px"; block.style.top = block_top - 40 * offset_pitn["block" + index][1] + "px"; for (let i = 0; i < block.children.length; i++) { block.children[i].style.left = blk_pitn["block" + index][i][0] * -40 + "px"; block.children[i].style.top = blk_pitn["block" + index][i][1] * -40 + "px"; }
clone_block = block.cloneNode(true); love.appendChild(clone_block);
if (love.children.length >= 24) { blocks[blocks.length - 1].children[2].style.display = "none"; block.style.display = "none"; } }
function Rise() {
console.log("begin"); let timer2 = null, distance = 0;
const target = 120, speed = 1;
let love_top = parseFloat(window.getComputedStyle(love, null).top.slice(0, -2));
timer2 = setInterval(() => { distance += speed; if (distance >= target) { clearInterval(timer2);
console.log("over");
}
love.style.top = (love_top - distance) + "px";
}, 22);
}
window.onload = function () { setTimeout(() => {
timer = setInterval(() => { Next(); }, 300);
}, 12000); };
|