重力翻转者：原创趣味小游戏
设计一个原创的"重力翻转者"小游戏，玩家通过控制重力方向来躲避障碍物。这个游戏使用了创新的重力翻转机制，不是目前主流的游戏类型。
游戏设计思路
- 玩家控制一个方形角色在屏幕底部
- 障碍物从上方落下
- 按空格键或点击翻转重力方向，角色会"掉"到屏幕顶部
- 躲避障碍物并尽可能获得高分
- 随着时间推移，游戏难度会增加
下面是完整的实现代码：
<!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>
游戏特点
- 创新的重力机制：玩家通过翻转重力躲避障碍物
- 视觉效果：
- 星空背景和发光元素
- 粒子特效
- 平滑的重力翻转动画
- 难度递增：
- 障碍物生成速度逐渐加快
- 障碍物移动速度随时间增加
- 响应式设计：适配不同屏幕尺寸
- 操作方式多样：支持键盘(空格键)和触摸/点击操作
游戏玩法
- 点击"开始游戏"按钮
- 按空格键或点击屏幕翻转重力方向
- 控制方块躲避红色障碍物
- 每成功躲避一个障碍物得10分
- 坚持越久，分数越高，难度越大
- 碰撞后游戏结束，显示最终得分
游戏采用了创新的重力翻转机制，玩家需要预判障碍物位置并适时翻转重力，这种玩法既简单又富有挑战性！