Spaces:

GGSheng
/

ai

Running

App Files Files Community

ai / index.html

GGSheng

feat: deploy Gemma 4 to hf space

17e971c verified 14 days ago

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>