vosracing

<!DOCTYPE html>
<html lang=“en“>
<head>
<meta charset=“UTF-8″>
<meta name=“viewport“ content=“width=device-width, initial-scale=1.0″>
<title>VOS Racing Simulator</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: ‚Arial‘, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
overflow: hidden;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}

.game-container {
position: relative;
width: 400px;
height: 600px;
background: #333;
border: 4px solid #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.game-canvas {
width: 100%;
height: 100%;
display: block;
background: #2c2c2c;
touch-action: none;
}

.ui {
position: absolute;
top: 20px;
left: 20px;
color: #fff;
font-weight: bold;
z-index: 100;
pointer-events: none;
}

.score {
font-size: 18px;
margin-bottom: 5px;
}

.coins {
font-size: 16px;
color: #ffd700;
margin-bottom: 5px;
}

.high-score {
font-size: 14px;
color: #ffd700;
}

.game-over {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #fff;
background: rgba(0,0,0,0.9);
padding: 20px;
border-radius: 10px;
display: none;
z-index: 200;
max-width: 350px;
width: 90%;
}

.game-over h2 {
color: #ff4444;
margin-bottom: 10px;
font-size: 24px;
}

.store {
margin: 15px 0;
padding: 15px;
background: rgba(255,255,255,0.1);
border-radius: 5px;
}

.store h3 {
color: #ffd700;
margin-bottom: 10px;
font-size: 18px;
}

.upgrade {
display: flex;
justify-content: space-between;
align-items: center;
margin: 8px 0;
padding: 8px;
background: rgba(255,255,255,0.05);
border-radius: 3px;
}

.upgrade button {
background: #4CAF50;
color: white;
border: none;
padding: 6px 12px;
font-size: 12px;
border-radius: 3px;
cursor: pointer;
transition: background 0.3s;
}

.upgrade button:hover:not(:disabled) {
background: #45a049;
}

.upgrade button:disabled {
background: #666;
cursor: not-allowed;
}

.game-over button {
background: #4CAF50;
color: white;
border: none;
padding: 12px 24px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
margin-top: 15px;
transition: background 0.3s;
}

.game-over button:hover {
background: #45a049;
}

.controls {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
color: #fff;
text-align: center;
font-size: 12px;
pointer-events: none;
}

.start-screen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(76,175,80,0.95) 0%, rgba(46,125,50,0.95) 100%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 300;
color: #fff;
text-align: center;
padding: 20px;
box-sizing: border-box;
}

