├── README.md
├── audio
├── car.wav
└── songs.mp3
├── images
├── LOGO.png
├── car1.jpg
├── car2.jpg
├── car3.jpg
├── car4.jpg
├── car5.jpg
├── car6.jpg
├── car7.jpg
├── car8.jpg
├── car9.jpg
├── cross_the_road.png
└── man.jpg
├── index.html
├── index.js
└── styles.css
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | 
4 | 
5 | 
6 | [](https://twitter.com/intent/follow?screen_name=warrior_aashuu)
7 |
8 |
9 |
🎮 Cross Road Game 🎮
10 |
11 |
🏎️💨Play the Game ✦
12 |
13 | ` Welcome to the Cross Road Car Game! In this thrilling game, you'll guide a car across busy roads filled with obstacles, testing your reflexes and strategic thinking. Get ready to experience endless fun and challenges! `
Game Features 🌟
16 |
17 | - **Simple Controls:** Easy-to-use keyboard controls for intuitive gameplay.
18 | - **Dynamic Difficulty:** Roads with varying speeds and traffic, making each level increasingly challenging.
19 | - **Endless Fun:** The game continues until you crash, so challenge yourself to beat your high score!
20 | - **Responsive Design:** Enjoy a seamless experience on both desktop and mobile devices.
21 | - **Music and Sound:** Enjoy a musical and smooth sound that makes your game experience better.
22 |
23 | Functionalities ⚙️
24 |
25 | - **Keyboard Controls:** Use arrow keys to move the car up, down, left, or right.
26 | - **Randomized Traffic:** Cars, trucks, and other obstacles appear at random intervals and speeds.
27 | - **Score Tracking:** Your score increases with every successful road crossed.
28 | - **Game Over Detection:** The game ends when your car collides with an obstacle.
29 |
30 | 🏎️💨 How to Play 🎮
31 |
32 | 1. **Start the Game:** Click on the play button or press `Enter` to begin.
33 | 2. **Move the Car:** Use the arrow keys on your keyboard to move the car in the desired direction.
34 | - **Up Arrow (↑):** Move forward
35 | - **Down Arrow (↓):** Move backward
36 | - **Left Arrow (←):** Move left
37 | - **Right Arrow (→):** Move right
38 | 3. **Cross the Roads:** Navigate through the traffic and try to cross as many roads as possible without crashing.
39 | 4. **Score Points:** Each successful crossing adds points to your score.
40 | 5. **Avoid Obstacles:** Dodge cars, trucks, and other road hazards that come your way.
41 |
42 | Game Rules 🚨
43 |
44 | - **Stay on the Road:** Keep your car on the road to avoid penalties.
45 | - **Avoid Collisions:** If your car collides with another vehicle or obstacle, the game will end.
46 | - **Increase Your Score:** The more roads you cross, the higher your score.
47 | - **Speed Up:** As you progress, the speed and frequency of the obstacles will increase, adding to the challenge.
48 |
49 |
50 |
51 |
52 | ` Enjoy the Game! `
53 |
54 | We hope you have fun playing the Classic Cross Road Game. If you have any feedback or suggestions, feel free to share them with us. Happy Gaming!
55 |
56 | `Don't forget to give A star to this repository ⭐`
57 |
58 |
59 | `👍🏻 All Set! 💌`
60 |
61 |
62 |
--------------------------------------------------------------------------------
/audio/car.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Cross-Road-Game/c31e75015caac93b88e6bfcd69bfd3ac876a3db0/audio/car.wav
--------------------------------------------------------------------------------
/audio/songs.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Cross-Road-Game/c31e75015caac93b88e6bfcd69bfd3ac876a3db0/audio/songs.mp3
--------------------------------------------------------------------------------
/images/LOGO.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Cross-Road-Game/c31e75015caac93b88e6bfcd69bfd3ac876a3db0/images/LOGO.png
--------------------------------------------------------------------------------
/images/car1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Cross-Road-Game/c31e75015caac93b88e6bfcd69bfd3ac876a3db0/images/car1.jpg
--------------------------------------------------------------------------------
/images/car2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Cross-Road-Game/c31e75015caac93b88e6bfcd69bfd3ac876a3db0/images/car2.jpg
--------------------------------------------------------------------------------
/images/car3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Cross-Road-Game/c31e75015caac93b88e6bfcd69bfd3ac876a3db0/images/car3.jpg
--------------------------------------------------------------------------------
/images/car4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Cross-Road-Game/c31e75015caac93b88e6bfcd69bfd3ac876a3db0/images/car4.jpg
--------------------------------------------------------------------------------
/images/car5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Cross-Road-Game/c31e75015caac93b88e6bfcd69bfd3ac876a3db0/images/car5.jpg
--------------------------------------------------------------------------------
/images/car6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Cross-Road-Game/c31e75015caac93b88e6bfcd69bfd3ac876a3db0/images/car6.jpg
--------------------------------------------------------------------------------
/images/car7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Cross-Road-Game/c31e75015caac93b88e6bfcd69bfd3ac876a3db0/images/car7.jpg
--------------------------------------------------------------------------------
/images/car8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Cross-Road-Game/c31e75015caac93b88e6bfcd69bfd3ac876a3db0/images/car8.jpg
--------------------------------------------------------------------------------
/images/car9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Cross-Road-Game/c31e75015caac93b88e6bfcd69bfd3ac876a3db0/images/car9.jpg
--------------------------------------------------------------------------------
/images/cross_the_road.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Cross-Road-Game/c31e75015caac93b88e6bfcd69bfd3ac876a3db0/images/cross_the_road.png
--------------------------------------------------------------------------------
/images/man.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Cross-Road-Game/c31e75015caac93b88e6bfcd69bfd3ac876a3db0/images/man.jpg
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Cross Road
20 |
21 |
22 |
24 |
25 |
26 |
Press "Space" To Start The Game
27 |
28 |
29 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | var manStartLoc = 15;
2 | var level = 1;
3 |
4 | var cars = [];
5 | var carNo = 0;
6 | var carStartloc = 29;
7 | var carEndLoc = carStartloc + 2;
8 | var temp = 0;
9 |
10 | var song = new Audio("audio/songs.mp3");
11 | var carCrah = new Audio("audio/car.wav");
12 |
13 | var gameTime = 500;
14 |
15 | function manMove(){
16 | if (manStartLoc === 1){
17 | manStartLoc = 15;
18 | level += 1;
19 |
20 | if(gameTime < 100){
21 | if(gameTime < 50){
22 | gameTime = gameTime;
23 | }
24 | else{
25 | gameTime -= 10;
26 | }
27 | }
28 | else{
29 | gameTime -= 25;
30 | };
31 |
32 | $(".levelH1").text("LEVEL: " + level);
33 | }
34 | else{
35 | manStartLoc = manStartLoc - 1;
36 | };
37 | $(".man_div").css("grid-row-start", manStartLoc);
38 | }
39 |
40 | var space = 32;
41 | var fd = 0;
42 | $(document).keydown(function(e){
43 | if (e.which == fd) {
44 | manMove()
45 | return false;
46 | };
47 | if (e.which == 13) {
48 | location.reload();
49 | return false;
50 | };
51 | if (e.which == space) {
52 | setTimeout(myFunction, gameTime);
53 | space = 0;
54 | fd = 38;
55 | $(".levelH1").text("LEVEL: 1");
56 | return false;
57 | };
58 | });
59 |
60 | var myFunction = function() {
61 | song.play();
62 | var n = Math.floor(Math.random()*13+2);
63 | var m = Math.floor(Math.random()*9+1);
64 | while(temp === n){
65 | n = Math.floor(Math.random()*13+2);
66 | };
67 | $(".game").append("")
68 | cars.push("car"+carNo)
69 | carNo += 1;
70 | carStartloc -= 1;
71 | carEndLoc = carStartloc + 2;
72 | for (var i=0; i < cars.length; i++){
73 | $("."+ cars[i]).css("grid-column-start", carStartloc + i);
74 | $("."+ cars[i]).css("grid-column-end", carEndLoc + i);
75 | if ( $("."+ cars[i]).css('grid-column-start') == "1"){
76 | $("."+ cars[i]).remove();
77 | };
78 | };
79 | temp = n;
80 | setTimeout(myFunction, gameTime);
81 | }
82 |
83 | var interval = setInterval(function(){
84 | var babu = 0;
85 | for (var i=0; i < cars.length; i++){
86 | if ( $("."+ cars[i]).css('grid-column-start') === $(".man_div").css('grid-column-start') && $("."+ cars[i]).css('grid-row-start') === $(".man_div").css('grid-row-start')){
87 | clearInterval(interval);
88 | babu += 1;
89 | if (babu === 1){
90 | $(".game").remove();
91 | $(".body").append("");
92 | $(".levelH1").text("Press Enter To Restart");
93 | song.pause();
94 | song = 0;
95 | carCrah.play();
96 | };
97 | };
98 | };
99 | },50);
100 |
101 |
--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | *{
2 | border: 0;
3 | padding: 0;
4 | margin: 0;
5 | }
6 |
7 | body{
8 | background-color: #ff0000;
9 | }
10 |
11 | .body{
12 | background-color: #ff0000;
13 | display: flex;
14 | justify-content: center;
15 | align-items: center;
16 | width: 100vw;
17 | height: 92vh;
18 | }
19 |
20 | .game{
21 | background-color: white;
22 | width: 120vmin;
23 | height: 92vmin;
24 | border: 3px solid #D09CFA;
25 | display: grid;
26 | grid-template-columns: repeat(30,1fr);
27 | grid-template-rows: repeat(15,1fr);
28 | }
29 |
30 | .gameOver{
31 | background-color: black;
32 | width: 120vmin;
33 | height: 92vmin;
34 | border: 3px solid red;
35 | display: flex;
36 | justify-content: center;
37 | align-items: center;
38 | }
39 |
40 | p{
41 | font-size: 6rem;
42 | border: 3px solid red;
43 | padding: 4%;
44 | font-weight: 500;
45 | color: white;
46 | justify-content: center;
47 | align-items: center;
48 | }
49 |
50 | .car{
51 | height: 100%;
52 | width: 100%;
53 |
54 | }
55 |
56 | .level{
57 | color: white;
58 | }
59 |
60 | .man{
61 | height: 100%;
62 | width: 100%;
63 |
64 | }
65 |
66 | .car_div{
67 | grid-row-start: 2;
68 | grid-column-start: 20;
69 | grid-column-end: 23;
70 | }
71 |
72 | .man_div{
73 | grid-row-start: 15;
74 | grid-column-start: 15;
75 | }
76 |
--------------------------------------------------------------------------------
11 | 
![](images/car"+m+".jpg)