Spaces:

Lewistoxic123
/

chatvid-chronicles

Running

App Files Files Community

Lewistoxic123 commited on Nov 20, 2025

Commit

84604f9

verified ·

1 Parent(s): 531179a

Create a game of chicken crossing road

Browse files

Files changed (3) hide show

chicken-game.html +87 -0
chicken-game.js +151 -0
script.js +4 -3

chicken-game.html ADDED Viewed

	@@ -0,0 +1,87 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chicken Crossing Road</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="components/navbar.js"></script>
+    <style>
+        #game-container {
+            width: 800px;
+            height: 600px;
+            margin: 20px auto;
+            position: relative;
+            overflow: hidden;
+            background: #87CEEB;
+            border: 4px solid #333;
+        }
+        #road {
+            position: absolute;
+            bottom: 100px;
+            width: 100%;
+            height: 200px;
+            background: #555;
+        }
+        #chicken {
+            position: absolute;
+            width: 50px;
+            height: 50px;
+            bottom: 150px;
+            left: 50px;
+            background-image: url('http://static.photos/animals/50x50/1');
+            background-size: contain;
+            z-index: 10;
+        }
+        .car {
+            position: absolute;
+            width: 80px;
+            height: 40px;
+            background-size: contain;
+            background-repeat: no-repeat;
+        }
+        #score {
+            text-align: center;
+            font-size: 24px;
+            margin-top: 10px;
+            color: #333;
+        }
+        #start-screen {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.7);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            z-index: 100;
+        }
+        #start-button {
+            padding: 15px 30px;
+            font-size: 24px;
+            background: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+    <custom-navbar></custom-navbar>
+    <div id="game-container">
+        <div id="road"></div>
+        <div id="chicken"></div>
+        <div id="score">Score: 0</div>
+        <div id="start-screen">
+            <h1 style="color: white; margin-bottom: 20px;">Chicken Crossing Road</h1>
+            <button id="start-button">Start Game</button>
+        </div>
+    </div>
+    <script src="chicken-game.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>

chicken-game.js ADDED Viewed

	@@ -0,0 +1,151 @@

