Hugging Face's logo

Spaces:
SZFSPC
/
apple
Paused

App Files Community
apple / index.html
SZFSPC's picture
SZFSPC
feat: deploy to hf space | model=mistral-21461b
2bfa191 verified
Raw History Blame Contribute Delete
26.7 kB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Take a Break - Snake Game</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}
/* 背景动画粒子 */
.particles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
z-index: 0;
}
.particle {
position: absolute;
width: 4px;
height: 4px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
animation: float 15s infinite;
}
@keyframes float {
0%, 100% {
transform: translateY(100vh) rotate(0deg);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(-100vh) rotate(720deg);
opacity: 0;
}
}
/* 主容器 */
.container {
position: relative;
z-index: 1;
text-align: center;
padding: 20px;
}
/* 标题区域 */
.header {
margin-bottom: 20px;
}
.header h1 {
color: #fff;
font-size: 2.5em;
margin-bottom: 10px;
text-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
background: linear-gradient(90deg, #00ffff, #ff00ff, #ffff00);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
from {
filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.5));
}
to {
filter: drop-shadow(0 0 20px rgba(255, 0, 255, 0.5));
}
}
.header p {
color: rgba(255, 255, 255, 0.7);
font-size: 1.1em;
}
/* 游戏区域 */
.game-wrapper {
display: inline-block;
background: rgba(0, 0, 0, 0.6);
border-radius: 20px;
padding: 20px;
box-shadow:
0 0 50px rgba(0, 255, 255, 0.2),
inset 0 0 50px rgba(0, 0, 0, 0.5);
border: 2px solid rgba(0, 255, 255, 0.3);
}
.score-board {
display: flex;
justify-content: space-around;
margin-bottom: 15px;
padding: 10px 15px;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
color: #fff;
font-size: 1.1em;
font-weight: bold;
gap: 15px;
}
.score-item {
display: flex;
align-items: center;
gap: 10px;
}
.score-label {
color: rgba(255, 255, 255, 0.6);
font-size: 0.8em;
}
.score-value {
color: #00ffff;
font-size: 1.3em;
text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}
#gameCanvas {
border-radius: 10px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
background: #0a0a0a;
}
/* 控制按钮 */
.controls {
margin-top: 20px;
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
}
.btn {
padding: 12px 30px;
border: none;
border-radius: 25px;
font-size: 1em;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
}
.btn-primary {
background: linear-gradient(135deg, #00ffff 0%, #0080ff 100%);
color: #000;
box-shadow: 0 4px 15px rgba(0, 255, 255, 0.4);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 25px rgba(0, 255, 255, 0.6);
}
.btn-secondary {
background: rgba(255, 255, 255, 0.1);
color: #fff;
border: 2px solid rgba(255, 255, 255, 0.3);
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.5);
}
/* 移动端控制 */
.mobile-controls {
display: none;
margin-top: 20px;
}
.d-pad {
display: grid;
grid-template-columns: repeat(3, 60px);
grid-template-rows: repeat(3, 60px);
gap: 5px;
justify-content: center;
}
.d-btn {
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(0, 255, 255, 0.3);
border-radius: 10px;
color: #fff;
font-size: 1.5em;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.d-btn:hover, .d-btn:active {
background: rgba(0, 255, 255, 0.3);
border-color: #00ffff;
}
.d-btn:nth-child(2) { grid-column: 2; grid-row: 1; }
.d-btn:nth-child(4) { grid-column: 1; grid-row: 2; }
.d-btn:nth-child(5) { grid-column: 2; grid-row: 2; background: rgba(0, 255, 255, 0.2); }
.d-btn:nth-child(6) { grid-column: 3; grid-row: 2; }
.d-btn:nth-child(8) { grid-column: 2; grid-row: 3; }
/* 提示信息 */
.tips {
margin-top: 20px;
color: rgba(255, 255, 255, 0.5);
font-size: 0.9em;
}
.tips kbd {
background: rgba(255, 255, 255, 0.2);
padding: 2px 8px;
border-radius: 4px;
font-family: monospace;
}
/* 游戏结束覆盖层 */
.game-over {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.9);
padding: 40px;
border-radius: 20px;
text-align: center;
display: none;
border: 2px solid #ff0066;
box-shadow: 0 0 50px rgba(255, 0, 102, 0.5);
}
.game-over h2 {
color: #ff0066;
font-size: 2em;
margin-bottom: 20px;
text-shadow: 0 0 20px rgba(255, 0, 102, 0.5);
}
.game-over .final-score {
color: #fff;
font-size: 1.5em;
margin-bottom: 20px;
}
/* 响应式 */
@media (max-width: 600px) {
.header h1 {
font-size: 1.8em;
}
#gameCanvas {
width: 100%;
max-width: 350px;
height: auto;
}
.mobile-controls {
display: block;
}
.tips {
display: none;
}
}
/* 登录链接 */
.login-link {
margin-top: 30px;
color: rgba(255, 255, 255, 0.5);
}
.login-link a {
color: #00ffff;
text-decoration: none;
border-bottom: 1px dashed #00ffff;
transition: all 0.3s;
}
.login-link a:hover {
color: #fff;
border-bottom-style: solid;
}
</style>
</head>
<body>
<!-- 背景粒子 -->
<div class="particles" id="particles"></div>
<div class="container">
<div class="header">
<h1>🐍 Snake Game</h1>
<p>Take a break and enjoy a game!</p>
</div>
<div class="game-wrapper">
<div class="score-board">
<div class="score-item">
<span class="score-label">SCORE</span>
<span class="score-value" id="score">0</span>
</div>
<div class="score-item" id="modeIndicator">
<span class="score-label" style="color: #ff00ff; text-shadow: 0 0 10px rgba(255, 0, 255, 0.5);">DEMO MODE</span>
</div>
<div class="score-item">
<span class="score-label">HIGH SCORE</span>
<span class="score-value" id="highScore">0</span>
</div>
</div>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<div class="game-over" id="gameOver">
<h2>GAME OVER</h2>
<div class="final-score">Final Score: <span id="finalScore">0</span></div>
<button class="btn btn-primary" onclick="startGame()">PLAY AGAIN</button>
</div>
<div class="controls">
<button class="btn btn-primary" id="startBtn" onclick="startGame()">CLICK TO PLAY</button>
<button class="btn btn-secondary" onclick="pauseGame()" id="pauseBtn" disabled>PAUSE</button>
</div>
<!-- 移动端控制 -->
<div class="mobile-controls">
<div class="d-pad">
<div class="d-btn" onclick="changeDirection('up')">▲</div>
<div class="d-btn" onclick="changeDirection('left')">◀</div>
<div class="d-btn">●</div>
<div class="d-btn" onclick="changeDirection('right')">▶</div>
<div class="d-btn" onclick="changeDirection('down')">▼</div>
</div>
</div>
<div class="tips">
Use <kbd>↑</kbd> <kbd>↓</kbd> <kbd>←</kbd> <kbd>→</kbd> or <kbd>W</kbd> <kbd>S</kbd> <kbd>A</kbd> <kbd>D</kbd> to control
</div>
</div>
<div class="login-link">
Need to manage your server? <a href="/login">Login here</a>
</div>
</div>
<script>
// 游戏配置
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const gridSize = 20;
const tileCount = canvas.width / gridSize;
let snake = [];
let food = {};
let direction = 'right';
let nextDirection = 'right';
let score = 0;
let highScore = localStorage.getItem('snakeHighScore') || 0;
let gameLoop = null;
let isPaused = false;
let isGameOver = false;
let gameSpeed = 100;
let isDemoMode = true; // 演示模式标志
let isUserMode = false; // 用户交互模式标志
// 初始化最高分显示
document.getElementById('highScore').textContent = highScore;
// 创建背景粒子
function createParticles() {
const container = document.getElementById('particles');
for (let i = 0; i < 50; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
particle.style.left = Math.random() * 100 + '%';
particle.style.animationDelay = Math.random() * 15 + 's';
particle.style.animationDuration = (10 + Math.random() * 10) + 's';
container.appendChild(particle);
}
}
// 初始化游戏
function initGame() {
snake = [
{ x: 5, y: 10 },
{ x: 4, y: 10 },
{ x: 3, y: 10 }
];
direction = 'right';
nextDirection = 'right';
score = 0;
isGameOver = false;
isPaused = false;
gameSpeed = 100;
document.getElementById('score').textContent = score;
document.getElementById('gameOver').style.display = 'none';
if (isUserMode) {
document.getElementById('startBtn').textContent = 'RESTART';
} else {
document.getElementById('startBtn').textContent = 'CLICK TO PLAY';
}
spawnFood();
}
// AI自动寻路（演示模式）
function getAIDirection() {
const head = snake[0];
let bestDirection = direction;
let minDistance = Infinity;
const directions = ['up', 'down', 'left', 'right'];
const opposites = { 'up': 'down', 'down': 'up', 'left': 'right', 'right': 'left' };
for (const dir of directions) {
// 避免180度转向
if (opposites[dir] === direction) continue;
let nextX = head.x;
let nextY = head.y;
switch(dir) {
case 'up': nextY--; break;
case 'down': nextY++; break;
case 'left': nextX--; break;
case 'right': nextX++; break;
}
// 检查是否会撞墙或撞到自己
if (nextX < 0 || nextX >= tileCount || nextY < 0 || nextY >= tileCount) continue;
if (isSnakeAt(nextX, nextY)) continue;
// 计算到食物的距离
const distance = Math.abs(nextX - food.x) + Math.abs(nextY - food.y);
if (distance < minDistance) {
minDistance = distance;
bestDirection = dir;
}
}
return bestDirection;
}
// 生成食物
function spawnFood() {
do {
food = {
x: Math.floor(Math.random() * tileCount),
y: Math.floor(Math.random() * tileCount)
};
} while (isSnakeAt(food.x, food.y));
}
// 检查蛇是否在指定位置
function isSnakeAt(x, y) {
return snake.some(segment => segment.x === x && segment.y === y);
}
// 绘制游戏
function draw() {
// 清空画布
ctx.fillStyle = '#0a0a0a';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 绘制网格
ctx.strokeStyle = 'rgba(0, 255, 255, 0.05)';
ctx.lineWidth = 1;
for (let i = 0; i <= tileCount; i++) {
ctx.beginPath();
ctx.moveTo(i * gridSize, 0);
ctx.lineTo(i * gridSize, canvas.height);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0, i * gridSize);
ctx.lineTo(canvas.width, i * gridSize);
ctx.stroke();
}
// 绘制食物（发光效果）
const foodX = food.x * gridSize;
const foodY = food.y * gridSize;
// 食物光晕
const gradient = ctx.createRadialGradient(
foodX + gridSize/2, foodY + gridSize/2, 0,
foodX + gridSize/2, foodY + gridSize/2, gridSize
);
gradient.addColorStop(0, 'rgba(255, 0, 102, 0.8)');
gradient.addColorStop(1, 'rgba(255, 0, 102, 0)');
ctx.fillStyle = gradient;
ctx.fillRect(foodX - gridSize/2, foodY - gridSize/2, gridSize * 2, gridSize * 2);
// 食物本体
ctx.fillStyle = '#ff0066';
ctx.shadowColor = '#ff0066';
ctx.shadowBlur = 20;
ctx.fillRect(foodX + 2, foodY + 2, gridSize - 4, gridSize - 4);
ctx.shadowBlur = 0;
// 绘制蛇
snake.forEach((segment, index) => {
const x = segment.x * gridSize;
const y = segment.y * gridSize;
if (index === 0) {
// 蛇头
ctx.fillStyle = '#00ffff';
ctx.shadowColor = '#00ffff';
ctx.shadowBlur = 15;
} else {
// 蛇身渐变
const ratio = index / snake.length;
const r = Math.floor(0 * (1 - ratio) + 0 * ratio);
const g = Math.floor(255 * (1 - ratio) + 100 * ratio);
const b = Math.floor(255 * (1 - ratio) + 200 * ratio);
ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;
ctx.shadowColor = ctx.fillStyle;
ctx.shadowBlur = 10;
}
ctx.fillRect(x + 1, y + 1, gridSize - 2, gridSize - 2);
// 蛇眼
if (index === 0) {
ctx.fillStyle = '#000';
ctx.shadowBlur = 0;
const eyeSize = 3;
let eye1X, eye1Y, eye2X, eye2Y;
switch(direction) {
case 'up':
eye1X = x + 5; eye1Y = y + 5;
eye2X = x + 14; eye2Y = y + 5;
break;
case 'down':
eye1X = x + 5; eye1Y = y + 12;
eye2X = x + 14; eye2Y = y + 12;
break;
case 'left':
eye1X = x + 5; eye1Y = y + 5;
eye2X = x + 5; eye2Y = y + 12;
break;
case 'right':
eye1X = x + 12; eye1Y = y + 5;
eye2X = x + 12; eye2Y = y + 12;
break;
}
ctx.fillRect(eye1X, eye1Y, eyeSize, eyeSize);
ctx.fillRect(eye2X, eye2Y, eyeSize, eyeSize);
}
});
ctx.shadowBlur = 0;
}
// 更新游戏状态
function update() {
if (isPaused || isGameOver) return;
// 演示模式下AI自动控制
if (isDemoMode && !isUserMode) {
nextDirection = getAIDirection();
}
direction = nextDirection;
const head = { ...snake[0] };
switch(direction) {
case 'up': head.y--; break;
case 'down': head.y++; break;
case 'left': head.x--; break;
case 'right': head.x++; break;
}
// 检查碰撞
if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
if (isDemoMode && !isUserMode) {
// 演示模式下自动重新开始
initGame();
return;
}
gameOver();
return;
}
if (isSnakeAt(head.x, head.y)) {
if (isDemoMode && !isUserMode) {
// 演示模式下自动重新开始
initGame();
return;
}
gameOver();
return;
}
snake.unshift(head);
// 检查是否吃到食物
if (head.x === food.x && head.y === food.y) {
score += 10;
document.getElementById('score').textContent = score;
// 更新最高分
if (score > highScore) {
highScore = score;
localStorage.setItem('snakeHighScore', highScore);
document.getElementById('highScore').textContent = highScore;
}
// 加速
if (gameSpeed > 50) {
gameSpeed -= 2;
clearInterval(gameLoop);
gameLoop = setInterval(gameStep, gameSpeed);
}
spawnFood();
} else {
snake.pop();
}
}
// 游戏步进
function gameStep() {
update();
draw();
}
// 游戏结束
function gameOver() {
isGameOver = true;
clearInterval(gameLoop);
document.getElementById('finalScore').textContent = score;
document.getElementById('gameOver').style.display = 'block';
}
// 切换到用户模式
function switchToUserMode() {
if (!isUserMode) {
isUserMode = true;
isDemoMode = false;
document.getElementById('startBtn').textContent = 'RESTART';
document.getElementById('pauseBtn').disabled = false;
// 更新模式指示器
const modeIndicator = document.getElementById('modeIndicator');
if (modeIndicator) {
modeIndicator.innerHTML = '<span class="score-label" style="color: #00ff00; text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);">USER MODE</span>';
}
// 显示提示
showModeIndicator('USER MODE');
}
}
// 显示模式指示器
function showModeIndicator(text) {
const indicator = document.createElement('div');
indicator.style.cssText = `
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 255, 255, 0.9);
color: #000;
padding: 15px 30px;
border-radius: 10px;
font-weight: bold;
font-size: 1.2em;
z-index: 100;
animation: fadeInOut 1.5s ease-in-out;
`;
indicator.textContent = text;
document.querySelector('.game-wrapper').appendChild(indicator);
setTimeout(() => indicator.remove(), 1500);
}
// 添加淡入淡出动画
const style = document.createElement('style');
style.textContent = `
@keyframes fadeInOut {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}
`;
document.head.appendChild(style);
// 开始游戏
function startGame() {
clearInterval(gameLoop);
switchToUserMode();
initGame();
draw();
gameLoop = setInterval(gameStep, gameSpeed);
}
// 暂停游戏
function pauseGame() {
if (isGameOver) return;
isPaused = !isPaused;
event.target.textContent = isPaused ? 'RESUME' : 'PAUSE';
}
// 改变方向
function changeDirection(newDirection) {
// 第一次用户操作时切换到用户模式
switchToUserMode();
const opposites = {
'up': 'down',
'down': 'up',
'left': 'right',
'right': 'left'
};
if (opposites[newDirection] !== direction) {
nextDirection = newDirection;
}
}
// 键盘控制
document.addEventListener('keydown', (e) => {
switch(e.key) {
case 'ArrowUp':
case 'w':
case 'W':
e.preventDefault();
changeDirection('up');
break;
case 'ArrowDown':
case 's':
case 'S':
e.preventDefault();
changeDirection('down');
break;
case 'ArrowLeft':
case 'a':
case 'A':
e.preventDefault();
changeDirection('left');
break;
case 'ArrowRight':
case 'd':
case 'D':
e.preventDefault();
changeDirection('right');
break;
case ' ':
e.preventDefault();
pauseGame();
break;
}
});
// 触摸控制（防止页面滚动）
document.addEventListener('touchmove', (e) => {
e.preventDefault();
}, { passive: false });
// 点击画布切换到用户模式
canvas.addEventListener('click', () => {
switchToUserMode();
});
// 点击移动端控制按钮切换到用户模式
document.querySelectorAll('.d-btn').forEach(btn => {
btn.addEventListener('click', () => {
switchToUserMode();
});
});
// 初始化
createParticles();
initGame();
draw();
gameLoop = setInterval(gameStep, gameSpeed);
</script>
</body>
</html>