Webleb - UI Elements - CrossTheRoad

HTML CSS JS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CrossTheRoad: Best(Pano) Edition</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body, html {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: #222;
            font-family: 'Courier New', Courier, monospace;
        }
        #gameCanvas {
            display: block;
            margin: 0 auto;
            background-color: #a3d165;
            box-shadow: 0 0 20px rgba(0,0,0,0.5);
        }
        #instructionOverlay {
            position: absolute;
            top: 15px;
            left: 50%;
            transform: translateX(-50%);
            color: #ffcc00;
            font-size: 18px;
            font-weight: bold;
            text-shadow: 2px 2px 0px #000;
            pointer-events: none;
            user-select: none;
            text-align: center;
            z-index: 10;
            width: 90%;
            letter-spacing: 1px;
        }
        #ui {
            position: absolute;
            top: 45px;
            left: 50%;
            transform: translateX(-50%);
            color: #fff;
            font-size: 24px;
            font-weight: bold;
            text-shadow: 2px 2px 0px #000;
            pointer-events: none;
            user-select: none;
            text-align: center;
            z-index: 10;
        }
        #gameOverMenu {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: #fff;
            background: rgba(0, 0, 0, 0.9);
            padding: 30px;
            border: 4px solid #ffcc00;
            user-select: none;
            width: 320px;
            z-index: 20;
        }
        h1 {
            font-size: 28px;
            margin-bottom: 15px;
            color: #ffcc00;
            text-shadow: 2px 2px 0px #ff3300;
        }
        p {
            color: #eee;
            margin-bottom: 25px;
            font-size: 14px;
            line-height: 1.4;
        }
        button {
            padding: 12px 24px;
            font-size: 18px;
            font-weight: bold;
            color: #000;
            background-color: #ffcc00;
            border: 3px solid #fff;
            cursor: pointer;
            outline: none;
        }
        button:hover {
            background-color: #fff;
            border-color: #ffcc00;
        }
    </style>
</head>
<body>

<div id="instructionOverlay">Help Best(Pano) cross the road & river!</div>
    <div id="ui">Score: <span id="scoreVal">0</span></div>

<div id="gameOverMenu">
        <h1 id="menuTitle">GAME OVER</h1>
        <p id="menuDesc">Best(Pano) made it through 0 lanes.</p>
        <button id="restartBtn">PLAY AGAIN</button>
    </div>

// Layout variables
        const LANE_HEIGHT = 50;
        const COL_WIDTH = 50;
        let viewLanes = 12; 
        let viewCols = 9;

// Colors
        const COLORS = {
            grass: '#a3d165',
            road: '#4a4a4a',
            water: '#4da6ff',
            player: '#ffcc00'
        };

// Game State
        let gameActive = true;
        let score = 0;
        let maxRowReached = 0;
        let animationFrameId = null;

// Player: Best(Pano)
        const player = {
            gridX: 4,
            gridY: 2,
            size: 34,
            offsetX: 0,
            offsetY: 0
        };

// Maps data structures
        let lanes = [];

function resizeCanvas() {
            canvas.height = viewLanes * LANE_HEIGHT;
            canvas.width = viewCols * COL_WIDTH;
        }
        resizeCanvas();
        window.addEventListener('resize', resizeCanvas);

// Lane generator: procedural infinite design
        function generateLane(index) {
            if (index <= 3) {
                return { type: 'grass', obstacles: [] };
            }

const types = ['grass', 'road', 'water'];
            const type = types[Math.floor(Math.random() * types.length)];
            const obstacles = [];
            const dir = Math.random() < 0.5 ? 1 : -1;
            const speed = (Math.random() * 1.5 + 1) * (1 + index * 0.005);

if (type === 'road') {
                const carCount = Math.floor(Math.random() * 2) + 2;
                for (let i = 0; i < carCount; i++) {
                    obstacles.push({
                        x: i * (canvas.width / carCount) + Math.random() * 40,
                        width: Math.random() * 20 + 40,
                        color: ['#ff3333', '#ffffff', '#e6b800', '#9933ff'][Math.floor(Math.random() * 4)],
                        speed: speed * dir
                    });
                }
            } else if (type === 'water') {
                const logCount = Math.floor(Math.random() * 2) + 2;
                for (let i = 0; i < logCount; i++) {
                    obstacles.push({
                        x: i * (canvas.width / logCount),
                        width: Math.random() * 30 + 70,
                        color: '#8b5a2b',
                        speed: speed * 0.7 * dir
                    });
                }
            }

return { type, obstacles };
        }

