Parking
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Парковка с Магнитолой</title>
<style>
body { margin: 0; background: #111; }
canvas { display: block; margin: auto; background: #222; border: 5px solid #555; }
/* Панель магнитолы */
#dashboard {
position: absolute;
top: 20px;
left: 20px;
background: #000;
color: lime;
padding: 15px;
font-family: monospace;
font-size: 14px;
border: 2px solid lime;
border-radius: 8px;
width: 200px;
}
#eq {
display: flex;
gap: 2px;
margin-top: 8px;
}
.bar {
width: 4px;
height: 10px;
background: lime;
animation: bounce 0.6s infinite ease-in-out;
}
.bar:nth-child(2) { animation-delay: 0.1s; }
.bar:nth-child(3) { animation-delay: 0.2s; }
.bar:nth-child(4) { animation-delay: 0.3s; }
.bar:nth-child(5) { animation-delay: 0.4s; }
@keyframes bounce {
0%, 100% { height: 10px; }
50% { height: 20px; }
}
/* Кнопки управления */
.control-button {
background-color: lime;
border: none;
padding: 5px;
margin-top: 10px;
color: black;
cursor: pointer;
border-radius: 5px;
width: 100%;
}
.control-button:hover {
background-color: #77ff77;
}
</style>
</head>
<body>
<div id="dashboard">
<div><b>MAGNETOLA</b></div>
<div>Трек: <b id="trackName">Гаражный Вайб</b></div>
<div id="eq">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<button id="playPauseBtn" class="control-button">Пауза</button>
<button id="nextTrackBtn" class="control-button">Следующий трек</button>
<audio id="music" src="track1.mp3" autoplay loop></audio>
</div>
<canvas id="gameCanvas" width="600" height="600"></canvas>
<script>
// Массив с треками
const tracks = [
{ name: "Гаражный Вайб", src: "track1.mp3" },
{ name: "Ночной Город", src: "track2.mp3" },
{ name: "Улицы Ритма", src: "track3.mp3" }
];
let currentTrackIndex = 0;
const musicPlayer = document.getElementById("music");
const trackName = document.getElementById("trackName");
const playPauseBtn = document.getElementById("playPauseBtn");
const nextTrackBtn = document.getElementById("nextTrackBtn");
// Функция для обновления текущего трека
function updateTrack() {
musicPlayer.src = tracks[currentTrackIndex].src;
trackName.textContent = tracks[currentTrackIndex].name;
musicPlayer.play();
}
// Кнопка "Пауза / Играть"
playPauseBtn.addEventListener("click", () => {
if (musicPlayer.paused) {
musicPlayer.play();
playPauseBtn.textContent = "Пауза";
} else {
musicPlayer.pause();
playPauseBtn.textContent = "Играть";
}
});
// Кнопка "Следующий трек"
nextTrackBtn.addEventListener("click", () => {
currentTrackIndex = (currentTrackIndex + 1) % tracks.length;
updateTrack();
});
// Инициализация первого трека
updateTrack();
// Код игры (тот же, что и раньше)
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
const car = {
x: 100,
y: 500,
width: 40,
height: 20,
angle: 0,
speed: 0,
maxSpeed: 3,
accel: 0.1,
friction: 0.05,
turnSpeed: 0.04,
color: "cyan"
};
const parkingSpot = { x: 480, y: 80, width: 60, height: 30, color: "lime" };
const walls = [
{ x: 200, y: 200, width: 200, height: 20 },
{ x: 100, y: 350, width: 400, height: 20 },
{ x: 400, y: 150, width: 20, height: 300 }
];
let keys = {};
let gameOver = false;
let won = false;
document.addEventListener("keydown", (e) => keys[e.key] = true);
document.addEventListener("keyup", (e) => keys[e.key] = false);
function update() {
if (gameOver || won) return;
// Управление машиной
if (keys["ArrowUp"]) {
car.speed += car.accel;
} else if (keys["ArrowDown"]) {
car.speed -= car.accel;
} else {
// Трение
if (car.speed > 0) car.speed -= car.friction;
if (car.speed < 0) car.speed += car.friction;
if (Math.abs(car.speed) < car.friction) car.speed = 0;
}
// Предел скорости
car.speed = Math.max(-car.maxSpeed, Math.min(car.maxSpeed, car.speed));
// Поворот
if (car.speed !== 0) {
const direction = car.speed > 0 ? 1 : -1;
if (keys["ArrowLeft"]) car.angle -= car.turnSpeed * direction;
if (keys["ArrowRight"]) car.angle += car.turnSpeed * direction;
}
// Движение
car.x += Math.cos(car.angle) * car.speed;
car.y += Math.sin(car.angle) * car.speed;
const carRect = {
x: car.x - car.width / 2,
y: car.y - car.height / 2,
width: car.width,
height: car.height
};
for (let wall of walls) {
if (rectsCollide(carRect, wall)) {
gameOver = true;
}
}
if (rectsCollide(carRect, parkingSpot) && Math.abs(car.speed) < 0.1) {
won = true;
}
}
function drawCar() {
ctx.save();
ctx.translate(car.x, car.y);
ctx.rotate(car.angle);
ctx.fillStyle = car.color;
ctx.fillRect(-car.width / 2, -car.height / 2, car.width, car.height);
ctx.restore();
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Парковочное место
ctx.fillStyle = parkingSpot.color;
ctx.fillRect(parkingSpot.x, parkingSpot.y, parkingSpot.width, parkingSpot.height);
// Стены
ctx.fillStyle = "red";
for (let wall of walls) {
ctx.fillRect(wall.x, wall.y, wall.width, wall.height);
}
// Машина
drawCar();
// Сообщения
if (gameOver) {
ctx.fillStyle = "white";
ctx.font = "32px monospace";
ctx.fillText("Ты врезался... грусть", 140, 300);
} else if (won) {
ctx.fillStyle = "#0f0";
ctx.font = "32px monospace";
ctx.fillText("Идеальная парковка! КРАСАВА", 90, 300);
}
}
function rectsCollide(r1, r2) {
return r1.x < r2.x + r2.width &&
r1.x + r1.width > r2.x &&
r1.y < r2.y + r2.height &&
r1.y + r1.height > r2.y;
}
function gameLoop() {
update();
draw();
requestAnimationFrame(gameLoop);
}
gameLoop();
</script>
</body>
</html>
Comments
Log in with itch.io to leave a comment.
This is cool game