Geometry Dash Style - бег с препятствиями
by PrismBolt10496 lines16.3 KB
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>Geometry Dash Style - бег с препятствиями</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
body {
background: #1a4d2a;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Courier New', 'Monaco', monospace;
touch-action: pan-x pan-y;
}
.game-container {
position: relative;
box-shadow: 0 20px 35px rgba(0,0,0,0.5);
border-radius: 20px;
overflow: hidden;
border: 2px solid #8bc34a;
}
canvas {
display: block;
width: 100%;
height: auto;
background: #87CEEB;
cursor: pointer;
touch-action: manipulation;
}
.info {
position: absolute;
top: 12px;
left: 0;
right: 0;
text-align: center;
pointer-events: none;
z-index: 10;
font-weight: bold;
text-shadow: 0 0 5px #00ffff;
}
.score-board {
display: inline-block;
background: rgba(0,0,0,0.7);
backdrop-filter: blur(4px);
padding: 6px 20px;
border-radius: 40px;
font-size: 1.7rem;
font-weight: bold;
letter-spacing: 2px;
color: #ffe484;
font-family: monospace;
border: 1px solid #ffcc44;
}
.restart-btn {
position: absolute;
bottom: 25px;
left: 50%;
transform: translateX(-50%);
background: #ff4757;
color: white;
border: none;
padding: 10px 24px;
border-radius: 50px;
font-weight: bold;
font-size: 1.1rem;
font-family: inherit;
cursor: pointer;
box-shadow: 0 5px 0 #8b1e2a;
transition: 0.05s linear;
z-index: 20;
pointer-events: auto;
letter-spacing: 1px;
}
.restart-btn:active {
transform: translateX(-50%) translateY(3px);
box-shadow: 0 2px 0 #8b1e2a;
}
.instruction {
position: absolute;
bottom: 20px;
right: 12px;
background: rgba(0,0,0,0.5);
padding: 4px 12px;
border-radius: 50px;
font-size: 0.7rem;
color: #ffffbb;
pointer-events: none;
font-weight: bold;
}
@media (max-width: 600px) {
.score-board { font-size: 1.3rem; padding: 4px 16px; }
.restart-btn { padding: 8px 20px; font-size: 1rem; bottom: 18px; }
}
</style>
</head>
<body>
<div class="game-container">
<canvas id="gameCanvas" width="450" height="650"></canvas>
<div class="info">
<div class="score-board" id="scoreDisplay">0</div>
</div>
<button class="restart-btn" id="restartButton">⟳ СТАРТ / ЗАНОВО</button>
<div class="instruction">⬆️ ТАПНИ, ЧТОБЫ ПРЫГНУТЬ</div>
</div>
<script>
(function() {
// ------ НАСТРОЙКИ ИГРЫ (Geometry Dash стиль) ------
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreSpan = document.getElementById('scoreDisplay');
const W = 450;
const H = 650;
canvas.width = W;
canvas.height = H;
const GROUND_Y = H - 60; // уровень земли
const PLAYER_SIZE = 32;
const PLAYER_FIXED_X = 90;
// ФИЗИКА: прыжок стал выше
const GRAVITY = 1600; // пикселей/сек²
const JUMP_POWER = -560; // начальная скорость прыжка (сильнее, чем -400)
const OBSTACLE_WIDTH = 28;
const OBSTACLE_HEIGHT = 32;
const BASE_SPEED = 230; // скорость движения препятствий
const MIN_GAP_SEC = 0.9;
const MAX_GAP_SEC = 1.5;
let gameRunning = true;
let score = 0;
let frameRequest;
let lastTimestamp = 0;
let player = {
x: PLAYER_FIXED_X,
y: GROUND_Y - PLAYER_SIZE,
vy: 0,
width: PLAYER_SIZE,
height: PLAYER_SIZE,
isOnGround: true
};
let obstacles = [];
let timeToNextObstacle = 0;
let deathFlash = 0;
function updateScoreUI() {
scoreSpan.innerText = Math.floor(score);
}
function resetGame() {
gameRunning = true;
score = 0;
updateScoreUI();
obstacles = [];
player.y = GROUND_Y - PLAYER_SIZE;
player.vy = 0;
player.isOnGround = true;
deathFlash = 0;
timeToNextObstacle = 0.6;
}
function addObstacle() {
obstacles.push({
x: W,
width: OBSTACLE_WIDTH,
height: OBSTACLE_HEIGHT,
counted: false
});
}
function checkCollision() {
const playerLeft = player.x;
const playerRight = player.x + PLAYER_SIZE;
const playerTop = player.y;
const playerBottom = player.y + PLAYER_SIZE;
for (let i = 0; i < obstacles.length; i++) {
const obs = obstacles[i];
const obsLeft = obs.x;
const obsRight = obs.x + obs.width;
const obsTop = GROUND_Y - OBSTACLE_HEIGHT;
const obsBottom = GROUND_Y;
if (playerRight > obsLeft && playerLeft < obsRight &&
playerBottom > obsTop && playerTop < obsBottom) {
return true;
}
}
return false;
}
function updateScoreFromObstacles() {
for (let i = 0; i < obstacles.length; i++) {
const obs = obstacles[i];
if (!obs.counted && (obs.x + obs.width) < player.x) {
obs.counted = true;
score += 10;
updateScoreUI();
}
}
}
function jump() {
if (!gameRunning) return;
const epsilon = 3;
if (player.y + PLAYER_SIZE >= GROUND_Y - epsilon && player.vy >= -50) {
player.vy = JUMP_POWER;
player.isOnGround = false;
}
}
function updatePhysics(dtSec) {
if (dtSec > 0.03) dtSec = 0.03;
player.vy += GRAVITY * dtSec;
player.y += player.vy * dtSec;
if (player.y + PLAYER_SIZE >= GROUND_Y) {
player.y = GROUND_Y - PLAYER_SIZE;
player.vy = 0;
player.isOnGround = true;
}
if (player.y < 0) {
player.y = 0;
if (player.vy < 0) player.vy = 0;
}
}
function updateObstacles(dtSec) {
for (let i = 0; i < obstacles.length; i++) {
obstacles[i].x -= BASE_SPEED * dtSec;
}
obstacles = obstacles.filter(obs => obs.x + obs.width > 0);
if (gameRunning) {
if (timeToNextObstacle <= 0) {
addObstacle();
const gap = MIN_GAP_SEC + Math.random() * (MAX_GAP_SEC - MIN_GAP_SEC);
timeToNextObstacle = gap;
} else {
timeToNextObstacle -= dtSec;
}
}
}
function updateGame(dtSec) {
if (!gameRunning) return;
updatePhysics(dtSec);
updateObstacles(dtSec);
updateScoreFromObstacles();
if (checkCollision()) {
gameRunning = false;
deathFlash = 1.0;
return;
}
if (player.y + PLAYER_SIZE > GROUND_Y + 10) {
gameRunning = false;
deathFlash = 1.0;
}
}
// ---------- НОВЫЙ ФОН: НЕБО + ЗЕЛЕНАЯ ТРАВА ----------
function drawBackground() {
// голубое небо с градиентом
const grad = ctx.createLinearGradient(0, 0, 0, GROUND_Y);
grad.addColorStop(0, "#7ec8ff");
grad.addColorStop(1, "#3c9eff");
ctx.fillStyle = grad;
ctx.fillRect(0, 0, W, GROUND_Y);
// облака
ctx.fillStyle = "rgba(255,255,240,0.9)";
ctx.shadowBlur = 0;
let time = Date.now() / 1000;
for (let i = 0; i < 4; i++) {
let cloudX = (i * 137 + time * 10) % (W + 100) - 50;
let cloudY = 40 + i * 70;
ctx.beginPath();
ctx.ellipse(cloudX, cloudY, 35, 25, 0, 0, Math.PI * 2);
ctx.ellipse(cloudX + 25, cloudY - 8, 30, 22, 0, 0, Math.PI * 2);
ctx.ellipse(cloudX - 20, cloudY - 5, 28, 22, 0, 0, Math.PI * 2);
ctx.fill();
}
ctx.shadowBlur = 0;
// солнце
ctx.fillStyle = "#fff9c4";
ctx.shadowBlur = 12;
ctx.shadowColor = "#ffdd77";
ctx.beginPath();
ctx.arc(W - 50, 55, 28, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = "#ffeb3b";
ctx.beginPath();
ctx.arc(W - 50, 55, 22, 0, Math.PI * 2);
ctx.fill();
ctx.shadowBlur = 0;
}
function drawGround() {
// зеленая земля (трава)
ctx.fillStyle = "#4caf50";
ctx.fillRect(0, GROUND_Y, W, H - GROUND_Y);
// текстура травы - травинки
ctx.fillStyle = "#2e7d32";
for (let i = 0; i < W; i += 12) {
ctx.fillRect(i, GROUND_Y - 3, 2, 8);
ctx.fillRect(i + 5, GROUND_Y - 5, 2, 10);
}
ctx.fillStyle = "#81c784";
for (let i = 4; i < W; i += 18) {
ctx.fillRect(i, GROUND_Y - 2, 3, 6);
}
// яркая кайма травы
ctx.strokeStyle = "#b9f6ca";
ctx.lineWidth = 3;
ctx.beginPath();
ctx.moveTo(0, GROUND_Y);
ctx.lineTo(W, GROUND_Y);
ctx.stroke();
}
function drawPlayer() {
let yPos = player.y;
ctx.shadowBlur = 6;
ctx.shadowColor = "#00bcd4";
ctx.fillStyle = "#ffd54f";
ctx.fillRect(player.x, yPos, PLAYER_SIZE, PLAYER_SIZE);
ctx.fillStyle = "#ff8a65";
ctx.fillRect(player.x+5, yPos+6, 6, 8);
ctx.fillRect(player.x+PLAYER_SIZE-11, yPos+6, 6, 8);
ctx.fillStyle = "#3e2723";
ctx.fillRect(player.x+8, yPos+18, 6, 8);
ctx.fillRect(player.x+18, yPos+18, 6, 8);
ctx.beginPath();
if (player.vy < -50) {
ctx.arc(player.x+16, yPos+26, 8, 0.1, Math.PI - 0.1);
} else {
ctx.arc(player.x+16, yPos+26, 8, 0, Math.PI);
}
ctx.strokeStyle = "#1e2a3e";
ctx.lineWidth = 2;
ctx.stroke();
ctx.fillStyle = "#ffb74d";
ctx.fillRect(player.x+4, yPos-5, 6, 8);
ctx.fillRect(player.x+22, yPos-5, 6, 8);
ctx.shadowBlur = 0;
}
function drawObstacles() {
for (let obs of obstacles) {
const obsX = obs.x;
const obsY = GROUND_Y - OBSTACLE_HEIGHT;
const grad = ctx.createLinearGradient(obsX, obsY, obsX+OBSTACLE_WIDTH, obsY+OBSTACLE_HEIGHT);
grad.addColorStop(0, "#e74c3c");
grad.addColorStop(1, "#c0392b");
ctx.fillStyle = grad;
ctx.fillRect(obsX, obsY, OBSTACLE_WIDTH, OBSTACLE_HEIGHT);
ctx.fillStyle = "#f1c40f";
ctx.fillRect(obsX+4, obsY-4, OBSTACLE_WIDTH-8, 6);
ctx.fillStyle = "#2ecc71";
for (let i = 0; i < 3; i++) {
ctx.fillRect(obsX+4 + i*7, obsY+8, 4, 12);
}
ctx.fillStyle = "#f39c12";
ctx.beginPath();
ctx.moveTo(obsX+5, obsY-4);
ctx.lineTo(obsX+10, obsY-10);
ctx.lineTo(obsX+15, obsY-4);
ctx.fill();
ctx.beginPath();
ctx.moveTo(obsX+15, obsY-4);
ctx.lineTo(obsX+20, obsY-10);
ctx.lineTo(obsX+25, obsY-4);
ctx.fill();
}
}
function drawEffectsAndUI() {
if (deathFlash > 0) {
ctx.fillStyle = `rgba(255, 50, 50, ${deathFlash * 0.7})`;
ctx.fillRect(0, 0, W, H);
deathFlash -= 0.05;
if (deathFlash < 0) deathFlash = 0;
}
if (!gameRunning) {
ctx.font = "bold 28 monospace";
ctx.fillStyle = "#ffd966";
ctx.shadowBlur = 0;
ctx.fillText("GAME OVER", W/2-100, H/2-50);
ctx.font = "18px monospace";
ctx.fillStyle = "#aaffdd";
ctx.fillText("нажми кнопку внизу", W/2-110, H/2+20);
}
ctx.font = "bold 28 'Courier New'";
ctx.fillStyle = "#ffffff";
ctx.shadowBlur = 0;
ctx.fillText("⚡"+Math.floor(score), 20, 58);
}
function draw() {
drawBackground();
drawGround();
drawObstacles();
drawPlayer();
drawEffectsAndUI();
}
let lastFrameTime = 0;
function gameLoop(nowMs) {
if (!lastFrameTime) {
lastFrameTime = nowMs;
frameRequest = requestAnimationFrame(gameLoop);
draw();
return;
}
let dt = Math.min(0.033, (nowMs - lastFrameTime) / 1000);
if (dt <= 0) {
lastFrameTime = nowMs;
frameRequest = requestAnimationFrame(gameLoop);
draw();
return;
}
if (gameRunning) {
updateGame(dt);
}
draw();
lastFrameTime = nowMs;
frameRequest = requestAnimationFrame(gameLoop);
}
function handleJumpStart(e) {
e.preventDefault();
jump();
}
function attachEvents() {
canvas.addEventListener('touchstart', handleJumpStart, { passive: false });
canvas.addEventListener('mousedown', handleJumpStart);
const restartBtn = document.getElementById('restartButton');
restartBtn.addEventListener('click', (e) => {
e.stopPropagation();
resetGame();
gameRunning = true;
deathFlash = 0;
timeToNextObstacle = 0.5;
obstacles = [];
player.y = GROUND_Y - PLAYER_SIZE;
player.vy = 0;
player.isOnGround = true;
score = 0;
updateScoreUI();
});
}
canvas.addEventListener('touchstart', (e) => {
if (e.touches.length > 1) e.preventDefault();
}, { passive: false });
resetGame();
attachEvents();
lastFrameTime = 0;
frameRequest = requestAnimationFrame(gameLoop);
})();
</script>
</body>
</html>Game Source: Geometry Dash Style - бег с препятствиями
Creator: PrismBolt10
Libraries: none
Complexity: complex (496 lines, 16.3 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: geometry-dash-style-prismbolt10-mppwpioo" to link back to the original. Then publish at arcadelab.ai/publish.