function initLanes() {
            lanes = [];
            for (let i = 0; i < 50; i++) {
                lanes.push(generateLane(i));
            }
        }

// Handle Movement
        function movePlayer(dir) {
            if (!gameActive) return;

if (dir === 'up') {
                player.gridY++;
                if (player.gridY > maxRowReached) {
                    maxRowReached = player.gridY;
                    score = maxRowReached - 2;
                    scoreVal.innerText = score;
                }
            } else if (dir === 'down') {
                if (player.gridY > 1) player.gridY--;
            } else if (dir === 'left') {
                if (player.gridX > 0) player.gridX--;
            } else if (dir === 'right') {
                if (player.gridX < viewCols - 1) player.gridX++;
            }

while (lanes.length <= player.gridY + 10) {
                lanes.push(generateLane(lanes.length));
            }
        }

// Logic Controls
        window.addEventListener('keydown', (e) => {
            switch(e.key) {
                case 'ArrowUp': case 'w': case 'W': movePlayer('up'); break;
                case 'ArrowDown': case 's': case 'S': movePlayer('down'); break;
                case 'ArrowLeft': case 'a': case 'A': movePlayer('left'); break;
                case 'ArrowRight': case 'd': case 'D': movePlayer('right'); break;
            }
        });

// Mobile touch swipe translation
        let touchStart = null;
        window.addEventListener('touchstart', e => {
            touchStart = { x: e.touches.clientX, y: e.touches.clientY };
        }, {passive: true});

window.addEventListener('touchend', e => {
            if (!touchStart || !gameActive) return;
            let diffX = e.changedTouches.clientX - touchStart.x;
            let diffY = e.changedTouches.clientY - touchStart.y;

if (Math.abs(diffX) > Math.abs(diffY)) {
                if (diffX > 30) movePlayer('right');
                else if (diffX < -30) movePlayer('left');
            } else {
                if (diffY < -30) movePlayer('up');
                else if (diffY > 30) movePlayer('down');
            }
        }, {passive: true});

function gameOver() {
            gameActive = false;
            if (animationFrameId) cancelAnimationFrame(animationFrameId);
            menuDesc.innerText = `Best(Pano) made it through ${score} lanes.`;
            gameOverMenu.style.display = "block";
        }

function resetGame() {
            score = 0;
            maxRowReached = 2;
            player.gridX = 4;
            player.gridY = 2;
            player.offsetX = 0;
            player.offsetY = 0;
            scoreVal.innerText = score;
            initLanes();
        }

function updateAndRender() {
            if (!gameActive) return;

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

let cameraY = player.gridY - 3;

// Handle Riding Moving Logs in Water
            let currentLane = lanes[player.gridY];
            if (currentLane && currentLane.type === 'water') {
                let safe = false;
                let px = player.gridX * COL_WIDTH + COL_WIDTH / 2;
                
                for (let ob of currentLane.obstacles) {
                    let logLeft = ob.x;
                    let logRight = ob.x + ob.width;
                    if (px >= logLeft && px <= logRight) {
                        safe = true;
                        player.offsetX += ob.speed;
                        if (player.offsetX >= COL_WIDTH) {
                            player.gridX++;
                            player.offsetX -= COL_WIDTH;
                        } else if (player.offsetX <= -COL_WIDTH) {
                            player.gridX--;
                            player.offsetX += COL_WIDTH;
                        }
                        break;

Preview

Open Advanced Editor Full Screen