Code for the games I make on tiktok https://www.tiktok.com/@benbeansandcoding

twitter-flappy-bird.js

let bodyView = document.body;

bodyView.style.position = "absolute";
let rect = bodyView.getBoundingClientRect();
bodyView.style.width = "100%";
bodyView.style.height = "100%";

let body = {
  pos: {
    x: 40,
    y: 0,
  },
  vel: {
    x: -4,
    y: 0,
  },
};

let birdView = document.querySelector(
  "#react-root > div > div > div.css-1dbjc4n.r-18u37iz.r-13qz1uu.r-417010 > header > div > div > div > div:nth-child(1) > div.css-1dbjc4n.r-dnmrzs.r-1vvnge1 > h1"
);

birdView.style.position = "fixed";
birdView.style.top = "0px";
birdView.style.left = "0px";
let bird = {
  pos: {
    x: 0,
    y: 0,
  },
  vel: {
    x: 4,
    y: 0,
  },
};

let timeline = document.querySelector(
  "#react-root > div > div > div.css-1dbjc4n.r-18u37iz.r-13qz1uu.r-417010 > main > div > div > div > div > div > div.css-1dbjc4n.r-1jgb5lz.r-13qz1uu > div > div > section > div > div"
);
let tweetQueue = Array.from(timeline.childNodes);
console.log(tweetQueue)
let tweets = [];

let tweetFrequency = 0;

let gravity = 0.4;
let prevTime = 0;
let bigger = 1;

let loop = (t) => {
  requestAnimationFrame(loop);
  let dt = t - prevTime;

  if (bird.pos.x > 500 && tweetFrequency <= 0) {
    let tweetBottom = tweetQueue.shift();
    let tweetTop = tweetQueue.shift();
    if (tweetBottom && tweetTop) {
      let rect = tweetBottom.getBoundingClientRect();
      tweetBottom.remove();
      tweetBottom.style.position = "fixed";
      tweetBottom.style.top = "0px";
      tweetBottom.style.left = "0px";
      tweetBottom.style.width = rect.width + "px";
      tweetBottom.style.height = rect.height + "px";

      let rect2 = tweetTop.getBoundingClientRect();
      tweetTop.remove();
      tweetTop.style.position = "fixed";
      tweetTop.style.top = "0px";
      tweetTop.style.left = "0px";
      tweetTop.style.width = rect2.width + "px";
      tweetTop.style.height = rect2.height + "px";

      // let tweetTop = tweetBottom.cloneNode(true);

      document.body.appendChild(tweetTop);
      document.body.appendChild(tweetBottom);

      tweets.push({
        vel: {
          x: body.vel.x,
          y: 0,
        },
        pos: {
          x: bird.pos.x + window.innerWidth,
          y: -rect2.height / 4,
        },
        view: tweetTop,
      });

      tweets.push({
        vel: {
          x: body.vel.x,
          y: 0,
        },
        pos: {
          x: bird.pos.x + window.innerWidth,
          y: window.innerHeight - rect.height + rect.height / 4,
        },
        view: tweetBottom,
      });

      tweetFrequency = 3000;
    }
  }

  tweets.forEach((tweet) => {
    tweet.pos.x += tweet.vel.x;
    tweet.pos.y += tweet.vel.y;

    // tweet.view.style.transform = `translate(${tweet.pos.x}px, ${tweet.pos.y}px) rotate(90deg)`;
    tweet.view.style.transform = `translate(${tweet.pos.x}px, ${tweet.pos.y}px) scale(0.5, 0.5)`;
  });

  // Acceleration.
  bird.vel.y += 0.4;

  bird.pos.x += bird.vel.x;
  bird.pos.y += bird.vel.y;

  body.pos.x += body.vel.x;
  body.pos.y += body.vel.y;

  tweetFrequency -= dt;

  birdView.style.transform = `translate(${bird.pos.x}px, ${bird.pos.y}px) rotate(${bird.vel.y * 3 + 40}deg) scale(1.2)`;
  bodyView.style.transform = `translate(${body.pos.x}px, ${body.pos.y}px)`;

  prevTime = t;
};
requestAnimationFrame(loop);

document.body.addEventListener("keydown", (e) => {
  if (e.which === 32) {
    e.preventDefault();
    bird.vel.y = -15;
  }
});