.start-screen h1 {
font-size: 32px;
margin-bottom: 20px;
color: #fff;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.start-screen .instructions {
font-size: 18px;
line-height: 1.5;
margin-bottom: 40px;
max-width: 350px;
color: #f0f0f0;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.play-button {
background: linear-gradient(135deg, #ff6b35, #f7931e);
color: white;
border: none;
padding: 20px 40px;
font-size: 24px;
font-weight: bold;
border-radius: 50px;
cursor: pointer;
box-shadow: 0 8px 20px rgba(0,0,0,0.3);
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
}

.play-button:hover {
transform: translateY(-2px);
box-shadow: 0 12px 25px rgba(0,0,0,0.4);
background: linear-gradient(135deg, #ff7b45, #f8a32e);
}

.play-button:active {
transform: translateY(0);
box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}

.touch-controls {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 20px;
z-index: 100;
}

.touch-btn {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.4);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 24px;
font-weight: bold;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
transition: all 0.1s;
}

.touch-btn:active {
background: rgba(255, 255, 255, 0.4);
transform: scale(0.95);
}

@media (max-width: 480px) {
.game-container {
width: 100vw;
height: 100vh;
border: none;
border-radius: 0;
}

.touch-controls {
bottom: 50px;
}

.controls {
display: none;
}
}
</style>
</head>
<body>
<div class=“game-container“>
<canvas class=“game-canvas“ id=“gameCanvas“ width=“400″ height=“600″></canvas>

<div class=“ui“>
<div class=“score“>Punkte: <span id=“scoreDisplay“>0</span></div>
<div class=“coins“>Einnahmen: <span id=“coinsDisplay“>0</span></div>
<div class=“high-score“>Highscore: <span id=“highScoreDisplay“>0</span></div>
</div>

<div class=“start-screen“ id=“startScreen“>
<h1>🚌 VOS Racing Simulator</h1>
<div class=“instructions“>
Steuere deinen Bus durch den Osnabrücker Stadtverkehr und vermeide die Hindernisse! Sammle Münzen und knacke den Highscore.
</div>
<button class=“play-button“ onclick=“startFromMenu()“>Spielen</button>
</div>

<div class=“game-over“ id=“gameOverScreen“>
<h2>Spiel Vorbei!</h2>
<p>Endpunktzahl: <span id=“finalScore“>0</span></p>
<p>Einnahmen: <span id=“finalCoins“>0</span></p>
<p id=“newRecord“ style=“color: #ffd700; display: none;“>🏆 Neuer Highscore! 🏆</p>

<div class=“store“>
<h3>🛒 Shop</h3>
<div class=“upgrade“>
<span>Wiederbelebung (500 Münzen)</span>
<button id=“buyRespawn“ onclick=“buyUpgrade(‚respawn‘)“>Kaufen</button>
</div>
<div class=“upgrade“>
<span>Längerer Bus (1000 Münzen)</span>
<button id=“buyLongerBus“ onclick=“buyUpgrade(‚longerBus‘)“>Kaufen</button>
</div>
</div>

<button onclick=“restartGame()“>Nochmal Spielen</button>
</div>

<div class=“controls“>
Drücke A/D oder ←/→ zum Lenken • Drücke die Pfeile auf Mobilgeräten
</div>
</div>

const startScreen = document.getElementById(’startScreen‘);

// Touch controls
leftBtn.addEventListener(‚touchstart‘, (e) => {
e.preventDefault();
keys[‚ArrowLeft‘] = true;
});

leftBtn.addEventListener(‚touchend‘, (e) => {
e.preventDefault();
keys[‚ArrowLeft‘] = false;
});

leftBtn.addEventListener(‚mousedown‘, (e) => {
e.preventDefault();
keys[‚ArrowLeft‘] = true;
});

leftBtn.addEventListener(‚mouseup‘, (e) => {
e.preventDefault();
keys[‚ArrowLeft‘] = false;
});

rightBtn.addEventListener(‚touchstart‘, (e) => {
e.preventDefault();
keys[‚ArrowRight‘] = true;
});

rightBtn.addEventListener(‚touchend‘, (e) => {
e.preventDefault();
keys[‚ArrowRight‘] = false;
});

rightBtn.addEventListener(‚mousedown‘, (e) => {
e.preventDefault();
keys[‚ArrowRight‘] = true;
});

rightBtn.addEventListener(‚mouseup‘, (e) => {
e.preventDefault();
keys[‚ArrowRight‘] = false;
});

// Canvas touch controls
let touchStartX = null;
let touchStartTime = null;

canvas.addEventListener(‚touchstart‘, (e) => {
e.preventDefault();
const touch = e.touches[0];
const rect = canvas.getBoundingClientRect();
touchStartX = touch.clientX – rect.left;
touchStartTime = Date.now();

if (!gameRunning && gameStarted) {
startGame();
}
});

canvas.addEventListener(‚touchend‘, (e) => {
e.preventDefault();
if (touchStartX !== null && touchStartTime !== null) {
const touchDuration = Date.now() – touchStartTime;
const canvasWidth = canvas.getBoundingClientRect().width;

if (touchDuration < 300) { // Quick tap
if (touchStartX < canvasWidth / 2) {
// Tap on left side – move left
bus.lane = 0;
bus.targetX = 125;
} else {
// Tap on right side – move right
bus.lane = 1;
bus.targetX = 275;
}
}

touchStartX = null;
touchStartTime = null;
}
});

canvas.addEventListener(‚touchmove‘, (e) => {
e.preventDefault();
});

// Cookie functions for high score storage
function setCookie(name, value, days) {
const expires = new Date();
expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000));
document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/`;
}

function getCookie(name) {
const nameEQ = name + „=“;
const ca = document.cookie.split(‚;‘);
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ‚ ‚) c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}

// Game state
let gameRunning = false;
let gameStarted = false; // New flag to track if game has been started from menu
let score = 0;
let coins = parseInt(getCookie(‚busGameCoins‘)) || parseInt(localStorage.getItem(‚busGameCoins‘)) || 0;
let totalCoins = 0;
let highScore = parseInt(getCookie(‚busGameHighScore‘)) || parseInt(localStorage.getItem(‚busGameHighScore‘)) || 0;
let gameSpeed = 3.47;
let lastObstacleTime = 0;
let lastCoinTime = 0;
let obstacleInterval = 1500;
let baseObstacleInterval = 1500;
let coinInterval = 2000;
let lastLane = -1;
let sameLaneCount = 0;

// Upgrades
let hasRespawn = false;
let busLength = 80;

// Game objects
let bus = {
x: 200,
y: 500,
width: 60,
height: busLength,
lane: 1,
targetX: 200
};

let obstacles = [];
let coins_on_road = [];
let roadLines = [];

// Input handling
let keys = {};

document.addEventListener(‚keyup‘, (e) => {
keys[e.code] = false;
});

// Initialize road lines
function initRoadLines() {
roadLines = [];
for (let i = 0; i < 15; i++) {
roadLines.push({
x: canvas.width / 2 – 2,
y: i * 50 – 25,
width: 4,
height: 30
});
}
}

// Update road lines
function updateRoadLines() {
for (let line of roadLines) {
line.y += gameSpeed;
if (line.y > canvas.height) {
line.y = -30;
}
}
}

// Draw road
function drawRoad() {
ctx.fillStyle = ‚#444‘;
ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = ‚#666‘;
ctx.fillRect(50, 0, 300, canvas.height);

ctx.fillStyle = ‚#fff‘;
ctx.fillRect(50, 0, 8, canvas.height);
ctx.fillRect(342, 0, 8, canvas.height);

ctx.fillStyle = ‚#ffff00‘;
for (let line of roadLines) {
ctx.fillRect(line.x, line.y, line.width, line.height);
}
}

// Draw bus
function drawBus() {
ctx.fillStyle = ‚#cc0000‘;
ctx.fillRect(bus.x – bus.width/2, bus.y – bus.height/2, bus.width, bus.height);

ctx.fillStyle = ‚#fff‘;
const windowSpacing = bus.height / 4;
for (let i = 0; i < 3; i++) {
ctx.fillRect(bus.x – 25, bus.y – bus.height/2 + 10 + i * windowSpacing, 50, 12);
}

ctx.fillStyle = ‚#990000‘;
ctx.fillRect(bus.x – 30, bus.y + bus.height/2 – 15, 60, 15);
}

// Create coin
function createCoin() {
const lane = Math.random() < 0.5 ? 0 : 1;
const x = lane === 0 ? 125 : 275;

coins_on_road.push({
x: x + (Math.random() – 0.5) * 40,
y: -20,
size: 15,
rotation: 0,
lane: lane
});
}

// Update coins
function updateCoins() {
for (let i = coins_on_road.length – 1; i >= 0; i–) {
coins_on_road[i].y += gameSpeed;
coins_on_road[i].rotation += 0.1;

if (coins_on_road[i].y > canvas.height + 20) {
coins_on_road.splice(i, 1);
}
}
}

// Draw coins
function drawCoins() {
for (let coin of coins_on_road) {
ctx.save();
ctx.translate(coin.x, coin.y);
ctx.rotate(coin.rotation);

ctx.fillStyle = ‚#ffd700‘;
ctx.beginPath();
ctx.arc(0, 0, coin.size, 0, 2 * Math.PI);
ctx.fill();

ctx.fillStyle = ‚#ffff99‘;
ctx.beginPath();
ctx.arc(-3, -3, coin.size * 0.6, 0, 2 * Math.PI);
ctx.fill();

ctx.fillStyle = ‚#cc9900′;
ctx.font = ’14px Arial‘;
ctx.textAlign = ‚center‘;
ctx.fillText(‚€‘, 0, 5);

ctx.restore();
}
}

// Check coin collection
function checkCoinCollection() {
for (let i = coins_on_road.length – 1; i >= 0; i–) {
const coin = coins_on_road[i];
if (Math.abs(bus.x – coin.x) < (bus.width/2 + coin.size) &&
Math.abs(bus.y – coin.y) < (bus.height/2 + coin.size)) {
coins_on_road.splice(i, 1);
coins += 10;
totalCoins += 10;
}
}
}

// Check if there’s enough space for a new obstacle
function hasEnoughSpace(newObstacleY) {
const minGap = busLength + 40; // Bus length plus safety margin

for (let obstacle of obstacles) {
const distance = Math.abs(obstacle.y – newObstacleY);
if (distance < minGap) {
return false;
}
}
return true;
}

// Create obstacle with proper spacing
function createObstacle() {
const frequencyMultiplier = Math.max(0.4, 1 – (score / 2000));
const nextInterval = baseObstacleInterval * (frequencyMultiplier + Math.random() * 0.6);
obstacleInterval = nextInterval;

// Calculate where the new obstacle would be placed
const newObstacleY = -60; // Starting Y position for obstacles

// Check if there’s enough space
if (!hasEnoughSpace(newObstacleY)) {
// If not enough space, wait a bit longer
lastObstacleTime = Date.now() – obstacleInterval * 0.7;
return;
}

let lane;
if (lastLane === -1) {
lane = Math.random() < 0.5 ? 0 : 1;
} else if (sameLaneCount >= 2) {
lane = lastLane === 0 ? 1 : 0;
sameLaneCount = 0;
} else {
if (Math.random() < 0.55) {
lane = lastLane === 0 ? 1 : 0;
sameLaneCount = 0;
} else {
lane = lastLane;
sameLaneCount++;
}
}
lastLane = lane;

const x = lane === 0 ? 125 : 275;

let obstacleType;
const rand = Math.random();

if (score >= 500 && rand < 0.25) {
obstacleType = ‚truck‘;
} else if (rand < 0.3) {
obstacleType = ‚bicycle‘;
} else {
obstacleType = ‚car‘;
}

let width, height;
if (obstacleType === ‚truck‘) {
width = 50;
height = 120;
} else if (obstacleType === ‚bicycle‘) {
width = 25;
height = 35;
} else {
width = 50;
height = 70;
}

obstacles.push({
x: x,
y: newObstacleY,
width: width,
height: height,
lane: lane,
type: obstacleType
});
}

// Update obstacles
function updateObstacles() {
for (let i = obstacles.length – 1; i >= 0; i–) {
obstacles[i].y += gameSpeed;

if (obstacles[i].y > canvas.height + 50) {
obstacles.splice(i, 1);
score += 10;
}
}
}

// Draw obstacles
function drawObstacles() {
for (let obstacle of obstacles) {
if (obstacle.type === ‚truck‘) {
ctx.fillStyle = ‚#ff69b4‘;
ctx.fillRect(obstacle.x – obstacle.width/2, obstacle.y – obstacle.height/2, obstacle.width, obstacle.height);

ctx.fillStyle = ‚#fff‘;
ctx.fillRect(obstacle.x – 20, obstacle.y – 45, 40, 12);
ctx.fillRect(obstacle.x – 20, obstacle.y – 25, 40, 12);
ctx.fillRect(obstacle.x – 20, obstacle.y – 5, 40, 12);
ctx.fillRect(obstacle.x – 20, obstacle.y + 15, 40, 12);
ctx.fillRect(obstacle.x – 20, obstacle.y + 35, 40, 12);

ctx.fillStyle = ‚#cc1493‘;
ctx.fillRect(obstacle.x – 25, obstacle.y + 45, 50, 15);
} else if (obstacle.type === ‚bicycle‘) {
ctx.fillStyle = ‚#ffff00‘;
ctx.fillRect(obstacle.x – obstacle.width/2, obstacle.y – obstacle.height/2, obstacle.width, obstacle.height);

ctx.fillStyle = ‚#333‘;
ctx.beginPath();
ctx.arc(obstacle.x, obstacle.y – 10, 8, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.arc(obstacle.x, obstacle.y + 10, 8, 0, 2 * Math.PI);
ctx.fill();

ctx.fillStyle = ‚#666‘;
ctx.fillRect(obstacle.x – 2, obstacle.y – 12, 4, 24);
} else {
ctx.fillStyle = ‚#ffdd00‘;
ctx.fillRect(obstacle.x – obstacle.width/2, obstacle.y – obstacle.height/2, obstacle.width, obstacle.height);

ctx.fillStyle = ‚#fff‘;
ctx.fillRect(obstacle.x – 20, obstacle.y – 25, 40, 10);
ctx.fillRect(obstacle.x – 20, obstacle.y – 5, 40, 10);
ctx.fillRect(obstacle.x – 20, obstacle.y + 15, 40, 10);

ctx.fillStyle = ‚#cc9900‘;
ctx.fillRect(obstacle.x – 25, obstacle.y + 25, 50, 10);
}
}
}

// Check collisions
function checkCollisions() {
for (let obstacle of obstacles) {
if (Math.abs(bus.x – obstacle.x) < (bus.width + obstacle.width) / 2 – 10 &&
Math.abs(bus.y – obstacle.y) < (bus.height + obstacle.height) / 2 – 10) {
if (hasRespawn) {
hasRespawn = false;
const index = obstacles.indexOf(obstacle);
obstacles.splice(index, 1);
return;
}
gameOver();
return;
}
}
}

// Update bus movement
function updateBus() {
if (keys[‚ArrowLeft‘] || keys[‚KeyA‘]) {
bus.lane = 0;
bus.targetX = 125;
}
if (keys[‚ArrowRight‘] || keys[‚KeyD‘]) {
bus.lane = 1;
bus.targetX = 275;
}

const moveSpeed = 8;
if (bus.x < bus.targetX) {
bus.x = Math.min(bus.x + moveSpeed, bus.targetX);
} else if (bus.x > bus.targetX) {
bus.x = Math.max(bus.x – moveSpeed, bus.targetX);
}
}

// Game loop
function gameLoop() {
if (!gameRunning) return;

ctx.clearRect(0, 0, canvas.width, canvas.height);

updateRoadLines();
updateBus();
updateObstacles();
updateCoins();

if (Date.now() – lastObstacleTime > obstacleInterval) {
createObstacle();
lastObstacleTime = Date.now();

if (baseObstacleInterval > 600) {
baseObstacleInterval -= 8;
}
if (gameSpeed < 12) {
gameSpeed += 0.08;
}
}

if (Date.now() – lastCoinTime > coinInterval) {
createCoin();
lastCoinTime = Date.now();
coinInterval = 1500 + Math.random() * 2000;
}

drawRoad();
drawCoins();
drawBus();
drawObstacles();

checkCollisions();
checkCoinCollection();

scoreDisplay.textContent = score;
coinsDisplay.textContent = coins;

requestAnimationFrame(gameLoop);
}

// Start game from menu
function startFromMenu() {
gameStarted = true;
startScreen.style.display = ’none‘;
startGame();
}

// Start game
function startGame() {
gameRunning = true;
score = 0;
totalCoins = 0;
gameSpeed = 3.47;
obstacleInterval = 1500;
baseObstacleInterval = 1500;
coinInterval = 2000;
lastObstacleTime = Date.now();
lastCoinTime = Date.now();
lastLane = -1;
sameLaneCount = 0;

bus.height = busLength;
bus.x = 200;
bus.lane = 1;
bus.targetX = 275;

obstacles = [];
coins_on_road = [];
initRoadLines();
gameOverScreen.style.display = ’none‘;

gameLoop();
}

// Game over
function gameOver() {
gameRunning = false;

setCookie(‚busGameCoins‘, coins, 365);
localStorage.setItem(‚busGameCoins‘, coins);

if (score > highScore) {
highScore = score;
setCookie(‚busGameHighScore‘, highScore, 365);
localStorage.setItem(‚busGameHighScore‘, highScore);
newRecord.style.display = ‚block‘;
} else {
newRecord.style.display = ’none‘;
}

finalScore.textContent = score;
finalCoins.textContent = totalCoins;
highScoreDisplay.textContent = highScore;

updateStoreButtons();

gameOverScreen.style.display = ‚block‘;
}

// Buy upgrades
function buyUpgrade(type) {
if (type === ‚respawn‘ && coins >= 500) {
coins -= 500;
hasRespawn = true;
setCookie(‚busGameCoins‘, coins, 365);
localStorage.setItem(‚busGameCoins‘, coins);
updateStoreButtons();
gameOverScreen.style.display = ’none‘;
startGame();
} else if (type === ‚longerBus‘ && coins >= 1000) {
coins -= 1000;
busLength = Math.min(busLength + 20, 140);
setCookie(‚busGameCoins‘, coins, 365);
localStorage.setItem(‚busGameCoins‘, coins);
updateStoreButtons();
}
}

// Update store button states
function updateStoreButtons() {
const respawnBtn = document.getElementById(‚buyRespawn‘);
const longerBusBtn = document.getElementById(‚buyLongerBus‘);

respawnBtn.disabled = coins < 500 || hasRespawn;
respawnBtn.textContent = hasRespawn ? ‚Aktiv‘ : (coins >= 500 ? ‚Kaufen‘ : ‚Brauche ‚ + (500 – coins));

longerBusBtn.disabled = coins < 1000 || busLength >= 140;
longerBusBtn.textContent = busLength >= 140 ? ‚Maximum‘ : (coins >= 1000 ? ‚Kaufen‘ : ‚Brauche ‚ + (1000 – coins));

coinsDisplay.textContent = coins;
}

// Restart game
function restartGame() {
startGame();
}

// Show start screen
function showStartScreen() {
gameStarted = false;
gameRunning = false;
startScreen.style.display = ‚flex‘;
gameOverScreen.style.display = ’none‘;
}

// Initialize
coinsDisplay.textContent = coins;
highScoreDisplay.textContent = highScore;
initRoadLines();
drawRoad();
drawBus();

// Show start screen initially
showStartScreen();
</script>
</body>
</html>