Add files via upload

aritradevelops · May 27, 2022 · 1334d21 · 1334d21
1 parent 941d435
commit 1334d21
Show file tree

Hide file tree

Showing 20 changed files with 389 additions and 0 deletions.
diff --git a/images/227-2270341_red-twitter-icon-free-social-icons-twitter-logo.png b/images/227-2270341_red-twitter-icon-free-social-icons-twitter-logo.png
diff --git a/images/bg.jpg b/images/bg.jpg
diff --git a/images/c.png b/images/c.png
diff --git a/images/car.png b/images/car.png
diff --git a/images/car1.png b/images/car1.png
diff --git a/images/carf.png b/images/carf.png
diff --git a/images/cc.png b/images/cc.png
diff --git a/images/ccc.png b/images/ccc.png
diff --git a/images/cce.png b/images/cce.png
diff --git a/images/h.png b/images/h.png
diff --git a/images/house.jpg b/images/house.jpg
diff --git a/images/house.png b/images/house.png
diff --git a/images/house.xcf b/images/house.xcf
diff --git a/images/housef.png b/images/housef.png
diff --git a/images/logo-tree-png-1-png-image-tree-logo-png-500_500.png b/images/logo-tree-png-1-png-image-tree-logo-png-500_500.png
diff --git a/images/lovebird-png-hd-pluspng-love-birds-png-800.png b/images/lovebird-png-hd-pluspng-love-birds-png-800.png
diff --git a/images/vector-chair-top-view-9.png b/images/vector-chair-top-view-9.png
diff --git a/in.txt b/in.txt
diff --git a/index.html b/index.html
@@ -0,0 +1,242 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>carGame</title>
+    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href="style.css">
+
+</head>
+<body>
+    <div class="display">
+        <div class="play"></div>
+        <div class="score hide"></div>
+        <div class="gameArea"></div>
+        <div class="pauseArea hide"> 
+            <div class="animation"></div>
+            <div class="animation d"></div>
+            <div class="animation dd"></div>
+        </div>
+        <div class="startScreen">
+        <p> click here to start <br>  Arrow keys to move <br> If you another car game over
+        <br> press enter to pause/play</p>
+        </div>
+
+    </div>
+    <!--jquery pluggin-->
+<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>-->
+<script>
+        const score = document.querySelector('.score');
+        const gameArea = document.querySelector('.gameArea');
+        const startScreen = document.querySelector('.startScreen');
+        const pauseArea = document.querySelector('.pauseArea');
+        let play = {speed : 5, score : 0,i:1, pause : false }
+        let pause = {}
+        // console.log(startScreen);
+        document.addEventListener('keydown',keyDown);
+        document.addEventListener('keyup',keyUp);
+        // document.addEventListener('keypress',keyPress);
+        let keys =  {   ArrowUp : false,
+                        ArrowDown : false,
+                        ArrowLeft : false,
+                        ArrowRight : false,
+                        Enter : false
+                    }
+
+        // let enter = {}
+        startScreen.addEventListener('click',start);
+        // function keyPress(e){
+        //     e.preventDefault();
+        //     console.log(e.key);
+        //     pause [e.key] = true;
+        //     // pause [e.key] = false;   
+        //     pause.i += 1;
+        //     // console.log(pause);
+        //     // gamePause();
+        // }
+        function keyDown(e){
+            e.preventDefault();
+            keys[e.key] = true;
+            // console.log(e.key);
+            // console.log(keys);
+            if(e.key == "Enter" && play.pause){
+                window.requestAnimationFrame(gamePlay);
+                play.pause = false;
+                keys.Enter = false;
+                pauseArea.classList.add('hide');
+            }
+        }
+        function keyUp(e){
+            e.preventDefault();
+            keys[e.key] = false;
+            // console.log(e.key);
+        }
+        function carSpeed(){
+            let Speed = 2;
+            if(play.start){
+                if(play.score > 4000 ){Speed = 10; }
+                else if(play.score > 3000 ){Speed = 9;}
+                else if(play.score > 2500 ){Speed = 8;}
+                else if(play.score > 2000 ){Speed = 7;}
+                else if(play.score > 1500 ){Speed = 6;}
+                else if(play.score > 1000 ){Speed = 5;}
+                else if(play.score > 500 ){Speed = 4;}
+                else if(play.score > 100 ){Speed = 3;}
+            }else{
+                speed = 2;
+            }
+            console.log(Speed);
+            return Speed;
+        }
+        function randomColor(){
+            function c(){
+                let hex = Math.floor(Math.random()*256).toString(16);
+                return ("0" + String(hex)).substr(-2);
+            }
+            return "#"+c()+c()+c();
+            // console.log( "#"+c()+c()+c());
+        }
+        function isCollide(a,b){
+            aRect = a.getBoundingClientRect();
+            bRect = b.getBoundingClientRect();
+            return !((aRect.top > bRect.bottom)||(aRect.bottom < bRect.top)||
+            (aRect.left > bRect.right)||(aRect.right < bRect.left));
+        }
+        function moveLines(){
+            let lines = document.querySelectorAll('.lines');
+            lines.forEach(
+                function(item){
+                    if(item.y > 700){
+                        item.y -= 750; 
+                    }
+                item.y += play.speed;
+                item.style.top = item.y + 'px';
+                }
+            )
+        }
+
+
+        function endGame(){
+            play.start = false;
+            let ps = play.score +1 ;
+            startScreen.classList.remove('hide');
+            startScreen.innerHTML = "Game over <br> Your score was: <strong>" + ps +
+            "</strong> <br> Click to restart";
+            // score.innerText = "Score is : " + ps ;
+            score.classList.add('hide');
+            play.score = 0;
+
+        }
+        function moveEnemy(car){
+            let enemy = document.querySelectorAll('.enemy');
+            enemy.forEach(function(item){
+                if(isCollide(car,item)){
+                    // console.log("boom HIT");
+                    endGame();
+                }
+                if(item.y > 750){
+                    item.y = -400;
+                    item.style.left = Math.floor(Math.random()*350) + 'px';
+                    item.style.backgroundColor = randomColor();
+                }
+
+                // console.log(carSpeed);
+                item.y += carSpeed();
+                // console.log(item.y);
+                item.style.top = item.y + 'px';
+                // item.style.left = Math.floor(Math.random()*350) + 'px';
+
+            })
+
+        }
+        function gamePlay(){
+            // console.log("hii");
+            let car = document.querySelector('.car');
+            let road = gameArea.getBoundingClientRect();
+            if(play.start){
+                moveLines();
+                moveEnemy(car);
+                pause.id = window.requestAnimationFrame(gamePlay);
+                play.score++;
+                score.innerText = "Score is : " + play.score;
+                if(keys.ArrowUp && play.y >100){play.y -= play.speed}
+                if(keys.ArrowDown && play.y <(road.height - 80)){play.y += play.speed}
+                if(keys.ArrowLeft && play.x > 0){play.x -= play.speed}
+                if(keys.ArrowRight && play.x <(road.width - 64) ){play.x += play.speed}
+                // console.log(keys.ArrowUp);
+                // console.log(play.speed);
+                // console.log(car.offsetLeft);
+                // console.log(play.y);
+                // if(play.score > 500){
+                //     cancelAnimationFrame(pause.id);
+            }
+                if( keys.Enter && (!play.pause)){
+                    // gamePause(pause.id);
+                    cancelAnimationFrame(pause.id);
+                    play.pause = true;
+                    pauseArea.classList.remove('hide');
+                    // console.log(play.pause);
+                }
+
+            car.style.top = play.y + "px";
+            car.style.left = play.x + "px";
+
+            // console.log(road);
+            // console.log(keys);
+            // console.log(pause.id);
+            // console.log(play.pause);
+            // console.log( "#"+c()+c()+c());
+        }
+        // function gamePause(){
+        //     if (pause.Enter && (pause.i %2 == 0)){
+        //         cancelAnimationFrame(pause.id);
+        //     }else{
+        //         window.requestAnimationFrame(gamePlay);
+        //     }
+        // }
+        // function gamePause(id){
+
+        // }
+        function start(){
+            play.start = true;
+            score.classList.remove('hide');
+            startScreen.classList.add('hide');
+            // gameArea.classList.remove('hide');
+            gameArea.innerHTML = "";
+            window.requestAnimationFrame(gamePlay); 
+            // gamePlay();
+
+            for(x=0;x<=5;x++){
+                let roadLine = document.createElement('div');
+                roadLine.setAttribute('class','lines');
+                roadLine.y = (x*150);
+                roadLine.style.top = roadLine.y + 'px';
+                gameArea.appendChild(roadLine);
+            }
+            for(x=0;x<=3;x++){
+            // while(play.start){
+                let enemyCar = document.createElement('div');
+                enemyCar.setAttribute('class','enemy');
+                enemyCar.style.backgroundColor = randomColor();
+                enemyCar.y = ((x+1)*300)*-1;
+                enemyCar.style.top = enemyCar.y + 'px';
+                enemyCar.style.left = Math.floor(Math.random()*350) + 'px';
+                gameArea.appendChild(enemyCar);
+            // }
+            }
+            let car = document.createElement('div');
+            car.setAttribute('class','car');
+            // car.innerHTML = 'hey im your car';
+            gameArea.appendChild(car);
+            play.x = car.offsetLeft;
+            play.y = car.offsetTop;
+            // console.log(play.x);
+            // console.log(play.y);
+        }
+        // console.log(endGame());
+
+</script>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,147 @@
+*{
+    margin: 0;padding: 0;font-family: 'Josefin Sans', sans-serif;
+}
+.hide{
+    display: none;
+}
+.display{
+    background-image: url("images/bg.jpg");
+    width: 100%;
+    height: 100vh;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+
+}
+.play{
+    display: none;
+}
+.startScreen{
+    position: absolute;
+    top:50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    height: 160px;
+    width: 600px;
+    background: #FF4136;
+    line-height: 40px;
+    z-index: 1;
+    cursor: pointer;
+    box-shadow: 0 5px 5px #777;
+    text-align: center;
+    font-size: 20px;
+    /* font-weight: bold; */
+    letter-spacing: 5px;
+    text-transform: uppercase;
+    color: white;
+    word-spacing: 10px;
+}
+p {
+    position: relative;
+    margin: auto;
+    /* padding: 20px; */
+}
+.car{
+    background-color:red;
+}
+.car,.enemy{
+    height: 80px;
+    width: 50px;
+    position: absolute;
+    bottom: 0px;
+    left: 175px;
+    background-image: url('images/ccc.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    filter: opacity(100%);
+    border-radius: 13px;
+
+}
+.enemy{
+    /* background-color: blue; */
+    background-image: url('images/cce.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    filter: opacity(100%);
+    border-radius: 13px;
+}
+.lines{
+    height: 100px;
+    width: 10px;
+    position: absolute;
+    margin-left: 195px;
+    background: white;
+}
+.gameArea{
+    position: relative;
+    height:100vh;
+    width: 400px;
+    margin: auto;
+    background-color: #35384F;
+    overflow: hidden;
+    border-right: 7px dashed #c8d6e5;
+    border-left: 7px dashed #c8d6e5;
+
+}
+.pauseArea{
+    position: absolute;
+    height: 80px;
+    width: 200px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    z-index: 2;
+    background-color: #fcfc03;
+    border-radius: 20px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+}
+.animation{
+    position: relative;
+    height: 20px;
+    width: 20px;
+    margin-top: 5px;
+    border-radius: 10px;
+    background-color: #3a24e0;
+    display: grid;
+    /* margin: 5px 0px; */
+    /* left: 20px; */
+    /* top: 50%;
+    transform: translateY(-50%);  */
+    animation-name: example;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+}
+.d{
+    background-color: red;
+    animation-name: example;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+    animation-direction: alternate-reverse;
+}
+.dd{
+    background-color:green;
+    animation-name: example;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+
+}
+@keyframes example {
+    from{left:20px;}
+    to{left:140px;}
+}
+.score{
+    position: absolute;
+    top: 40px;
+    left: 50px;
+    width: 280px;
+    z-index: 1;
+    /* height: 70px; */
+    line-height: 70px;
+    text-align: center;
+    background-color: #67e667de;
+    color: blue;
+    font-size: 1.5rem;
+    font-family: fantasy;
+    box-shadow: 0 5px 5px #777;
+}