{"id":22686862,"url":"https://github.com/busrarafa/grid_auto_drive","last_synced_at":"2026-05-04T02:31:57.194Z","repository":{"id":196801390,"uuid":"697164054","full_name":"BusraRafa/Grid_Auto_Drive","owner":"BusraRafa","description":"Grid Auto Drive is an action-packed arcade-style game combining precision driving and tactical decision-making. Implemented using Three.js  with HTML and CSS. The mission is to overcome all the obstacle appearing randomly with the three-dimensional car  \u0026 achieve the highest score possible. We rendered the objects by implementing WebGL rendering.","archived":false,"fork":false,"pushed_at":"2024-10-11T08:48:16.000Z","size":8559,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-09T23:15:46.808Z","etag":null,"topics":["html","javascript","javascript-game","three-js"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BusraRafa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-09-27T07:24:43.000Z","updated_at":"2024-11-14T09:55:57.000Z","dependencies_parsed_at":null,"dependency_job_id":"a2cc7735-f92d-4c8c-92de-f09793cedfad","html_url":"https://github.com/BusraRafa/Grid_Auto_Drive","commit_stats":null,"previous_names":["busrarafa/computer-graphics-project","busrarafa/grid_auto_drive"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BusraRafa%2FGrid_Auto_Drive","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BusraRafa%2FGrid_Auto_Drive/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BusraRafa%2FGrid_Auto_Drive/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BusraRafa%2FGrid_Auto_Drive/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BusraRafa","download_url":"https://codeload.github.com/BusraRafa/Grid_Auto_Drive/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237150249,"owners_count":19263312,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html","javascript","javascript-game","three-js"],"created_at":"2024-12-09T23:15:51.482Z","updated_at":"2026-05-04T02:31:57.148Z","avatar_url":"https://github.com/BusraRafa.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# GridAuto Drive(threejs)\n**I. INTRODUCTION**\u003cbr /\u003e\u003cbr /\u003eGrid Auto Drive is an action-packed arcade-style game\n that combines precision driving and tactical decision-making.\n In this futuristic world, the player takes on the role of\n a skilled pilot controlling an advanced autonomous vehicle\n designed to navigate through complex grids. The mission\n is to overcome obstacles, reach the finish line, and achieve\n the highest score possible.Each level is an intricate maze of\n interconnected grids with various layouts and difficulty levels.\n Some grids are straightforward, while others present mind\nboggling twists and turns.Testing the players speed and agility\n in Time Attack mode, where he must complete the grids within\n the shortest time possible. Alternatively, challenge yourself in\n Endless Mode, where the grids become progressively more\n challenging, and the goal is to survive for as long as the player\n can.The player immerges in the futuristic world of Grid Auto\n Drive with eye-catching graphics and a pulsating soundtrack\n that intensifies as you race through the grids.\u003cbr /\u003e\u003cbr /\u003eThe game offers an exhilarating and challenging gaming\n experience that will keep the player hooked for hours. With\n its intricate grid mazes, diverse obstacles, and engaging power\nups, the game ensures every moment is filled with excitement\n and suspense. As the player strive to achieve the highest scores\n and climb the global leaderboards, he’ll discover the thrill of\n mastering precision driving and tactical decision-making. The\n stunning visuals and pulsating soundtrack add to the immersive\n atmosphere, pulling players deeper into the futuristic world of\n Grid Auto Drive. So, buckle up and prepare to embark on an\n unforgettable journey where the skills and determination will\n determine players place among the grid-driving elite\u003cbr /\u003e\u003cbr /\u003e**II. PROPOSED METHODOLOGY**\u003cbr /\u003e\u003cbr /\u003eOur project named “GridAuto Drive” is a car speed controller game. With starting the game, the player will be able\n to control the speed of the car and on the right side, other\n obstacles will be moving at their own speed. The goal of the\n player will be to control the speed of the car and to avoid\n as many obstacles as possible. So, avoiding collision will be\n difficult. To prevent collision and control the speed of the car\n player will need to accelerate or decelerate the speed of the\n car by using the up and down arrow buttons. When the player\n hits an obstacle it will deduct the score and when the player\n does not collide the it will be added to the score. We will try\n to implement the game using Three.js along with HTML and\n CSS. After setting up the scene, the lights and the camera we\n will try to build a three-dimensional car by putting together\n four or more boxes. There will be two types of objects. One\n will be the car and the other will be the obstacles. The obstacle\n will appear randomly and the car have to avoid all the obstacle.\n We will try to render the objects by implementing WebGL\n rendering. Some more detailed information:\u003cbr /\u003e**Scene Setup:** Setting up a 3D scene using Three.js to render\n the game environment. Creating a camera that follows the car’s\n movements and provides a dynamic view of the race track. Set\n up lighting to illuminate the scene realistically.\u003cbr /\u003e**Car and Controls:** Designing and modelling a 3D car\n object using Three.js geometries and materials. Implementing\n keyboard controls to allow the player to move the car up,\n down, left, and right. Implementing a mechanism to increase\n the car’s speed gradually as the player maneuvers successfully.\u003cbr /\u003e**Obstacles Generation:** Generating a variety of obstacles\n (e.g., barriers, other vehicles) using Three.js geometries and\n materials. Placing obstacles on the race track at random\n intervals and positions to create challenge and excitement.\u003cbr /\u003e**Collision Detection:** Implementing collision detection logic\n to detect collisions between the car and obstacles. Upon\n collision, decrease the player’s score, slow down the car, and\n trigger visual/audio effects.\u003cbr /\u003e **Scoring Mechanism:** Initializing the player’s score to 0 at\n the start of the game. Increment the score as the car success\nfully navigates through the obstacles. Display the current score\n prominently on the screen using HTML elements.\u003cbr /\u003e**Game Over Conditions:** Monitoring the score continuously\n during gameplay. If the score reaches-1000 or 1000, end the\n game. Displaying a ”Game Over” message at the center of the\n screen when the game ends.\u003cbr /\u003e**Optimizations and Enhancements:** Implementing collision\n avoidance AI for computer-controlled opponents if desired.\n Add acceleration and deceleration mechanics to enhance the\n car’s movement realism. Implement visual effects like particle\n systems for skid marks, smoke, and exhaust. Design an en\ngaging race track environment with textures, decorations, and\n dynamic elements.\u003cbr /\u003e**User Interface and Feedback:** Designing a user interface for\n starting, pausing, and restarting the game. Provide feedback to\n the player through sounds, visual effects, and UI messages.\u003cbr /\u003e**Game Loop:** Implementing a game loop using request\n AnimationFrame to continuously update the game’s state and\n render the scene.\u003cbr /\u003e**User Experience and Testing:** Testing the game thoroughly\n to ensure smooth gameplay, collision accuracy, and proper\n functioning of game mechanics. Optimize performance for a\n smooth experience across various devices and browsers.\u003cbr /\u003e**Deployment:** Hosting the game on a web server or platform\n for players to access and enjoy\n\n[click here to play](http://noiron.github.io/race-game-threejs/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbusrarafa%2Fgrid_auto_drive","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbusrarafa%2Fgrid_auto_drive","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbusrarafa%2Fgrid_auto_drive/lists"}