在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);
}
声明：本站（www.mysqlschool.cn）所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
