当前位置：首页 > 资讯 > 系统环境

点击气球小游戏

时间：2025-11-19 19:34 作者：来源：阅读：0
扫一扫，手机访问

摘要：我为你设计了一个适合在微头条上展示的轻量级 "点击气球" 小游戏。这个游戏操作简单，视觉效果生动，适合在移动设备上快速体验。<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta content="width=device-width, initial-scale=

我为你设计了一个适合在微头条上展示的轻量级 "点击气球" 小游戏。这个游戏操作简单，视觉效果生动，适合在移动设备上快速体验。

点击气球小游戏

<!DOCTYPE html>

<head>

<title>点击气球小游戏</title>

tailwind.config = {

theme: {

extend: {

colors: {

primary: '#4F46E5',

secondary: '#EC4899',

accent: '#8B5CF6',

success: '#10B981',

warning: '#F59E0B',

danger: '#EF4444',

fontFamily: {

game: ['"Comic Sans MS"', '"Marker Felt"', 'sans-serif'],

}

</script>

@layer utilities {

.content-auto {

content-visibility: auto;

}

.balloon {

position: absolute;

border-radius: 50%;

cursor: pointer;

transition: transform 0.2s ease;

box-shadow: inset -10px -10px 0 rgba(0, 0, 0, 0.1);

animation: float 3s ease-in-out infinite;

}

.balloon:before {

content: "";

position: absolute;

bottom: -10px;

left: 50%;

transform: translateX(-50%);

width: 4px;

height: 15px;

background-color: rgba(0, 0, 0, 0.1);

}

.popped {

transform: scale(1.2) !important;

opacity: 0 !important;

transition: all 0.2s ease-out;

}

@keyframes float {

0%, 100% {

transform: translateY(0) rotate(0deg);

}

50% {

transform: translateY(-10px) rotate(2deg);

}

.pulse {

animation: pulse 1.5s infinite;

}

@keyframes pulse {

0% {

transform: scale(1);

}

50% {

transform: scale(1.05);

}

100% {

transform: scale(1);

}

</style>

</head>

<body>

<h1>

<i></i> 点击气球

</h1>

<p>

在时间结束前，点击尽可能多的气球得分！

</p>

开始游戏 <i></i>

</button>

<div>

<p><i></i> 点击屏幕上的气球得分</p>

</div>

<div>

<i></i>

</div>

<div>

<i></i>

</div>

再玩一次 <i></i>

</button>

分享成绩 <i></i>

</button>

</div>

// 游戏变量

const gameContainer = document.getElementById('game-container');

const startScreen = document.getElementById('start-screen');

const gameScreen = document.getElementById('game-screen');

const endScreen = document.getElementById('end-screen');

const startBtn = document.getElementById('start-btn');

const restartBtn = document.getElementById('restart-btn');

const shareBtn = document.getElementById('share-btn');

const timerEl = document.getElementById('timer');

const scoreEl = document.getElementById('score');

const finalScoreEl = document.getElementById('final-score');

const highScoreEl = document.getElementById('high-score');

let score = 0;

let timeLeft = 30;

let gameInterval;

let balloonInterval;

let highScore = localStorage.getItem('balloonGameHighScore') || 0;

highScoreEl.textContent = `最高分: ${highScore}`;

// 气球颜色

const balloonColors = [

'#EC4899', // 粉色

'#3B82F6', // 蓝色

'#10B981', // 绿色

'#F59E0B', // 黄色

'#8B5CF6', // 紫色

'#EF4444' // 红色

];

// 开始游戏

startBtn.addEventListener('click', startGame);

restartBtn.addEventListener('click', startGame);

// 分享功能

shareBtn.addEventListener('click', () => {

alert(`我在点击气球游戏中获得了${score}分！你也来挑战一下吧！`);

});

function startGame() {

// 重置游戏状态

score = 0;

timeLeft = 30;

scoreEl.textContent = '0';

timerEl.textContent = '30';

// 隐藏开始和结束界面，显示游戏界面

startScreen.classList.add('hidden');

endScreen.classList.add('hidden');

gameScreen.classList.remove('hidden');

// 清除所有气球

document.querySelectorAll('.balloon').forEach(balloon => balloon.remove());

// 开始计时

startTimer();

// 开始生成气球

startGeneratingBalloons();

}

function startTimer() {

clearInterval(gameInterval);

gameInterval = setInterval(() => {

timeLeft--;

timerEl.textContent = timeLeft;

// 时间少于10秒时变红

if (timeLeft <= 10) {

timerEl.classList.add('text-danger');

timerEl.classList.add('animate-pulse');

} else {

timerEl.classList.remove('text-danger');

timerEl.classList.remove('animate-pulse');

}

if (timeLeft <= 0) {

endGame();

}

}, 1000);

}

function startGeneratingBalloons() {

clearInterval(balloonInterval);

// 开始时生成速度较慢，随着时间加快

let initialDelay = 1000;

let minDelay = 300;

let speedIncrease = 20;

balloonInterval = setInterval(() => {

createBalloon();

// 加快生成速度

initialDelay = Math.max(minDelay, initialDelay - speedIncrease);

clearInterval(balloonInterval);

balloonInterval = setInterval(() => {

createBalloon();

}, initialDelay);

}

function createBalloon() {

const balloon = document.createElement('div');

const size = Math.floor(Math.random() * 40) + 40; // 40-80px

const color = balloonColors[Math.floor(Math.random() * balloonColors.length)];

// 随机位置（左右）

const left = Math.floor(Math.random() * (gameContainer.offsetWidth - size));

// 设置气球样式

balloon.classList.add('balloon');

balloon.style.width = `${size}px`;

balloon.style.height = `${size}px`;

balloon.style.left = `${left}px`;

balloon.style.bottom = `-${size}px`; // 从底部外面进入

balloon.style.backgroundColor = color;

balloon.style.animationDuration = `${Math.random() * 3 + 3}s`; // 3-6秒浮动到顶部

// 添加到游戏界面

gameScreen.appendChild(balloon);

// 点击气球

balloon.addEventListener('click', () => {

popBalloon(balloon);

});

// 气球飘出屏幕后移除

setTimeout(() => {

if (!balloon.classList.contains('popped')) {

balloon.remove();

}

}, 6000);

// 让气球向上移动

let position = -size;

const moveInterval = setInterval(() => {

if (balloon.classList.contains('popped')) {

clearInterval(moveInterval);

return;

}

position += 2; // 移动速度

balloon.style.bottom = `${position}px`;

// 如果气球超出屏幕顶部，移除它

if (position > gameContainer.offsetHeight) {

clearInterval(moveInterval);

balloon.remove();

}

}, 20);

}

function popBalloon(balloon) {

// 标记为已爆

balloon.classList.add('popped');

// 增加分数

score++;

scoreEl.textContent = score;

// 播放爆破音效（这里使用简单的视觉反馈）

const popEffect = document.createElement('div');

popEffect.innerHTML = '<i></i>';

popEffect.style.position = 'absolute';

popEffect.style.left = '50%';

popEffect.style.top = '50%';

popEffect.style.transform = 'translate(-50%, -50%)';

popEffect.style.fontSize = `${parseInt(balloon.style.width) * 0.8}px`;

popEffect.style.opacity = '0';

popEffect.style.transition = 'opacity 0.2s ease';

balloon.appendChild(popEffect);

// 显示爆破效果

setTimeout(() => {

popEffect.style.opacity = '1';

}, 10);

// 移除气球

setTimeout(() => {

balloon.remove();

}, 200);

}

function endGame() {

// 清除定时器

clearInterval(gameInterval);

clearInterval(balloonInterval);

// 保存最高分

if (score > highScore) {

highScore = score;

localStorage.setItem('balloonGameHighScore', highScore);

}

// 更新结束界面

finalScoreEl.textContent = score;

highScoreEl.textContent = `最高分: ${highScore}`;

// 显示结束界面

gameScreen.classList.add('hidden');

endScreen.classList.remove('hidden');

}

// 适配窗口大小

window.addEventListener('resize', () => {

// 移除所有气球，避免位置错误

document.querySelectorAll('.balloon').forEach(balloon => balloon.remove());

});

</script>

</body>

</html>

点击气球小游戏

全部评论(0)

上一篇：课堂抽奖神器诞生！一个指令让DeepSeek造出会跳舞的骰子
下一篇：Axure教程

真快激活码

店铺

推荐商品

点击气球 小游戏

点击气球小游戏