当前位置：首页 > news >正文

重力翻转者：原创趣味小游戏

news 2025/7/7 8:39:22

重力翻转者：原创趣味小游戏

设计一个原创的"重力翻转者"小游戏，玩家通过控制重力方向来躲避障碍物。这个游戏使用了创新的重力翻转机制，不是目前主流的游戏类型。
在这里插入图片描述

游戏设计思路

玩家控制一个方形角色在屏幕底部
障碍物从上方落下
按空格键或点击翻转重力方向，角色会"掉"到屏幕顶部
躲避障碍物并尽可能获得高分
随着时间推移，游戏难度会增加

下面是完整的实现代码：

<!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;}body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;overflow: hidden;color: #fff;}#game-container {position: relative;width: 800px;max-width: 95vw;height: 500px;background: rgba(0, 10, 30, 0.85);border-radius: 15px;box-shadow: 0 0 30px rgba(0, 100, 255, 0.5);overflow: hidden;border: 3px solid rgba(100, 180, 255, 0.6);}canvas {display: block;}#ui-layer {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;z-index: 10;text-align: center;background: rgba(0, 20, 40, 0.7);}h1 {font-size: 3.5rem;margin-bottom: 20px;text-shadow: 0 0 10px #00ccff, 0 0 20px #00ccff;color: #fff;letter-spacing: 2px;}#score-display {position: absolute;top: 20px;right: 20px;font-size: 1.8rem;font-weight: bold;color: #ffcc00;text-shadow: 0 0 5px rgba(255, 204, 0, 0.7);z-index: 5;background: rgba(0, 0, 0, 0.5);padding: 5px 15px;border-radius: 10px;}button {background: linear-gradient(45deg, #00ccff, #0066ff);color: white;border: none;padding: 15px 40px;font-size: 1.3rem;border-radius: 50px;cursor: pointer;margin: 20px 0;transition: all 0.3s ease;font-weight: bold;letter-spacing: 1px;box-shadow: 0 0 15px rgba(0, 204, 255, 0.5);}button:hover {transform: scale(1.05);box-shadow: 0 0 20px rgba(0, 204, 255, 0.8);background: linear-gradient(45deg, #00ddff, #0077ff);}#instructions {background: rgba(0, 30, 60, 0.8);padding: 20px;border-radius: 15px;margin: 20px 0;max-width: 80%;border: 2px solid rgba(0, 150, 255, 0.5);}#instructions h2 {color: #00ccff;margin-bottom: 15px;}#instructions p {margin: 10px 0;font-size: 1.1rem;line-height: 1.6;}.highlight {color: #ffcc00;font-weight: bold;}.gravity-down .player {border-radius: 10px 10px 20px 20px;}.gravity-up .player {border-radius: 20px 20px 10px 10px;}#game-over {display: none;}#final-score {font-size: 2.5rem;color: #ffcc00;margin: 20px 0;text-shadow: 0 0 10px rgba(255, 204, 0, 0.8);}.obstacle {position: absolute;background: linear-gradient(45deg, #ff3366, #ff0033);border-radius: 50%;box-shadow: 0 0 15px rgba(255, 0, 85, 0.7);}.player {position: absolute;background: linear-gradient(45deg, #00ccff, #0066ff);box-shadow: 0 0 20px rgba(0, 204, 255, 0.8);display: flex;justify-content: center;align-items: center;font-size: 24px;color: white;font-weight: bold;transition: all 0.2s ease;}.player::after {content: "↓";position: absolute;bottom: -30px;text-shadow: 0 0 10px rgba(0, 204, 255, 0.8);}.gravity-up .player::after {content: "↑";top: -30px;bottom: auto;}.particle {position: absolute;border-radius: 50%;background: rgba(0, 204, 255, 0.7);pointer-events: none;}@media (max-width: 600px) {h1 {font-size: 2.5rem;}#instructions {padding: 15px;max-width: 90%;}button {padding: 12px 30px;font-size: 1.1rem;}}</style>
</head>
<body><div id="game-container" class="gravity-down"><canvas id="game-canvas" width="800" height="500"></canvas><div id="score-display">分数: <span id="score">0</span></div><div id="ui-layer"><div id="start-screen"><h1>重力翻转者</h1><div id="instructions"><h2>游戏说明</h2><p>你控制一个可以<span class="highlight">翻转重力</span>的方块</p><p>按<span class="highlight">空格键</span>或<span class="highlight">点击屏幕</span>翻转重力方向</p><p>躲避从上方落下的<span class="highlight">红色障碍物</span></p><p>坚持得越久，<span class="highlight">分数越高</span>！</p><p>随着时间推移，游戏会<span class="highlight">越来越难</span>！</p></div><button id="start-button">开始游戏</button></div><div id="game-over"><h1>游戏结束</h1><div id="final-score">你的分数: 0</div><button id="restart-button">再玩一次</button></div></div></div><script>// 游戏主要变量const canvas = document.getElementById('game-canvas');const ctx = canvas.getContext('2d');const gameContainer = document.getElementById('game-container');const startScreen = document.getElementById('start-screen');const gameOverScreen = document.getElementById('game-over');const startButton = document.getElementById('start-button');const restartButton = document.getElementById('restart-button');const scoreDisplay = document.getElementById('score');const finalScoreDisplay = document.getElementById('final-score');// 游戏状态let gameRunning = false;let gravityDown = true;let score = 0;let gameSpeed = 2;let player;let obstacles = [];let particles = [];let lastObstacleTime = 0;let obstacleInterval = 1500; // 初始障碍物生成间隔(毫秒)// 玩家对象class Player {constructor() {this.width = 40;this.height = 40;this.x = canvas.width / 2 - this.width / 2;this.y = canvas.height - this.height - 20;this.color = '#00ccff';}draw() {ctx.fillStyle = this.color;ctx.shadowBlur = 15;ctx.shadowColor = '#00ccff';ctx.fillRect(this.x, this.y, this.width, this.height);ctx.shadowBlur = 0;}update() {// 玩家位置根据重力方向更新if (gravityDown) {this.y = canvas.height - this.height - 20;} else {this.y = 20;}}}// 障碍物对象class Obstacle {constructor() {this.radius = Math.random() * 20 + 15;this.x = Math.random() * (canvas.width - this.radius * 2) + this.radius;this.y = -this.radius;this.speedY = Math.random() * 2 + gameSpeed;this.color = `hsl(${Math.random() * 20 + 340}, 90%, 60%)`;}draw() {ctx.fillStyle = this.color;ctx.beginPath();ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);ctx.fill();// 添加发光效果ctx.shadowBlur = 15;ctx.shadowColor = this.color;ctx.fill();ctx.shadowBlur = 0;}update() {this.y += this.speedY;}}// 粒子效果对象class Particle {constructor(x, y, color) {this.x = x;this.y = y;this.size = Math.random() * 5 + 2;this.speedX = Math.random() * 6 - 3;this.speedY = Math.random() * 6 - 3;this.color = color;this.life = 30;}draw() {ctx.fillStyle = this.color;ctx.beginPath();ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);ctx.fill();}update() {this.x += this.speedX;this.y += this.speedY;this.life--;}}// 初始化游戏function initGame() {player = new Player();obstacles = [];particles = [];score = 0;gameSpeed = 2;obstacleInterval = 1500;gravityDown = true;gameContainer.className = 'gravity-down';scoreDisplay.textContent = score;lastObstacleTime = 0;}// 生成粒子效果function createParticles(x, y, color, count) {for (let i = 0; i < count; i++) {particles.push(new Particle(x, y, color));}}// 翻转重力function flipGravity() {if (!gameRunning) return;gravityDown = !gravityDown;gameContainer.className = gravityDown ? 'gravity-down' : 'gravity-up';// 创建翻转粒子效果createParticles(player.x + player.width/2, player.y + player.height/2, '#00ccff', 30);}// 检测碰撞function checkCollision(player, obstacle) {// 简单矩形与圆形碰撞检测const closestX = Math.max(player.x, Math.min(obstacle.x, player.x + player.width));const closestY = Math.max(player.y, Math.min(obstacle.y, player.y + player.height));const distanceX = obstacle.x - closestX;const distanceY = obstacle.y - closestY;return (distanceX * distanceX + distanceY * distanceY) < (obstacle.radius * obstacle.radius);}// 游戏主循环function gameLoop(timestamp) {if (!gameRunning) return;// 清空画布ctx.clearRect(0, 0, canvas.width, canvas.height);// 绘制星空背景drawBackground();// 更新和绘制玩家player.update();player.draw();// 生成障碍物if (timestamp - lastObstacleTime > obstacleInterval) {obstacles.push(new Obstacle());lastObstacleTime = timestamp;// 随时间增加难度if (obstacleInterval > 500) {obstacleInterval -= 10;}if (gameSpeed < 8) {gameSpeed += 0.05;}}// 更新和绘制障碍物for (let i = obstacles.length - 1; i >= 0; i--) {obstacles[i].update();obstacles[i].draw();// 检测碰撞if (checkCollision(player, obstacles[i])) {gameOver();return;}// 移除屏幕外的障碍物并增加分数if (obstacles[i].y > canvas.height + obstacles[i].radius) {obstacles.splice(i, 1);score += 10;scoreDisplay.textContent = score;}}// 更新和绘制粒子for (let i = particles.length - 1; i >= 0; i--) {particles[i].update();particles[i].draw();if (particles[i].life <= 0) {particles.splice(i, 1);}}// 继续游戏循环requestAnimationFrame(gameLoop);}// 绘制星空背景function drawBackground() {// 绘制深色背景ctx.fillStyle = 'rgba(0, 10, 30, 0.8)';ctx.fillRect(0, 0, canvas.width, canvas.height);// 绘制星星ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';for (let i = 0; i < 100; i++) {const x = Math.random() * canvas.width;const y = Math.random() * canvas.height;const radius = Math.random() * 1.5;ctx.beginPath();ctx.arc(x, y, radius, 0, Math.PI * 2);ctx.fill();}}// 游戏结束function gameOver() {gameRunning = false;finalScoreDisplay.textContent = `你的分数: ${score}`;gameOverScreen.style.display = 'block';// 创建游戏结束粒子效果createParticles(player.x + player.width/2, player.y + player.height/2, '#ff3366', 100);}// 开始游戏function startGame() {initGame();startScreen.style.display = 'none';gameOverScreen.style.display = 'none';gameRunning = true;requestAnimationFrame(gameLoop);}// 事件监听startButton.addEventListener('click', startGame);restartButton.addEventListener('click', startGame);// 键盘事件 - 空格键翻转重力document.addEventListener('keydown', (e) => {if (e.code === 'Space') {flipGravity();e.preventDefault();}});// 点击事件 - 点击屏幕翻转重力canvas.addEventListener('click', flipGravity);// 触摸事件 - 移动设备支持canvas.addEventListener('touchend', (e) => {flipGravity();e.preventDefault();});// 初始化游戏状态initGame();drawBackground();player.draw();</script>
</body>
</html>