From 90b9e5b5773a84c31e2ef77ceb81f7ca541c9ab8 Mon Sep 17 00:00:00 2001
From: Wahaj-Raza <wahajraza69@gmail.com>
Date: Wed, 5 Oct 2022 00:47:54 +0500
Subject: [PATCH] Added a Game

---
 9-car-game/index.html | 214 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 214 insertions(+)
 create mode 100644 9-car-game/index.html
diff --git a/9-car-game/index.html b/9-car-game/index.html
new file mode 100644
index 00000000..1407c01e
--- /dev/null
+++ b/9-car-game/index.html
@@ -0,0 +1,214 @@
+<html>
+
+<head>
+    <title>JavaScript</title>
+    <style>
+        .hide {
+            display: none;
+        }
+        
+        .car,
+        .enemy {
+            position: absolute;
+            bottom: 100px;
+            margin: auto;
+            width: 50px;
+            height: 100px;
+            background-color: white;
+            line-height: 38px;
+            font-size: 1.7em;
+            text-align: center;
+            vertical-align: middle;
+            background-image: url(car2.png);
+            background-size: cover;
+        }
+        
+        .line {
+            position: absolute;
+            height: 100px;
+            width: 10px;
+            margin-left: 195px;
+            background-color: white;
+        }
+        
+        .score {
+            background-color: black;
+            height: 70px;
+            text-align: center;
+            color: white;
+            font-size: 1.5em;
+            font-family: fantasy;
+        }
+        
+        .gameArea {
+            background-color: black;
+            width: 400px;
+            height: 100%;
+            overflow: hidden;
+            position: relative;
+            margin: auto;
+        }
+        
+        .startScreen {
+            position: absolute;
+            background-color: red;
+            left: 25%;
+            top: 100px;
+            color: white;
+            z-index: 1;
+            text-align: center;
+            border: 1px solid red;
+            padding: 15px;
+            margin: auto;
+            width: 50%;
+            font-family: sans-serif;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="score"></div>
+    <div class="game">
+        <div class="startScreen">Press here to Start
+            <br>Arrow keys to move
+            <br>If you hit a another car you will lose.</div>
+        <div class="gameArea"></div>
+    </div>
+    <script>
+        const score = document.querySelector(".score");
+        const startScreen = document.querySelector(".startScreen");
+        const gameArea = document.querySelector(".gameArea");
+        let player = {
+            speed: 5
+            , score: 0
+        };
+        let keys = {
+            ArrowUp: false
+            , ArrowDown: false
+            , ArrowRight: false
+            , ArrowLeft: false
+        };
+        startScreen.addEventListener("click", start);
+        document.addEventListener("keydown", pressOn);
+        document.addEventListener("keyup", pressOff);
+
+        function moveLines() {
+            let lines = document.querySelectorAll(".line");
+            lines.forEach(function (item) {
+                if (item.y >= 1500) {
+                    item.y -= 1500;
+                }
+                item.y += player.speed;
+                item.style.top = item.y + "px";
+            })
+        }
+
+        function isCollide(a, b) {
+            let aRect = a.getBoundingClientRect();
+            let bRect = b.getBoundingClientRect();
+            return !(
+                (aRect.bottom < bRect.top) || (aRect.top > bRect.bottom) || (aRect.right < bRect.left) || (aRect.left > bRect.right))
+        }
+
+        function moveEnemy(car) {
+            let ele = document.querySelectorAll(".enemy");
+            ele.forEach(function (item) {
+                if (isCollide(car, item)) {
+                    console.log("HIT");
+                    endGame();
+                }
+                if (item.y >= 1500) {
+                    item.y = -600;
+                    item.style.left = Math.floor(Math.random() * 350) + "px";
+                    item.style.backgroundColor = randomColor();
+                }
+                item.y += player.speed;
+                item.style.top = item.y + "px";
+            })
+        }
+
+        function playGame() {
+            let car = document.querySelector(".car");
+            moveLines();
+            moveEnemy(car);
+            let road = gameArea.getBoundingClientRect();
+            if (player.start) {
+                if (keys.ArrowUp && player.y > road.top) {
+                    player.y -= player.speed;
+                }
+                if (keys.ArrowDown && player.y < road.bottom) {
+                    player.y += player.speed;
+                }
+                if (keys.ArrowLeft && player.x > 0) {
+                    player.x -= player.speed;
+                }
+                if (keys.ArrowRight && player.x < (road.width - 50)) {
+                    player.x += player.speed;
+                }
+                car.style.left = player.x + 'px';
+                car.style.top = player.y + 'px';
+                window.requestAnimationFrame(playGame);
+                player.score++;
+                score.innerText = "Score: " + player.score;
+            }
+        }
+
+        function pressOn(e) {
+            e.preventDefault();
+            keys[e.key] = true;
+        }
+
+        function pressOff(e) {
+            e.preventDefault();
+            keys[e.key] = false;
+        }
+
+        function endGame() {
+            player.start = false;
+            score.innerHTML = "Game Over<br>Score was " + player.score;
+            startScreen.classList.remove("hide");
+        }
+
+        function start() {
+            startScreen.classList.add("hide");
+            //gameArea.classList.remove("hide");
+            gameArea.innerHTML = "";
+            player.start = true;
+            player.score = 0;
+            for (let x = 0; x < 10; x++) {
+                let div = document.createElement("div");
+                div.classList.add("line");
+                div.y = x * 150;
+                div.style.top = (x * 150) + "px";
+                gameArea.appendChild(div);
+            }
+            window.requestAnimationFrame(playGame);
+            let car = document.createElement("div");
+            //car.innerText = "Car";
+            car.setAttribute("class", "car");
+            gameArea.appendChild(car);
+            player.x = car.offsetLeft;
+            player.y = car.offsetTop;
+            for (let x = 0; x < 3; x++) {
+                let enemy = document.createElement("div");
+                enemy.classList.add("enemy");
+                enemy.innerHTML = "<br>" + (x + 1);
+                enemy.y = ((x + 1) * 600) * -1;
+                enemy.style.top = enemy.y + "px";
+                enemy.style.left = Math.floor(Math.random() * 350) + "px";
+                enemy.style.backgroundColor = randomColor();
+                gameArea.appendChild(enemy);
+            }
+        }
+
+        function randomColor() {
+            function c() {
+                let hex = Math.floor(Math.random() * 256).toString(16);
+                return ("0" + String(hex)).substr(-2)
+            }
+            return "#" + c() + c() + c();
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
