всем превет я хачу вам слить мини игру "пабег" дабавил кучу персонажей и в целом сделал бомба конфетка
вот скриншот
и вот сам код
вот скриншот
и вот сам код
HTML:
<!DOCTYPE html>
<html lang="ru">
<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;user-select:none;}
body{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);color:#fff;font-family:'Arial',sans-serif;overflow:hidden;height:100vh;display:flex;justify-content:center;align-items:center;}
#game-container{width:100%;height:100%;position:relative;}
#character-menu{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.95);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1000;transition:opacity 0.5s;}
.menu-title{font-size:3.5rem;margin-bottom:40px;text-align:center;background:linear-gradient(90deg,#ff0080,#00ffcc);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 15px rgba(255,0,128,0.5);animation:glow 2s infinite alternate;}
@keyframes glow{from{text-shadow:0 0 10px rgba(255,0,128,0.5);}to{text-shadow:0 0 20px rgba(0,255,204,0.7);}}
.character-options{display:flex;gap:40px;margin-bottom:50px;flex-wrap:wrap;justify-content:center;max-width:1200px;}
.character-card{width:160px;height:220px;background:rgba(255,255,255,0.1);border-radius:15px;display:flex;flex-direction:column;align-items:center;padding:15px;cursor:pointer;transition:all 0.3s;border:2px solid transparent;}
.character-card:hover{transform:translateY(-10px);border-color:#00ffcc;box-shadow:0 10px 20px rgba(0,255,204,0.3);}
.character-card.selected{border-color:#ff0080;box-shadow:0 10px 20px rgba(255,0,128,0.3);background:rgba(255,0,128,0.1);}
.character-img{width:80px;height:80px;border-radius:50%;object-fit:cover;margin-bottom:15px;border:3px solid #fff;}
.character-name{font-size:1.2rem;margin-bottom:8px;font-weight:bold;text-align:center;}
.character-desc{font-size:0.8rem;text-align:center;color:#aaa;}
.start-button{background:linear-gradient(90deg,#ff0080,#00ffcc);border:none;color:#fff;font-size:1.5rem;padding:15px 60px;border-radius:50px;cursor:pointer;transition:all 0.3s;font-weight:bold;letter-spacing:2px;margin-top:20px;}
.start-button:hover{transform:scale(1.05);box-shadow:0 0 25px rgba(0,255,204,0.5);}
#game-area{width:100%;height:100%;position:relative;display:none;overflow:hidden;background:radial-gradient(circle,#0c0c1a 0%,#000 100%);}
#player{position:absolute;width:60px;height:60px;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:1.8rem;z-index:10;box-shadow:0 0 15px rgba(52,152,219,0.7);transition:left 0.1s,top 0.1s;}
#chaser{position:absolute;width:80px;height:80px;border-radius:50%;display:flex;justify-content:center;align-items:center;z-index:9;box-shadow:0 0 20px rgba(255,0,0,0.8);transition:left 0.05s,top 0.05s;background-size:cover;background-position:center;}
#game-status{position:absolute;top:20px;left:20px;z-index:20;background:rgba(0,0,0,0.7);padding:15px 25px;border-radius:15px;border:2px solid #00ffcc;}
.status-item{margin-bottom:8px;font-size:1.2rem;}
.status-item:last-child{margin-bottom:0;}
#timer{color:#00ffcc;font-weight:bold;font-size:1.4rem;}
#speed{color:#ff0080;font-weight:bold;}
#distance{color:#ffcc00;font-weight:bold;}
#game-over{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.95);display:none;flex-direction:column;justify-content:center;align-items:center;z-index:100;}
.game-over-title{font-size:4rem;margin-bottom:30px;color:#ff0000;text-shadow:0 0 15px rgba(255,0,0,0.7);}
.game-over-text{font-size:2rem;margin-bottom:40px;color:#fff;}
.restart-button{background:linear-gradient(90deg,#ff0000,#ff8800);border:none;color:#fff;font-size:1.5rem;padding:15px 60px;border-radius:50px;cursor:pointer;transition:all 0.3s;font-weight:bold;}
.restart-button:hover{transform:scale(1.05);box-shadow:0 0 25px rgba(255,0,0,0.5);}
#instructions{position:absolute;bottom:20px;left:20px;background:rgba(0,0,0,0.7);padding:15px;border-radius:10px;font-size:0.9rem;color:#aaa;max-width:300px;border:1px solid #444;}
#ultra-button{position:absolute;top:20px;right:20px;z-index:20;background:linear-gradient(90deg,#ff00ff,#00ffff);border:none;color:#fff;font-size:1.2rem;padding:10px 25px;border-radius:50px;cursor:pointer;font-weight:bold;box-shadow:0 0 15px rgba(255,0,255,0.5);}
#ultra-button:disabled{opacity:0.5;cursor:not-allowed;}
#boss-alert{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(255,0,0,0.9);color:#fff;font-size:2.5rem;padding:20px 40px;border-radius:15px;z-index:50;display:none;text-align:center;border:3px solid #ffcc00;box-shadow:0 0 30px rgba(255,0,0,0.7);}
@keyframes pulse{0%{transform:scale(1);}50%{transform:scale(1.05);}100%{transform:scale(1);}}
@keyframes shake{0%,100%{transform:translateX(0);}10%,30%,50%,70%,90%{transform:translateX(-5px);}20%,40%,60%,80%{transform:translateX(5px);}}
.pulse{animation:pulse 1s infinite;}
.shake{animation:shake 0.5s;}
</style>
</head>
<body>
<div id="game-container">
<div id="character-menu">
<h1 class="menu-title">ПАБЕГ</h1>
<div class="character-options">
<div class="character-card" data-character="pikamonov">
<img src="https://pawno-help.ru/data/avatars/o/2/2444.jpg?1765137298" alt="Пикамонов" class="character-img">
<div class="character-name">ПИКАМОНОВ</div>
<div class="character-desc">Любит смотреть атаку титанов и играть с айсколд</div>
</div>
<div class="character-card" data-character="sakhur">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTPTaurOiuIzR-7r1rcbgIJ61IWFYcqyyKVkg&s" alt="Тун тун сахур" class="character-img">
<div class="character-name">ТУН ТУН САХУР</div>
<div class="character-desc">Он скоро придёт</div>
</div>
<div class="character-card" data-character="viovit">
<img src="https://pawno-help.ru/data/avatars/o/0/197.jpg?1761659326" alt="Viovit" class="character-img">
<div class="character-name">VIOVIT</div>
<div class="character-desc">бест енглиш тичер</div>
</div>
<div class="character-card" data-character="lastemperor">
<img src="https://pawno-help.ru/data/avatars/o/0/3.jpg?1744364376" alt="Last Emperor" class="character-img">
<div class="character-name">LAST EMPEROR</div>
<div class="character-desc">Император тьмы</div>
</div>
<div class="character-card" data-character="damitz">
<img src="https://pawno-help.ru/data/avatars/o/14/14358.jpg?1765231459" alt="Damitz" class="character-img">
<div class="character-name">DAMITZ</div>
<div class="character-desc">Ждёт гта 6</div>
</div>
<div class="character-card" data-character="arial">
<img src="https://pawno-help.ru/data/avatars/o/19/19188.jpg?1765904651" alt="Arial" class="character-img">
<div class="character-name">ARIAL</div>
<div class="character-desc">Лариса Долина, не более</div>
</div>
</div>
<button id="start-game" class="start-button">НАЧАТЬ ПОБЕГ</button>
<div id="instructions" style="position:relative;bottom:auto;left:auto;margin-top:30px;text-align:center;">
<p>Убегай от демона 30 минут!</p>
<p>На 20-й секунде - босс!</p>
<p>Используй УЛЬТРУ для ускорения</p>
</div>
</div>
<div id="game-area">
<div id="player">👤</div>
<div id="chaser"></div>
<div id="game-status">
<div class="status-item">Время: <span id="timer">30:00</span></div>
<div class="status-item">Скорость: <span id="speed">1.0x</span></div>
<div class="status-item">Дистанция: <span id="distance">0</span>px</div>
<div class="status-item">Ультра: <span id="ultra-count">1</span></div>
</div>
<button id="ultra-button">УЛЬТРА</button>
<div id="boss-alert">БОСС АКТИВИРОВАН!</div>
<div id="instructions">
<p>Беги от демона!</p>
<p>Босс на 20-й секунде</p>
<p>УЛЬТРА дает ускорение</p>
</div>
</div>
<div id="game-over">
<h2 class="game-over-title">ИГРА ОКОНЧЕНА</h2>
<p class="game-over-text" id="result-text">Вы продержались 0 минут</p>
<button id="restart-button" class="restart-button">ИГРАТЬ СНОВА</button>
<button id="back-to-menu" class="restart-button" style="background:linear-gradient(90deg,#00ffcc,#3498db);margin-top:20px;">ВЕРНУТЬСЯ В МЕНЮ</button>
</div>
</div>
<script>
const characterMenu=document.getElementById('character-menu');
const gameArea=document.getElementById('game-area');
const gameOverScreen=document.getElementById('game-over');
const startButton=document.getElementById('start-game');
const restartButton=document.getElementById('restart-button');
const backToMenuButton=document.getElementById('back-to-menu');
const characterCards=document.querySelectorAll('.character-card');
const player=document.getElementById('player');
const chaser=document.getElementById('chaser');
const timerDisplay=document.getElementById('timer');
const speedDisplay=document.getElementById('speed');
const distanceDisplay=document.getElementById('distance');
const resultText=document.getElementById('result-text');
const ultraButton=document.getElementById('ultra-button');
const bossAlert=document.getElementById('boss-alert');
const ultraCountDisplay=document.getElementById('ultra-count');
const characterAvatars={
pikamonov:'https://pawno-help.ru/data/avatars/o/2/2444.jpg?1765137298',
sakhur:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTPTaurOiuIzR-7r1rcbgIJ61IWFYcqyyKVkg&s',
viovit:'https://pawno-help.ru/data/avatars/o/0/197.jpg?1761659326',
lastemperor:'https://pawno-help.ru/data/avatars/o/0/3.jpg?1744364376',
damitz:'https://pawno-help.ru/data/avatars/o/14/14358.jpg?1765231459',
arial:'https://pawno-help.ru/data/avatars/o/19/19188.jpg?1765904651'
};
const characterNames={
pikamonov:'ПИКАМОНОВ',
sakhur:'ТУН ТУН САХУР',
viovit:'VIOVIT',
lastemperor:'LAST EMPEROR',
damitz:'DAMITZ',
arial:'ARIAL'
};
let selectedCharacter='pikamonov';
let gameActive=false;
let gameTime=1800;
let currentTime=gameTime;
let chaserSpeed=1.0;
let playerX=400;
let playerY=300;
let chaserX=100;
let chaserY=100;
let gameInterval;
let chaserInterval;
let minutesSurvived=0;
let ultraCount=1;
let bossActive=false;
let bossActivated=false;
let ultraActive=false;
let ultraEndTime=0;
let playerSpeedMultiplier=1;
characterCards.forEach(card=>{
card.addEventListener('click',()=>{
characterCards.forEach(c=>c.classList.remove('selected'));
card.classList.add('selected');
selectedCharacter=card.getAttribute('data-character');
player.style.backgroundImage=`url('${characterAvatars[selectedCharacter]}')`;
player.style.backgroundSize='cover';
player.style.backgroundPosition='center';
player.innerHTML='';
chaser.style.backgroundImage=`url('${characterAvatars[selectedCharacter]}')`;
chaser.style.backgroundSize='cover';
chaser.style.backgroundPosition='center';
chaser.innerHTML='';
});
});
startButton.addEventListener('click',startGame);
ultraButton.addEventListener('click',activateUltra);
function startGame(){
characterMenu.style.opacity='0';
setTimeout(()=>{
characterMenu.style.display='none';
gameArea.style.display='block';
},500);
currentTime=gameTime;
chaserSpeed=1.0;
minutesSurvived=0;
ultraCount=1;
bossActive=false;
bossActivated=false;
ultraActive=false;
playerSpeedMultiplier=1;
playerX=window.innerWidth/2;
playerY=window.innerHeight/2;
chaserX=100;
chaserY=100;
player.style.left=playerX+'px';
player.style.top=playerY+'px';
chaser.style.left=chaserX+'px';
chaser.style.top=chaserY+'px';
updateTimer();
speedDisplay.textContent=chaserSpeed.toFixed(1)+'x';
ultraCountDisplay.textContent=ultraCount;
ultraButton.disabled=false;
gameActive=true;
gameInterval=setInterval(updateGame,1000);
chaserInterval=setInterval(moveChaser,50);
chaser.classList.add('pulse');
}
function updateGame(){
if(!gameActive)return;
currentTime--;
if(currentTime===1740&&!bossActivated){
bossActive=true;
bossActivated=true;
chaserSpeed+=2;
bossAlert.style.display='block';
bossAlert.classList.add('shake');
setTimeout(()=>{
bossAlert.style.display='none';
bossAlert.classList.remove('shake');
},3000);
}
if(currentTime%60===0){
chaserSpeed+=0.2;
minutesSurvived++;
if(bossActive&&(selectedCharacter==='viovit'||selectedCharacter==='pikamonov'||selectedCharacter==='lastemperor')){
chaserSpeed+=0.3;
}
speedDisplay.textContent=chaserSpeed.toFixed(1)+'x';
chaser.style.boxShadow=`0 0 ${20+minutesSurvived*2}px rgba(255,0,0,0.9)`;
chaser.style.animationDuration=`${1-minutesSurvived*0.05}s`;
}
if(ultraActive&¤tTime<=ultraEndTime){
ultraActive=false;
playerSpeedMultiplier=1;
player.style.boxShadow='0 0 15px rgba(52,152,219,0.7)';
}
updateTimer();
if(currentTime<=0){
endGame(true);
}
}
function updateTimer(){
const minutes=Math.floor(currentTime/60);
const seconds=currentTime%60;
timerDisplay.textContent=`${minutes.toString().padStart(2,'0')}:${seconds.toString().padStart(2,'0')}`;
if(currentTime<300){
timerDisplay.style.color='#ff0000';
}else if(currentTime<600){
timerDisplay.style.color='#ff9900';
}else{
timerDisplay.style.color='#00ffcc';
}
}
function moveChaser(){
if(!gameActive)return;
const dx=playerX-chaserX;
const dy=playerY-chaserY;
const distance=Math.sqrt(dx*dx+dy*dy);
distanceDisplay.textContent=Math.floor(distance);
if(distance<40){
endGame(false);
return;
}
const directionX=dx/distance;
const directionY=dy/distance;
let speedMultiplier=chaserSpeed;
if(bossActive&&(selectedCharacter==='viovit'||selectedCharacter==='pikamonov'||selectedCharacter==='lastemperor')){
speedMultiplier*=1.5;
}
chaserX+=directionX*speedMultiplier*3;
chaserY+=directionY*speedMultiplier*3;
chaser.style.left=chaserX+'px';
chaser.style.top=chaserY+'px';
}
document.addEventListener('mousemove',(e)=>{
if(!gameActive)return;
const moveX=e.movementX||0;
const moveY=e.movementY||0;
playerX+=moveX*playerSpeedMultiplier;
playerY+=moveY*playerSpeedMultiplier;
const playerRadius=30;
const maxX=window.innerWidth-playerRadius;
const maxY=window.innerHeight-playerRadius;
playerX=Math.max(playerRadius,Math.min(playerX,maxX));
playerY=Math.max(playerRadius,Math.min(playerY,maxY));
player.style.left=(playerX-playerRadius)+'px';
player.style.top=(playerY-playerRadius)+'px';
});
function activateUltra(){
if(!gameActive||ultraCount<=0||ultraActive)return;
ultraActive=true;
ultraCount--;
ultraCountDisplay.textContent=ultraCount;
ultraEndTime=currentTime-10;
playerSpeedMultiplier=2.5;
player.style.boxShadow='0 0 25px rgba(255,255,0,0.9)';
if(ultraCount<=0){
ultraButton.disabled=true;
}
setTimeout(()=>{
if(ultraActive){
ultraActive=false;
playerSpeedMultiplier=1;
player.style.boxShadow='0 0 15px rgba(52,152,219,0.7)';
}
},10000);
}
function endGame(isVictory){
gameActive=false;
clearInterval(gameInterval);
clearInterval(chaserInterval);
chaser.classList.remove('pulse');
setTimeout(()=>{
gameArea.style.display='none';
gameOverScreen.style.display='flex';
if(isVictory){
resultText.textContent=`ПОБЕДА! Вы продержались 30 минут!`;
resultText.style.color='#00ffcc';
}else{
resultText.textContent=`Вас поймали! Вы продержались ${minutesSurvived} минут`;
resultText.style.color='#ff0000';
}
},500);
}
restartButton.addEventListener('click',()=>{
gameOverScreen.style.display='none';
startGame();
});
backToMenuButton.addEventListener('click',()=>{
gameOverScreen.style.display='none';
characterMenu.style.display='flex';
setTimeout(()=>{
characterMenu.style.opacity='1';
},10);
});
window.addEventListener('resize',()=>{
if(gameActive){
const playerRadius=30;
const maxX=window.innerWidth-playerRadius;
const maxY=window.innerHeight-playerRadius;
playerX=Math.max(playerRadius,Math.min(playerX,maxX));
playerY=Math.max(playerRadius,Math.min(playerY,maxY));
player.style.left=(playerX-playerRadius)+'px';
player.style.top=(playerY-playerRadius)+'px';
}
});
characterCards[0].click();
</script>
</body>
</html>
