From c737a3131a42b90341c0e83f7fee188e8e3157e2 Mon Sep 17 00:00:00 2001
From: kullansunil <kullansunil43@gmail.com>
Date: Sat, 19 Oct 2024 10:05:24 +0530
Subject: [PATCH] Create index.html

Project title
Google chrome DINO Game clone

Project Description
The famous Google chrome DINO Game clone.

Stack:
[ ] Html
[ ] CSS
[ ] JavaScript
---
 index.html | 216 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 216 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 000000000..c8ee1bd88
--- /dev/null
+++ b/index.html
@@ -0,0 +1,216 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DINO Game Clone</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: Arial, sans-serif;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            background-color: #f7f7f7;
+        }
+
+        #game-container {
+            position: relative;
+            width: 600px;
+            height: 150px;
+            overflow: hidden;
+            border: 2px solid #333;
+            background-color: #fff;
+        }
+
+        #dino {
+            position: absolute;
+            bottom: 0;
+            left: 50px;
+            width: 40px;
+            height: 40px;
+            background-color: #555;
+            border-radius: 5px;
+        }
+
+        .cactus {
+            position: absolute;
+            bottom: 0;
+            width: 20px;
+            height: 40px;
+            background-color: green;
+        }
+
+        #score {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            font-size: 20px;
+            color: #333;
+        }
+
+        #start-button {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            padding: 10px 20px;
+            font-size: 18px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            display: none; /* Hide the button initially */
+        }
+
+        #game-over {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 24px;
+            color: #d9534f;
+            display: none; /* Hide game over message initially */
+        }
+    </style>
+</head>
+<body>
+    <div id="game-container">
+        <div id="dino"></div>
+        <div id="score">Score: 0</div>
+        <div id="start-button">Start Game</div>
+        <div id="game-over">Game Over!</div>
+    </div>
+
+    <script>
+        const dino = document.getElementById('dino');
+        const gameContainer = document.getElementById('game-container');
+        const scoreDisplay = document.getElementById('score');
+        const startButton = document.getElementById('start-button');
+        const gameOverMessage = document.getElementById('game-over');
+
+        let score = 0;
+        let gameInterval;
+        let cactusInterval;
+        let isJumping = false;
+
+        // Start the game
+        startButton.addEventListener('click', startGame);
+
+        function startGame() {
+            score = 0;
+            scoreDisplay.textContent = `Score: ${score}`;
+            startButton.style.display = 'none';
+            gameOverMessage.style.display = 'none';
+
+            gameInterval = setInterval(updateScore, 1000);
+            cactusInterval = setInterval(createCactus, 2000);
+        }
+
+        // Update the score
+        function updateScore() {
+            score++;
+            scoreDisplay.textContent = `Score: ${score}`;
+        }
+
+        // Create cactus
+        function createCactus() {
+            const cactus = document.createElement('div');
+            cactus.classList.add('cactus');
+            cactus.style.left = '600px'; // Start cactus off-screen
+            gameContainer.appendChild(cactus);
+            moveCactus(cactus);
+        }
+
+        // Move cactus
+        function moveCactus(cactus) {
+            let position = 600; // Start position
+            const cactusInterval = setInterval(() => {
+                if (position < -20) {
+                    clearInterval(cactusInterval);
+                    cactus.remove();
+                } else {
+                    position -= 5;
+                    cactus.style.left = `${position}px`;
+
+                    // Check for collision
+                    if (checkCollision(cactus)) {
+                        endGame();
+                    }
+                }
+            }, 20);
+        }
+
+        // Check for collision
+        function checkCollision(cactus) {
+            const dinoRect = dino.getBoundingClientRect();
+            const cactusRect = cactus.getBoundingClientRect();
+
+            return (
+                dinoRect.left < cactusRect.right &&
+                dinoRect.right > cactusRect.left &&
+                dinoRect.bottom > cactusRect.top
+            );
+        }
+
+        // End the game
+        function endGame() {
+            clearInterval(gameInterval);
+            clearInterval(cactusInterval);
+            startButton.style.display = 'block';
+            gameOverMessage.style.display = 'block';
+            gameOverMessage.textContent = `Game Over! Your score: ${score}`;
+        }
+
+        // Handle jump
+        document.addEventListener('keydown', (event) => {
+            if (event.code === 'Space') {
+                jump();
+            }
+        });
+
+        function jump() {
+            if (isJumping) return; // Prevent multiple jumps
+            isJumping = true;
+
+            let jumpHeight = 100;
+            let jumpCount = 0;
+
+            const jumpInterval = setInterval(() => {
+                if (jumpCount < 15) {
+                    dino.style.bottom = `${jumpHeight - jumpCount * 6}px`;
+                    jumpCount++;
+                } else {
+                    clearInterval(jumpInterval);
+                    fall();
+                }
+            }, 20);
+        }
+
+        function fall() {
+            let fallCount = 0;
+
+            const fallInterval = setInterval(() => {
+                if (fallCount < 15) {
+                    dino.style.bottom = `${jumpHeight - (fallCount * 6)}px`;
+                    fallCount++;
+                } else {
+                    clearInterval(fallInterval);
+                    dino.style.bottom = '0px'; // Reset to ground level
+                    isJumping = false; // Allow jumping again
+                }
+            }, 20);
+        }
+
+        // Show the start button
+        startButton.style.display = 'block';
+    </script>
+</body>
+</html>
