在favicon图标上玩PONG游戏-Favicon Pong

考验你的小眼神儿!网站可以在浏览器的Favicon图标上玩PONG游戏,全程鼠标操控,丝般顺滑,就是不能玩的时间太长,太累眼睛。。。

在favicon图标上玩PONG游戏-Favicon Pong插图

传送门 https://favicon-pong.glitch.me/

玩法

游戏可以用鼠标或键盘操控,但鼠标更加灵活些,进入网站用鼠标滑动右侧的滚动条即可!

注意,游戏的画面在浏览器标签页左侧的favicon图标上哦!

源代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" href="https://glitch.com/favicon.ico" />
    <title>favicon pong</title>
    <link rel="stylesheet" href="/style.css" />
  </head>
  <body>
    <main>
      <p>
        this page's icon is a game of pong.<br />
        scroll up and down to play!
      </p>
      <hr />
      <p>
        made by <a href="https://twitter.com/aTylerRobertson">tyler robertson</a
        ><br />
        <a href="https://glitch.com/~favicon-pong">view or remix the code</a>
      </p>
    </main>
    <script src="pong.js"></script>
  </body>
</html>

pong.js

var l, r, b, w, g;

const linkForFavicon = document.querySelector(`head > link[rel='icon']`);

const updateIcon = () => {
  var svg = `
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="0" y="0" width="100%" height="100%" fill="rgb(0,0,0)" />
                <rect x="${l.x}" y="${l.y}" width="${w}" height="${w *
    4}" fill="rgb(255,255,255)"/>
                <rect x="${r.x}" y="${r.y}" width="${w}" height="${w *
    4}" fill="rgb(255,255,255)"/>
                <circle cx="${b.x}" cy="${
    b.y
  }" r="${w}" fill="rgb(255,255,255)"/>
              </svg>
            `;
  linkForFavicon.setAttribute(`href`, `data:image/svg+xml,${svg.trim()}`);
};

const play = () => {
  g = setInterval(() => {
    l.y =
      (window.scrollY /
        (document.documentElement.scrollHeight - window.innerHeight)) *
      100;
    if (b.y <= 0 && b.ys < 0) b.ys *= -1;
    if (b.y >= 100 && b.ys > 0) b.ys *= -1;
    if (b.x <= 0 + w || b.x >= 100 - w) {
      if (b.x <= 0 + w) {
        if (b.y >= l.y && b.y <= l.y + w * 4) {
          b.xs *= -1;
          b.ys += -1 * Math.round(Math.random() * 2);
        } else {
          scorePoint(r);
          console.log(
            "Your opponent scored a point!",
            `${l.score} to ${r.score}`
          );
        }
      }
      if (b.x >= 100 - w) {
        if (b.y >= r.y && b.y <= r.y + w * 4) {
          b.xs *= -1;
          b.ys += -1 * Math.round(Math.random() * 2);
        } else {
          scorePoint(l);
          console.log("You scored a point!", `${l.score} to ${r.score}`);
        }
      }
    }

    b.x += b.xs;
    b.y += b.ys;

    if (b.x > 50) r.y = b.y > r.y + w * 2 ? r.y + 1 : r.y - 1;
    updateIcon();
  }, 1000 / 24);
};

const scorePoint = player => {
  player.score++;

  b = {
    x: 50,
    y: 50,
    xs: 0,
    ys: 0
  };
  setTimeout(() => {
    while (b.ys == 0 || b.xs == 0) {
      b.xs = -2 + Math.floor(Math.random() * 3);
      b.ys = -2 + Math.floor(Math.random() * 3);
    }
  }, 2000);
};

const reset = () => {
  clearInterval(g);

  w = 8;
  (l = {
    x: 0,
    y: (document.documentElement.scrollHeight / window.scrollY) * 100,
    score: 0
  }),
    (r = {
      x: 100 - w,
      y: 50 - w * 2,
      score: 0
    }),
    (b = {
      x: 50,
      y: 50,
      xs: -1,
      ys: -1
    });

  play();
};

reset();

style.css

@import url('https://fonts.googleapis.com/css2?family=Urbanist:[email protected];700;900&display=swap');

:root {
  --font: 'Urbanist', sans-serif;
  --background: #000;
  --text-primary: #fff;
  --text-accent: #5af;
}

html {
  box-sizing: border-box;
  font-size: 150%;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  margin: 1rem;
  font-family: var(--font);
  line-height: 1.75rem;
  background: var(--background);
  color: var(--text-primary);
}

main {
  max-width: 500px;
  height: 400vh;
  margin: 100px auto;
  text-align: center;
}

a {
  color: var(--text-accent);
  font-weight: 700;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

hr {
  border: 1px solid var(--text-accent);
}

 

发表评论

后才能评论