恭喜你发现了这个彩蛋页面!
这里汇集了所有的彩蛋代码。喜欢的可以直接拿走!
你也获得了此次活动最大的彩蛋!
CMHK/HKT LXC自选小鸡 有效期30天!
但是你来晚了😭.
迷宫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maze Game</title>
<style>
body {
font-family: Arial, sans-serif;
}
#maze {
display: none; /* 默认隐藏 */
grid-template-columns: repeat(5, 40px);
grid-template-rows: repeat(5, 40px);
gap: 2px;
background-color: #eee;
}
.cell {
background-color: #fff;
border: 1px solid #ccc;
}
.player {
background-color: #007bff;
}
</style>
</head>
<body>
<h1></h1>
<div id="maze"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const maze = document.getElementById('maze');
const gridSize = 5;
const cellCount = gridSize * gridSize;
const playerStartPosition = 0; // 玩家起始位置
let playerPosition = playerStartPosition;
// 创建迷宫格子
for (let i = 0; i < cellCount; i++) {
const cell = document.createElement('div');
cell.classList.add('cell');
maze.appendChild(cell);
}
// 设置玩家起始位置
const cells = document.querySelectorAll('.cell');
cells[playerStartPosition].classList.add('player');
// 监听空格键按下事件
document.addEventListener('keydown', function(event) {
if (event.code === 'Space') {
startGame();
}
});
// 开始游戏
function startGame() {
maze.style.display = 'grid'; // 显示迷宫
document.removeEventListener('keydown', startGame); // 移除空格键按下事件监听器
// 监听键盘事件移动玩家
document.addEventListener('keydown', function(event) {
const key = event.key;
let newPosition;
switch (key) {
case 'ArrowUp':
newPosition = playerPosition - gridSize;
break;
case 'ArrowDown':
newPosition = playerPosition + gridSize;
break;
case 'ArrowLeft':
newPosition = playerPosition - 1;
break;
case 'ArrowRight':
newPosition = playerPosition + 1;
break;
default:
return;
}
if (newPosition >= 0 && newPosition < cellCount && !isWall(newPosition)) {
cells[playerPosition].classList.remove('player');
playerPosition = newPosition;
cells[playerPosition].classList.add('player');
checkWin();
}
});
}
// 检查玩家是否到达终点
function checkWin() {
if (playerPosition === cellCount - 1) {
alert('你赢了!恭喜!');
resetGame();
}
}
// 重置游戏
function resetGame() {
maze.style.display = 'none'; // 隐藏迷宫
cells[playerPosition].classList.remove('player');
playerPosition = playerStartPosition;
cells[playerPosition].classList.add('player');
document.addEventListener('keydown', startGame); // 添加空格键按下事件监听器
}
// 返回是否为墙壁
function isWall(position) {
// 在这里定义你的迷宫布局,0表示可通过,1表示墙壁
const walls = [
0, 1, 0, 0, 1,
0, 1, 0, 1, 0,
0, 0, 1, 0, 1,
1, 0, 1, 0, 0,
0, 0, 0, 1, 0
];
return walls[position] === 1;
}
});
</script>
</body>
</html>
上上下下左右左右BABA
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文章标题</title>
<style>
body {
font-family: Arial, sans-serif;
}
.article-content {
line-height: 1.6;
}
.hidden-message {
display: none;
font-size: 24px;
color: red;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="article-content">
<p></p>
</div>
<!-- 彩蛋容器 -->
<div class="hidden-message" id="message">恭喜发现彩蛋!</div>
<script>
function checkKonamiCode(e) {
const konamiCode = "ArrowUpArrowUpArrowDownArrowDownArrowLeftArrowRightArrowLeftArrowRightBABA";
const konamiCodeLowerCase = "ArrowUpArrowUpArrowDownArrowDownArrowLeftArrowRightArrowLeftArrowRightbaba";
konamiHistory.push(e.key);
const historyStr = konamiHistory.join('').toLowerCase();
if (historyStr.includes(konamiCode.toLowerCase()) || historyStr.includes(konamiCodeLowerCase)) {
document.getElementById("message").style.display = "block";
konamiHistory = [];
}
}
let konamiHistory = [];
document.addEventListener("keydown", checkKonamiCode);
</script>
</body>
</html>
双击显示
<p>当您双击下面的文字时,会出现一些神秘的东西:</p>
<p ondblclick="showSecret()">点击这里</p>
<script>
function showSecret() {
alert('神秘的东西出现了!');
}
</script>
按空格显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>彩蛋</title>
<style>
.easteregg-container {
height: 50px; /* 设置一个固定的高度,可以根据需要进行调整 */
text-align: center;
}
#message {
display: none;
font-size: 24px;
color: red;
}
</style>
</head>
<body>
<div class="easteregg-container">
<div id="message">恭喜发现彩蛋!</div>
</div>
<script>
// 定义一个函数来检测按键组合
function checkSpaceKey(e) {
// 如果按下的是空格键,则显示彩蛋消息
if (e.key === " ") {
document.getElementById("message").style.display = "block";
}
}
// 监听键盘按下事件
document.addEventListener("keydown", checkSpaceKey);
</script>
</body>
</html>