+document.addEventListener('DOMContentLoaded', () => {
+    const gameContainer = document.getElementById('game-container');
+    const chicken = document.getElementById('chicken');
+    const road = document.getElementById('road');
+    const scoreDisplay = document.getElementById('score');
+    const startScreen = document.getElementById('start-screen');
+    const startButton = document.getElementById('start-button');
+    let score = 0;
+    let gameSpeed = 2;
+    let gameRunning = false;
+    let cars = [];
+    let gameInterval;
+    let carInterval;
+    // Chicken movement
+    document.addEventListener('keydown', (e) => {
+        if (!gameRunning) return;
+        const chickenRect = chicken.getBoundingClientRect();
+        const containerRect = gameContainer.getBoundingClientRect();
+        switch(e.key) {
+            case 'ArrowUp':
+                if (chickenRect.top > containerRect.top + 10) {
+                    chicken.style.bottom = (parseInt(chicken.style.bottom) + 10) + 'px';
+                }
+                break;
+            case 'ArrowDown':
+                if (chickenRect.bottom < road.getBoundingClientRect().top - 10) {
+                    chicken.style.bottom = (parseInt(chicken.style.bottom) - 10) + 'px';
+                }
+                break;
+            case 'ArrowLeft':
+                if (chickenRect.left > containerRect.left + 10) {
+                    chicken.style.left = (parseInt(chicken.style.left) - 10) + 'px';
+                }
+                break;
+            case 'ArrowRight':
+                if (chickenRect.right < containerRect.right - 10) {
+                    chicken.style.left = (parseInt(chicken.style.left) + 10) + 'px';
+                }
+                break;
+        }
+        checkCollision();
+    });
+    // Create cars
+    function createCar() {
+        if (!gameRunning) return;
+        const car = document.createElement('div');
+        car.className = 'car';
+        const carTypes = ['red', 'blue', 'yellow', 'green'];
+        const randomType = carTypes[Math.floor(Math.random() * carTypes.length)];
+        car.style.backgroundImage = `url('http://static.photos/automotive/80x40/${Math.floor(Math.random() * 10) + 1}')`;
+        const direction = Math.random() > 0.5 ? 'left' : 'right';
+        const startX = direction === 'right' ? -80 : gameContainer.offsetWidth;
+        car.style.left = startX + 'px';
+        car.style.top = (road.offsetTop + 20) + 'px';
+        if (direction === 'right') {
+            car.style.transform = 'scaleX(-1)';
+        }
+        gameContainer.appendChild(car);
+        cars.push({ element: car, direction: direction, speed: Math.random() * 2 + gameSpeed });
+    }
+    // Move cars
+    function moveCars() {
+        cars.forEach((car, index) => {
+            const currentLeft = parseInt(car.element.style.left);
+            if (car.direction === 'right') {
+                car.element.style.left = (currentLeft + car.speed) + 'px';
+                if (currentLeft > gameContainer.offsetWidth) {
+                    gameContainer.removeChild(car.element);
+                    cars.splice(index, 1);
+                }
+            } else {
+                car.element.style.left = (currentLeft - car.speed) + 'px';
+                if (currentLeft < -80) {
+                    gameContainer.removeChild(car.element);
+                    cars.splice(index, 1);
+                }
+            }
+        });
+        checkCollision();
+    }
+    // Check collision
+    function checkCollision() {
+        const chickenRect = chicken.getBoundingClientRect();
+        cars.forEach(car => {
+            const carRect = car.element.getBoundingClientRect();
+            if (
+                chickenRect.left < carRect.right &&
+                chickenRect.right > carRect.left &&
+                chickenRect.top < carRect.bottom &&
+                chickenRect.bottom > carRect.top
+            ) {
+                gameOver();
+            }
+        });
+        // Check if chicken reached top
+        if (chickenRect.top <= gameContainer.getBoundingClientRect().top + 10) {
+            score++;
+            scoreDisplay.textContent = `Score: ${score}`;
+            gameSpeed += 0.2;
+            chicken.style.bottom = '150px';
+            chicken.style.left = '50px';
+        }
+    }
+    // Game over
+    function gameOver() {
+        gameRunning = false;
+        clearInterval(gameInterval);
+        clearInterval(carInterval);
+        cars.forEach(car => {
+            gameContainer.removeChild(car.element);
+        });
+        cars = [];
+        alert(`Game Over! Your score: ${score}`);
+        startScreen.style.display = 'flex';
+        score = 0;
+        gameSpeed = 2;
+        scoreDisplay.textContent = `Score: ${score}`;
+    }
+    // Start game
+    startButton.addEventListener('click', () => {
+        startScreen.style.display = 'none';
+        gameRunning = true;
+        chicken.style.bottom = '150px';
+        chicken.style.left = '50px';
+        gameInterval = setInterval(moveCars, 20);
+        carInterval = setInterval(createCar, 2000);
+    });
+});

script.js CHANGED Viewed

@@ -2,9 +2,10 @@
 // Main app functionality
 document.addEventListener('DOMContentLoaded', () => {
     // Initialize any global functionality here
-    console.log('ChatVid Chronicles loaded!');
-// Example: Video card click handler
-    document.addEventListener('click', (e) => {
         if (e.target.closest('.video-card')) {
             const card = e.target.closest('.video-card');
             const title = card.getAttribute('data-title');

 // Main app functionality
 document.addEventListener('DOMContentLoaded', () => {
     // Initialize any global functionality here
+    console.log('Rizz Reels Royale loaded!');
+    // Example: Video card click handler
+document.addEventListener('click', (e) => {
         if (e.target.closest('.video-card')) {
             const card = e.target.closest('.video-card');
             const title = card.getAttribute('data-title');