<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF
-8">
<meta name="viewport" content="width=device
-width, initial
-scale=1.0">
<title>鼠鼠三角洲</title>
<style>
* {
margin: 0;
padding: 0;
box
-sizing: border
-box;
user
-select: none;
}
body {
background
-color: white;
font
-family: 
9;Microsoft YaHei
9;, sans
-serif;
display: flex;
justify
-content: center;
align
-items: center;
height: 100vh;
overflow: hidden;
background: linear
-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);
}
.container {
text
-align: center;
max
-width: 800px;
padding: 20px;
position: relative;
}
.title {
font
-size: 2.8rem;
color: #333;
margin
-bottom: 40px;
text
-shadow: 2px 2px 4px rgba(0,0,0,0.1);
font
-weight: bold;
letter
-spacing: 1px;
}
.buttons
-container {
display: flex;
justify
-content: center;
gap: 20px;
margin: 30px 0;
transition: all 0.3s ease;
}
.btn {
border: none;
border
-radius: 12px;
padding: 20px 40px;
font
-size: 1.8rem;
font
-weight: bold;
cursor: pointer;
box
-shadow: 0 6px 12px rgba(0,0,0,0.15);
transition: all 0.3s ease;
color: white;
text
-shadow: 1px 1px 2px rgba(0,0,0,0.3);
min
-width: 220px;
display: flex;
justify
-content: center;
align
-items: center;
}
.btn:hover {
transform: translateY(
-3px);
box
-shadow: 0 8px 15px rgba(0,0,0,0.2);
}
.btn:active {
transform: translateY(1px);
}
#leftBtn {
background: linear
-gradient(145deg, #ff7b7b, #ff5252);
}
#rightBtn {
background: linear
-gradient(145deg, #7bff7b, #52ff52);
}
.message {
font
-size: 2.2rem;
color: #444;
min
-height: 80px;
margin: 30px 0;
padding: 20px;
border
-radius: 15px;
background
-color: rgba(255, 255, 255, 0.7);
box
-shadow: 0 4px 8px rgba(0,0,0,0.1);
display: flex;
justify
-content: center;
align
-items: center;
transition: all 0.4s ease;
}
.footer {
position: absolute;
bottom: 20px;
width: 100%;
text
-align: center;
font
-size: 1.2rem;
color: #666;
}
.mouse
-icon {
position: absolute;
font
-size: 3rem;
animation: float 3s ease
-in
-out infinite;
opacity: 0.1;
z
-index:
-1;
}
@keyframes float {
0% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(
-20px) rotate(5deg); }
100% { transform: translateY(0) rotate(0deg); }
}
/* 响应式设计 */
@media (max
-width: 768px) {
.title {
font
-size: 2.2rem;
}
.btn {
font
-size: 1.5rem;
padding: 15px 30px;
min
-width: 180px;
}
.message {
font
-size: 1.8rem;
}
.buttons
-container {
flex
-direction: column;
align
-items: center;
}
}
</style>
</head>
<body>
<div class="container">
<h1 class="title">要和鼠鼠打三角洲吗</h1>
<div class="message" id="message">做出你的选择</div>
<div class="buttons
-container">
<button id="leftBtn" class="btn">猛攻</button>
<button id="rightBtn" class="btn">不行</button>
</div>
<div class="footer">
游戏设计：鼠鼠三角洲 | 直接在浏览器中游玩
</div>
</div>
<script>
// 游戏状态管理
const gameState = {
stage: 0,
responses: [
"花钱改枪给你用",
"我玩威龙做你的自爆小车",
"摸到的东西全给你",
"我帮你拉枪线",
"就差你一个了",
"就差你一个了",
"就差你一个了"
]
};
// DOM元素
const leftBtn = document.getElementById(
9;leftBtn
9;);
const rightBtn = document.getElementById(
9;rightBtn
9;);
const message = document.getElementById(
9;message
9;);
const buttonsContainer = document.querySelector(
9;.buttons
-container
9;);
// 创建浮动鼠鼠图标
function createMouseIcons() {
const container = document.querySelector(
9;.container
9;);
for (let i = 0; i < 8; i++) {
const mouse = document.createElement(
9;div
9;);
mouse.className = 
9;mouse
-icon
9;;
mouse.innerHTML = 
9;🐭
9;;
mouse.style.left = `${Math.random() * 100}%`;
mouse.style.top = `${Math.random() * 100}%`;
mouse.style.animationDelay = `${Math.random() * 2}s`;
mouse.style.fontSize = `${Math.random() * 2 + 2}rem`;
container.appendChild(mouse);
}
}
// 左按钮点击事件
leftBtn.addEventListener(
9;click
9;, () => {
message.textContent = "太棒了";
message.style.color = "#27ae60";
message.style.fontWeight = "bold";
message.style.transform = "scale(1.1)";
setTimeout(() => {
message.style.transform = "scale(1)";
}, 300);
});
// 右按钮点击事件
rightBtn.addEventListener(
9;click
9;, () => {
// 更新按钮大小
const currentLeftWidth = parseFloat(getComputedStyle(leftBtn).flexGrow) || 1;
const currentRightWidth = parseFloat(getComputedStyle(rightBtn).flexGrow) || 1;
leftBtn.style.flexGrow = currentLeftWidth + 0.3;
rightBtn.style.flexGrow = Math.max(0.1, currentRightWidth
- 0.3);
// 更新按钮文本
if (gameState.stage < gameState.responses.length) {
rightBtn.textContent = gameState.responses[gameState.stage];
gameState.stage++;
}
// 检查是否应该隐藏右按钮
if (gameState.stage >= 5) {
rightBtn.style.opacity = 1
- (gameState.stage
- 4) * 0.2;
if (gameState.stage >= 7) {
rightBtn.style.display = 
9;none
9;;
message.textContent = "现在只能选择猛攻了";
message.style.color = "#e74c3c";
}
}
// 按钮动画效果
rightBtn.style.transform = "scale(0.
9)";
setTimeout(() => {
rightBtn.style.transform = "scale(1)";
}, 200);
});
// 初始化浮动鼠鼠
createMouseIcons();
// 添加下载按钮功能
const downloadBtn = document.createElement(
9;button
9;);
downloadBtn.textContent = "下载游戏";
downloadBtn.className = "btn";
downloadBtn.style.background = "linear
-gradient(145deg, #4a
90e2, #2a6fc
9)";
downloadBtn.style.marginTop = "20px";
downloadBtn.addEventListener(
9;click
9;, () => {
alert("游戏下载功能需要服务器支持，此演示版可在浏览器直接游玩");
});
document.querySelector(
9;.container
9;).appendChild(downloadBtn);
</script>
</body>
</html>
Intel即将推出9款针对平板电脑的BayTrail-T系列处理器，其中7款已曝光。新款Atom Z37x5系列处理器采用Silvermont微架构，拥有4个CPU核心及2MB二级缓存。顶级型号Z3795主频1.6GHz，睿频可达2.39GHz。部分型号支持高达2500×1600像素分辨率，可运行Windows 8.1或Android操作系统。
扫一扫
2891
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
